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" %}
{% block title %}Edit profile{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto p-4 sm:p-6">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Edit Profile</h1>
<p class="mt-2 text-gray-600">Manage your profile and account settings.</p>
<div class="max-w-5xl mx-auto p-4 sm:p-6">
<div class="mb-8">
<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>
</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 class="grid grid-cols-1 lg:grid-cols-2 gap-8">
{% include "edit/update_profile.html" %}
{% include "edit/change_password.html" %}
</div>
</div>
{% 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">
<h2 class="text-xl font-semibold text-gray-900 mb-6">Change Password</h2>
<form hx-post="/password"
hx-target="#password-messages"
hx-swap="innerHTML"
class="space-y-4">
<div>
<label for="current_password"
class="block text-sm font-medium text-gray-700 mb-2">Current password</label>
<input type="password"
id="current_password"
name="current_password"
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"/>
</div>
<div>
<label for="new_password"
class="block text-sm font-medium text-gray-700 mb-2">New password</label>
<input type="password"
id="new_password"
name="new_password"
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"/>
</div>
<div>
<label for="new_password_check"
class="block text-sm font-medium text-gray-700 mb-2">Confirm new password</label>
<input type="password"
id="new_password_check"
name="new_password_check"
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"/>
</div>
<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">
<svg class="w-4 h-4 mr-2"
fill="none"
viewBox="0 0 24 24"
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"/>
</svg>
Update password
</button>
<div id="password-messages" class="mt-4"></div>
</form>
<h2 class="text-xl font-semibold text-gray-900 mb-6">Password</h2>
<form hx-post="/password"
hx-target="#password-messages"
hx-swap="innerHTML"
class="space-y-4">
<div>
<label for="current_password"
class="block text-sm font-medium text-gray-700 mb-2">Current password</label>
<input type="password"
id="current_password"
name="current_password"
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" />
</div>
<div>
<label for="new_password"
class="block text-sm font-medium text-gray-700 mb-2">New password</label>
<input type="password"
id="new_password"
name="new_password"
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" />
</div>
<div>
<label for="new_password_check"
class="block text-sm font-medium text-gray-700 mb-2">Confirm new password</label>
<input type="password"
id="new_password_check"
name="new_password_check"
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" />
</div>
<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">
<svg class="w-4 h-4 mr-2"
fill="none"
viewBox="0 0 24 24"
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" />
</svg>
Update
</button>
<div id="password-messages" class="mt-4"></div>
</form>
</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">
<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"
hx-target="#edit-messages"
hx-swap="innerHTML"
class="space-y-6">
<input type="hidden" name="user_id" value="{{ user.user_id }}" />
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">
Username
</label>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
<input type="text"
name="username"
id="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">
</div>
<div>
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-1">
Full Name
</label>
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text"
id="full_name"
name="full_name"
value="{{ user.full_name.as_deref().unwrap_or("") }}"
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">
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">
<p class="mt-1 text-xs text-gray-500">Your real name (optional)</p>
</div>
<div>
<label for="bio" class="block text-sm font-medium text-gray-700 mb-1">
Bio
</label>
<label for="bio" class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
<textarea id="bio"
name="bio"
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>
<p class="mt-1 text-xs text-gray-500">Maximum 500 characters</p>
</div>
<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">
Save changes
</button>
<div id="edit-messages"></div>
</form>
</div>