XFiesta/templates/profile_settings.html at main · sh4dman23/XFiesta · GitHub

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
{% extends "layout.html" %}

{% block optional_c %}
    <link rel="stylesheet" href="/static/styles/profile_settings.css">
    <script src="/static/scripts/profile_settings.js"></script>
{% endblock %}

{% block title %}
    Profile Settings
{% endblock %}

{% block main %}
    <div class="container-main o-profile" style="display: block;">
        <h1 style="margin-bottom: 5vh;">Profile Settings</h1>
        <form action="/profile_settings" method="post" enctype="multipart/form-data">
            <div class="profile-pic"><img id="preview" style="margin-bottom: 10px;" src="{% if user['pfp_location'] %} /{{ user['pfp_location'] }} {% else %} /static/images/user_profile_pic.png {% endif %}"></div>
            <div class="mb-3">
                <label class="form-label">Change Profile Picture</label>
                <input name="profile_pic" id="image_input" class="form-control profile_pic_upload" type="file" accept="image/png, image/jpeg">
                <div id="warning0" style="color: red;"></div>
            </div>
            <div class="mb-3">
                <label class="form-label">Change Name</label>
                <input autocomplete="off" class="form-control mx-auto w-auto" type="text" required value="{{ user['fullname'] }}" placeholder="Name" minlength="1" maxlength="70" name="name">
            </div>
            <div class="mb-3 centered">
                <label class="form-label">Change About Me</label>
                <textarea id="about_me" name="about_me" class="form-control textbox-area" placeholder="About Me" maxlength="640" rows="7">{% if user['about_me'] %}{{ user['about_me'] }}{% else %}{% endif %}</textarea>
            </div>
            <div class="mb-3">
                <input autocomplete="off" class="form-control mx-auto w-auto" id="interestInput" value="" placeholder="Interests e.g. #interest1 #interest2" type="text" name="interests">
                <div id="warning" style="color: red;"></div>
                <div id="interestList">
                    {% if user_interests %}
                        {% for interest in user_interests %}
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" name="interest" value="{{ interest['interest'] }}" checked>
                                {{ interest['interest'] }}
                            </label>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
            <button class="btn btn-primary btn-prof btn-submit" name="submit_button" value="" type="submit">
                <span class="btn_text">Save Changes</span>
            </button>
        </form>
    </div>

    <script>
        const list = {{ list_of_interests | tojson | safe }};
    </script>
{% endblock %}