fix + test api with resl client
This commit is contained in:
@@ -1,54 +1,86 @@
|
||||
{% extends 'layouts/box.html' %} {% block content %} {% if onboarding %}
|
||||
<h1 class="mb-4">Complete your Profile</h1>
|
||||
{% else %}
|
||||
<h1 class="mb-4">Edit your Profile</h1>
|
||||
{% endif %}
|
||||
{% extends 'layouts/box.html' %} {% block content %}
|
||||
|
||||
<div class="text-center d-flex flex-column align-items-center">
|
||||
<img
|
||||
id="avatar"
|
||||
class="w-36 h-36 rounded-circle object-fit-cover my-4"
|
||||
src="{{ user.profile.avatar }} "
|
||||
height="144"
|
||||
/>
|
||||
<div class="text-center" style="max-width: 24rem">
|
||||
<h1 id="displayname">{{ user.profile.displayname|default:"" }}</h1>
|
||||
<div class="text-muted mb-2 mt-n3">@{{ user.username }}</div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card" style="border-width: 0px">
|
||||
<div class="card-body">
|
||||
{% if onboarding %}
|
||||
<h1 class="card-title mb-4">Complete your Profile</h1>
|
||||
{% else %}
|
||||
<h1 class="card-title mb-4">Edit your Profile</h1>
|
||||
{% endif %}
|
||||
|
||||
<div class="text-center mb-4">
|
||||
<img
|
||||
id="avatar"
|
||||
class="rounded-circle object-cover border"
|
||||
src="{{ user.profile.avatar }}"
|
||||
alt="Avatar"
|
||||
style="width: 150px; height: 150px"
|
||||
/>
|
||||
<div class="mt-2">
|
||||
<h2 id="displayname" class="fw-bold">
|
||||
{{ user.profile.displayname|default:"" }}
|
||||
</h2>
|
||||
<div class="text-muted">@{{ user.username }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{% csrf_token %} {% for field in form %}
|
||||
<div class="mb-3">
|
||||
<label for="{{ field.id_for_label }}" class="form-label"
|
||||
>{{ field.label_tag }}</label
|
||||
>
|
||||
{{ field }} {% if field.errors %}
|
||||
<div class="invalid-feedback">
|
||||
{% for error in field.errors %} {{ error }} {% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
{% if onboarding %}
|
||||
<a class="btn btn-secondary" href="{% url 'home' %}">Skip</a>
|
||||
{% else %}
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
href="{{ request.META.HTTP_REFERER }}"
|
||||
>Cancel</a
|
||||
>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{% csrf_token %} {{ form.as_p }}
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
{% if onboarding %}
|
||||
<a class="btn btn-secondary ms-2" href="{% url 'home' %}">Skip</a>
|
||||
{% else %}
|
||||
<a class="btn btn-secondary ms-2" href="{{ request.META.HTTP_REFERER }}"
|
||||
>Cancel</a
|
||||
>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// This updates the avatar
|
||||
// Update avatar preview
|
||||
const fileInput = document.querySelector('input[type="file"]');
|
||||
const avatarImage = document.getElementById("avatar");
|
||||
|
||||
fileInput.addEventListener("change", (event) => {
|
||||
const file = event.target.files[0];
|
||||
const image = document.querySelector("#avatar");
|
||||
|
||||
if (file && file.type.includes("image")) {
|
||||
const url = URL.createObjectURL(file);
|
||||
image.src = url;
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
avatarImage.src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// This updates the name
|
||||
const display_nameInput = document.getElementById("id_displayname");
|
||||
const display_nameOutput = document.getElementById("displayname");
|
||||
// Update display name preview
|
||||
const displayNameInput = document.getElementById("id_displayname");
|
||||
const displayNameOutput = document.getElementById("displayname");
|
||||
|
||||
display_nameInput.addEventListener("input", (event) => {
|
||||
display_nameOutput.innerText = event.target.value;
|
||||
displayNameInput.addEventListener("input", (event) => {
|
||||
displayNameOutput.textContent = event.target.value || "{{ user.username }}"; // Fallback to username if empty
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user