File size: 3,255 Bytes
f710fc8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
{% extends "layout.html" %}
{% block content %}
<h1 class="title">Account</h1>
<form class="account-form" action="{{ url_for('account') }}" method="post" enctype="multipart/form-data">
<div class="form-column">
<label for="username"><i class="fa-solid fa-at form-button"></i> Username:</label>
<input class="account-input" type="text" id="username" name="username" value="{{ current_user.username }}" required>
<label for="email"><i class="fa-solid fa-envelope form-button"></i> Email:</label>
<input class="account-input" type="email" id="email" name="email" value="{{ current_user.email }}" required>
<label for="first_name"><i class="fa-solid fa-signature form-button"></i> First Name:</label>
<input class="account-input" type="text" id="first_name" name="first_name" value="{{ current_user.first_name }}">
<label for="last_name"><i class="fa-solid fa-signature form-button"></i> Last Name:</label>
<input class="account-input" type="text" id="last_name" name="last_name" value="{{ current_user.last_name }}">
<label for="new_password"><i class="fa-solid fa-lock form-button"> </i>New Password:</label>
<input class="account-input" type="password" id="new_password" name="new_password">
</div>
<div class="form-column">
<label for="profile_picture"><i class="fa-solid fa-camera form-button"></i> Profile Picture:</label>
<div class="profile-pics">
{% if current_user.profile_pic %}
<img id="profilePicture" class="account-img" src="{{ url_for('static', filename='users/uploaded_images/' + current_user.profile_pic) }}" alt="Profile Picture">
{% else %}
<img id="profilePicture" class="account-img" src="{{ url_for('static', filename='users/uploaded_images/default.jpg') }}" alt="Profile Picture">
{% endif %}
<input class="account-buttons" type="file" id="profile_picture" name="profile_picture" onchange="previewProfilePicture(event)">
</div>
<label for="bio"><i class="fa-solid fa-circle-info form-button"></i> Bio:</label>
<textarea class="account-input account-textarea" id="bio" name="bio">{{ current_user.bio }}</textarea>
<label for="location"><i class="fa-solid fa-location-dot form-button"></i> Location:</label>
<input class="account-input" type="text" id="location" name="location" value="{{ current_user.location }}">
<label for="profession"><i class="fa-solid fa-user-tie form-button"></i> Profession:</label>
<input class="account-input" type="text" id="profession" name="profession" value="{{ current_user.profession }}">
<input class="account-submit" type="submit" value="Update Profile">
</div>
</form>
<script>
// Function to update the profile picture preview
function previewProfilePicture(event) {
const fileInput = event.target;
const profilePicture = document.getElementById('profilePicture');
if (fileInput.files && fileInput.files[0]) {
const reader = new FileReader();
reader.onload = function (e) {
profilePicture.src = e.target.result;
};
reader.readAsDataURL(fileInput.files[0]);
}
}
</script>
{% endblock %}
|