|
1 | 1 | {% extends "base.html" %}
|
| 2 | +{% from 'components/silhouette.html' import render_silhouette %} |
| 3 | + |
| 4 | +{% block title %}Profile{% endblock %} |
2 | 5 |
|
3 | 6 | {% block content %}
|
4 |
| -<p>Welcome, {{ user.name }}!</p> |
| 7 | +<div class="container mt-5"> |
| 8 | + <h1 class="mb-4">User Profile</h1> |
| 9 | + |
| 10 | + <!-- Basic Information --> |
| 11 | + <div class="card mb-4" id="basic-info"> |
| 12 | + <div class="card-header"> |
| 13 | + Basic Information |
| 14 | + </div> |
| 15 | + <div class="card-body"> |
| 16 | + <p><strong>Name:</strong> {{ user.name }}</p> |
| 17 | + <p><strong>Email:</strong> {{ user.email }}</p> |
| 18 | + <!-- Display user avatar or silhouette if no avatar is available --> |
| 19 | + <div class="mb-3"> |
| 20 | + {% if user.avatar_url %} |
| 21 | + <img src="{{ user.avatar_url }}" alt="User Avatar" class="img-thumbnail" width="150"> |
| 22 | + {% else %} |
| 23 | + {{ render_silhouette(width=150, height=150) }} |
| 24 | + {% endif %} |
| 25 | + </div> |
| 26 | + <!-- Edit button placed below the image --> |
| 27 | + <button class="btn btn-primary mt-3" onclick="toggleEditProfile()">Edit</button> |
| 28 | + </div> |
| 29 | + </div> |
| 30 | + |
| 31 | + <!-- Edit Profile --> |
| 32 | + <div class="card mb-4" id="edit-profile" style="display: none;"> |
| 33 | + <div class="card-header"> |
| 34 | + Edit Profile |
| 35 | + </div> |
| 36 | + <div class="card-body"> |
| 37 | + <form action="{{ url_for('edit_profile') }}" method="post"> |
| 38 | + <div class="mb-3"> |
| 39 | + <label for="name" class="form-label">Name</label> |
| 40 | + <input type="text" class="form-control" id="name" name="name" value="{{ user.name }}"> |
| 41 | + </div> |
| 42 | + <div class="mb-3"> |
| 43 | + <label for="email" class="form-label">Email</label> |
| 44 | + <input type="email" class="form-control" id="email" name="email" value="{{ user.email }}"> |
| 45 | + </div> |
| 46 | + <div class="mb-3"> |
| 47 | + <label for="avatar_url" class="form-label">Avatar URL</label> |
| 48 | + <input type="url" class="form-control" id="avatar_url" name="avatar_url" value="{{ user.avatar_url }}"> |
| 49 | + </div> |
| 50 | + <button type="submit" class="btn btn-primary">Save Changes</button> |
| 51 | + </form> |
| 52 | + </div> |
| 53 | + </div> |
| 54 | + |
| 55 | + <!-- Change Password --> |
| 56 | + <div class="card mb-4"> |
| 57 | + <div class="card-header"> |
| 58 | + Change Password |
| 59 | + </div> |
| 60 | + <div class="card-body"> |
| 61 | + <!-- Trigger password reset via email confirmation --> |
| 62 | + <form action="{{ url_for('forgot_password') }}" method="post"> |
| 63 | + <input type="hidden" name="email" value="{{ user.email }}"> |
| 64 | + <p>To change your password, please confirm your email. A password reset link will be sent to your email address.</p> |
| 65 | + <button type="submit" class="btn btn-primary">Send Password Reset Email</button> |
| 66 | + </form> |
| 67 | + </div> |
| 68 | + </div> |
| 69 | + |
| 70 | + <!-- Delete Account --> |
| 71 | + <div class="card mb-4"> |
| 72 | + <div class="card-header"> |
| 73 | + Delete Account |
| 74 | + </div> |
| 75 | + <div class="card-body"> |
| 76 | + <form action="{{ url_for('delete_account') }}" method="post"> |
| 77 | + <p class="text-danger">This action cannot be undone. Please confirm your password to delete your account.</p> |
| 78 | + <div class="mb-3"> |
| 79 | + <label for="confirm_delete_password" class="form-label">Password</label> |
| 80 | + <input type="password" class="form-control" id="confirm_delete_password" name="confirm_delete_password"> |
| 81 | + </div> |
| 82 | + <button type="submit" class="btn btn-danger">Delete Account</button> |
| 83 | + </form> |
| 84 | + </div> |
| 85 | + </div> |
| 86 | +</div> |
| 87 | + |
| 88 | +<script> |
| 89 | + // Function to toggle visibility of Basic Information and Edit Profile sections |
| 90 | + function toggleEditProfile() { |
| 91 | + var basicInfo = document.getElementById('basic-info'); |
| 92 | + var editProfile = document.getElementById('edit-profile'); |
| 93 | + |
| 94 | + if (basicInfo.style.display === 'none') { |
| 95 | + basicInfo.style.display = 'block'; |
| 96 | + editProfile.style.display = 'none'; |
| 97 | + } else { |
| 98 | + basicInfo.style.display = 'none'; |
| 99 | + editProfile.style.display = 'block'; |
| 100 | + } |
| 101 | + } |
| 102 | +</script> |
5 | 103 | {% endblock %}
|
0 commit comments