fix + test api with resl client

This commit is contained in:
2025-02-06 15:10:51 +01:00
parent 2d172a3620
commit 861a0e58e5
20 changed files with 376 additions and 254 deletions

View File

@@ -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>