alphonse/zero2prod
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Update templates

Browse Source
This commit is contained in:
Alphonse Paix
2025-10-07 23:12:20 +02:00
parent f18899b1a6
commit 9cbcdc533e
3 changed files with 62 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
templates/user/edit.html
View File

@@ -1,15 +1,14 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Edit profile{% endblock %} {% block title %}Edit profile{% endblock %}
{% block content %} {% block content %}
<div class="max-w-5xl mx-auto p-4 sm:p-6"> <div class="max-w-5xl mx-auto p-4 sm:p-6">
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Edit Profile</h1> <h1 class="text-3xl font-bold text-gray-900">Edit your profile</h1>
<p class="mt-2 text-gray-600">Manage your profile and account settings.</p> <p class="mt-2 text-gray-600">Manage your profile and account settings.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
{% include "edit/update_profile.html" %}
{% include "edit/change_password.html" %}
</div>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
{% include "edit/update_profile.html" %}
{% include "edit/change_password.html" %}
</div>
</div>
{% endblock %} {% endblock %}

90
templates/user/edit/change_password.html
View File

@@ -1,48 +1,46 @@
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-8"> <div class="bg-white rounded-lg shadow-md border border-gray-200 p-8">
<h2 class="text-xl font-semibold text-gray-900 mb-6">Change Password</h2> <h2 class="text-xl font-semibold text-gray-900 mb-6">Password</h2>
<form hx-post="/password"
<form hx-post="/password" hx-target="#password-messages"
hx-target="#password-messages" hx-swap="innerHTML"
hx-swap="innerHTML" class="space-y-4">
class="space-y-4"> <div>
<div> <label for="current_password"
<label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">Current password</label>
class="block text-sm font-medium text-gray-700 mb-2">Current password</label> <input type="password"
<input type="password" id="current_password"
id="current_password" name="current_password"
name="current_password" required
required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500" />
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"/> </div>
</div> <div>
<div> <label for="new_password"
<label for="new_password" class="block text-sm font-medium text-gray-700 mb-2">New password</label>
class="block text-sm font-medium text-gray-700 mb-2">New password</label> <input type="password"
<input type="password" id="new_password"
id="new_password" name="new_password"
name="new_password" required
required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500" />
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"/> </div>
</div> <div>
<div> <label for="new_password_check"
<label for="new_password_check" class="block text-sm font-medium text-gray-700 mb-2">Confirm new password</label>
class="block text-sm font-medium text-gray-700 mb-2">Confirm new password</label> <input type="password"
<input type="password" id="new_password_check"
id="new_password_check" name="new_password_check"
name="new_password_check" required
required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500" />
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"/> </div>
</div> <button type="submit"
<button type="submit" class="w-full bg-green-600 text-white hover:bg-green-700 font-medium py-3 px-4 rounded-md transition-colors flex items-center justify-center">
class="w-full bg-green-600 text-white hover:bg-green-700 font-medium py-3 px-4 rounded-md transition-colors flex items-center justify-center"> <svg class="w-4 h-4 mr-2"
<svg class="w-4 h-4 mr-2" fill="none"
fill="none" viewBox="0 0 24 24"
viewBox="0 0 24 24" stroke="currentColor">
stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" </svg>
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/> Update
</svg> </button>
Update password <div id="password-messages" class="mt-4"></div>
</button> </form>
<div id="password-messages" class="mt-4"></div>
</form>
</div> </div>

24
templates/user/edit/update_profile.html
View File

@@ -1,40 +1,30 @@
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-8"> <div class="bg-white rounded-lg shadow-md border border-gray-200 p-8">
<h2 class="text-xl font-semibold text-gray-900 mb-6">Profile Information</h2> <h2 class="text-xl font-semibold text-gray-900 mb-6">Profile settings</h2>
<form hx-put="/users/edit" <form hx-put="/users/edit"
hx-target="#edit-messages" hx-target="#edit-messages"
hx-swap="innerHTML" hx-swap="innerHTML"
class="space-y-6"> class="space-y-6">
<input type="hidden" name="user_id" value="{{ user.user_id }}" /> <input type="hidden" name="user_id" value="{{ user.user_id }}" />
<div> <div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1"> <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
Username
</label>
<input type="text" <input type="text"
name="username" name="username"
id="username" id="username"
value="{{ user.username }}" value="{{ user.username }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<div> <div>
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-1"> <label for="full_name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
Full Name
</label>
<input type="text" <input type="text"
id="full_name" id="full_name"
name="full_name" name="full_name"
value="{{ user.full_name.as_deref().unwrap_or("") }}" value="{{ user.full_name.as_deref().unwrap_or("") }}"
placeholder="John Doe" placeholder="John Doe"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<p class="mt-1 text-xs text-gray-500">Your real name (optional)</p> <p class="mt-1 text-xs text-gray-500">Your real name (optional)</p>
</div> </div>
<div> <div>
<label for="bio" class="block text-sm font-medium text-gray-700 mb-1"> <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
Bio
</label>
<textarea id="bio" <textarea id="bio"
name="bio" name="bio"
rows="4" rows="4"
@@ -43,12 +33,10 @@
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ user.bio.as_deref().unwrap_or("") }}</textarea> class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ user.bio.as_deref().unwrap_or("") }}</textarea>
<p class="mt-1 text-xs text-gray-500">Maximum 500 characters</p> <p class="mt-1 text-xs text-gray-500">Maximum 500 characters</p>
</div> </div>
<button type="submit" <button type="submit"
class="w-full bg-blue-600 text-white hover:bg-blue-700 font-medium py-2 px-4 rounded-md transition-colors"> class="w-full bg-blue-600 text-white hover:bg-blue-700 font-medium py-2 px-4 rounded-md transition-colors">
Save changes Save changes
</button> </button>
<div id="edit-messages"></div> <div id="edit-messages"></div>
</form> </form>
</div> </div>