|
{% 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 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 %} |
|
|
