mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:11:09 -05:00
update
This commit is contained in:
109
templates/accounts/settings.html
Normal file
109
templates/accounts/settings.html
Normal file
@@ -0,0 +1,109 @@
|
||||
{% extends 'base/base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Settings - ThrillWiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container px-4 mx-auto max-w-[800px]">
|
||||
<h1 class="mb-4 text-2xl font-bold">Settings</h1>
|
||||
|
||||
<div class="p-6 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="action" value="update_profile">
|
||||
|
||||
<h2 class="mb-4 text-lg font-semibold">Update Profile</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="display_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Display Name</label>
|
||||
<input type="text" name="display_name" id="display_name" value="{{ user.profile.display_name }}" class="block w-full mt-1 border-gray-300 rounded-md shadow-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="avatar" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Avatar</label>
|
||||
<input type="file" name="avatar" id="avatar" class="block w-full mt-1 text-gray-900 dark:text-gray-300">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded-md">Update Profile</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="p-6 mt-6 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="action" value="change_email">
|
||||
|
||||
<h2 class="mb-4 text-lg font-semibold">Change Email</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="new_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New Email</label>
|
||||
<input type="email" name="new_email" id="new_email" class="block w-full mt-1 border-gray-300 rounded-md shadow-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded-md">Change Email</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="p-6 mt-6 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<form method="POST" x-data="{
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
passwordsMatch() { return this.newPassword === this.confirmPassword },
|
||||
isValidPassword() {
|
||||
return this.newPassword.length >= 8 &&
|
||||
/[A-Z]/.test(this.newPassword) &&
|
||||
/[a-z]/.test(this.newPassword) &&
|
||||
/[0-9]/.test(this.newPassword);
|
||||
}
|
||||
}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="action" value="change_password">
|
||||
|
||||
<h2 class="mb-4 text-lg font-semibold">Change Password</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="old_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Current Password</label>
|
||||
<input type="password" name="old_password" id="old_password" required class="block w-full mt-1 border-gray-300 rounded-md shadow-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="new_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="new_password"
|
||||
id="new_password"
|
||||
x-model="newPassword"
|
||||
required
|
||||
class="block w-full mt-1 border-gray-300 rounded-md shadow-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<div class="mt-1 text-sm text-gray-500 dark:text-gray-400" x-show="newPassword && !isValidPassword()">
|
||||
Password must be at least 8 characters and contain uppercase, lowercase, and numbers
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="confirm_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="confirm_password"
|
||||
id="confirm_password"
|
||||
x-model="confirmPassword"
|
||||
required
|
||||
class="block w-full mt-1 border-gray-300 rounded-md shadow-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<div class="mt-1 text-sm text-red-500" x-show="confirmPassword && !passwordsMatch()">
|
||||
Passwords do not match
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 text-white bg-blue-500 rounded-md disabled:opacity-50"
|
||||
x-bind:disabled="!passwordsMatch() || !isValidPassword()"
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user