Passport/pkg/views/users/personalize.gohtml

<div class="left-part">
    <img class="logo" alt="Logo" src="/favicon.png" width="64" height="64"/>

    <h1 class="title">Personalize</h1>
    <p class="caption">Personalize your account, and make us provide better service for you.</p>
</div>

<div class="right-part">
    <div class="responsive-title-gap"></div>

    <div class="personalize-actions">
        <md-filled-tonal-button class="personalize-action" data-target="avatar">
            Edit Avatar
            <span slot="icon" class="material-symbols-outlined">account_circle</span>
        </md-filled-tonal-button>
        <input
                hidden
                id="avatar-input"
                class="block-field"
                name="avatar"
                type="file"
                accept="image/*"
                placeholder="Avatar"
        >

        <md-filled-tonal-button class="personalize-action" data-target="banner">
           Edit Banner
            <span slot="icon" class="material-symbols-outlined">background_replace</span>
        </md-filled-tonal-button>
        <input
                hidden
                id="banner-input"
                class="block-field"
                name="banner"
                type="file"
                accept="image/*"
                placeholder="Banner"
        >
    </div>

    <form class="action-form" action="/users/me/personalize" method="POST">
        <div class="columns-two">
            <md-outlined-text-field
                    class="block-field"
                    name="name"
                    type="text"
                    autocomplete="username"
                    label="Username"
                    disabled
                    value="{{.userinfo.Name}}"
            >
            </md-outlined-text-field>

            <md-outlined-text-field
                    class="block-field"
                    name="nick"
                    type="text"
                    autocomplete="nickname"
                    label="Nickname"
                    value="{{.userinfo.Nick}}"
            >
            </md-outlined-text-field>
        </div>

        <div class="columns-two">
            <md-outlined-text-field
                    class="block-field"
                    name="first_name"
                    type="text"
                    autocomplete="given_name"
                    label="First Name"
                    value="{{if gt (len .userinfo.Profile.FirstName) 0}}{{.userinfo.Profile.FirstName}}{{end}}"
            >
            </md-outlined-text-field>

            <md-outlined-text-field
                    class="block-field"
                    name="last_name"
                    type="text"
                    autocomplete="family_name"
                    label="Last Name"
                    value="{{if gt (len .userinfo.Profile.LastName) 0}}{{.userinfo.Profile.LastName}}{{end}}"
            >
            </md-outlined-text-field>
        </div>

        <md-outlined-text-field
                class="block-field"
                name="birthday"
                type="date"
                label="Birthday"
                value="{{if ne .birthday nil}}{{.birthday}}{{end}}"
        >
        </md-outlined-text-field>

        <md-outlined-text-field
                class="block-field"
                name="description"
                type="textarea"
                autocomplete="off"
                label="Description"
                value="{{if gt (len .userinfo.Description) 0}}{{.userinfo.Description}}{{end}}"
                style="resize: vertical"
        >
        </md-outlined-text-field>

        <div class="action-form-buttons">
            <md-text-button type="button" href="/users/me">{{.i18n.back}}</md-text-button>
            <md-filled-button type="submit">{{.i18n.apply}}</md-filled-button>
        </div>
    </form>
</div>

<style>
    .input-label {
        font-size: 14px;
        text-align: left;
    }

    .personalize-actions {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        margin-left: -0.2rem;
        margin-right: -0.2rem;
    }

    .personalize-actions .personalize-action {
        width: fit-content;
    }

    .personalize-action .material-symbols-outlined {
        font-size: 20px;
        margin-bottom: 2px;
    }
</style>

<script>
    document.querySelectorAll(".personalize-action").forEach((element) => {
        element.addEventListener("click", (_) => {
            document.getElementById(`${element.getAttribute("data-target")}-input`).click();
        })
    })

    document.getElementById("avatar-input").addEventListener("input", (evt) => {
        if (!evt.target.files) return
        const data = new FormData();
        data.set("avatar", evt.target.files[0])
        fetch("/api/users/me/avatar", {
            method: "PUT",
            body: data,
        }).then(() => {
            location.href = "/users/me"
        })
    })
    document.getElementById("banner-input").addEventListener("input", (evt) => {
        if (!evt.target.files) return
        const data = new FormData();
        data.set("banner", evt.target.files[0])
        fetch("/api/users/me/banner", {
            method: "PUT",
            body: data,
        }).then(() => {
            location.href = "/users/me"
        })
    })
</script>