website/web/templates/account/settings.html

{{define "title"}}User Settings{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-info is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">User Settings</h1>
            </div>
        </div>
    </section>

    {{ $User := .CurrentUser }}

    <div class="block p-4">
        <div class="columns">

            <div class="column is-hidden-tablet p-4">
                <label class="label">Jump to section:</label>
                <ul class="menu-list">
                    <li><a href="#profile">My Profile</a></li>
                    <li><a href="#verification">Verification Photo</a></li>
                    <li><a href="#prefs">Website Preferences</a></li>
                    <li><a href="#account">Account Settings <small class="has-text-grey ml-2">Email &amp; password</small></a></li>
                </ul>
            </div>

            <div class="column">
                <div class="card" id="profile">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-user pr-2"></i>
                            My Profile
                        </p>
                    </header>

                    <form method="POST" action="/settings">
                        <input type="hidden" name="intent" value="profile">
                        {{InputCSRF}}

                        <div class="card-content">
                            <p class="block">
                                The fields here are shown on your <a href="/u/{{.CurrentUser.Username}}">profile page</a>
                                and are all optional. Fields with a <i class="fa fa-lock"></i> icon are not shown on
                                your page but may drive some data that is (e.g., your current age derived from your birthdate).
                            </p>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="display_name">Display Name</label>
                                    <input type="text" class="input"
                                        id="display_name"
                                        name="display_name"
                                        placeholder="John Doe"
                                        value="{{or $User.Name ""}}">
                                </div>

                                <div class="column field is-half">
                                    <label class="label" for="dob">Birthdate <i class="fa fa-lock"></i></label>
                                    <input type="date" class="input"
                                        id="dob"
                                        name="dob"
                                        value="{{if not $User.Birthdate.IsZero}}{{$User.Birthdate.Format "2006-01-02"}}{{end}}">
                                    <p class="help">
                                        Used to show your age on your profile.
                                    </p>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="gender">Gender</label>
                                    <div class="select is-fullwidth">
                                        <select id="gender" name="gender">
                                            <option value="">No answer</option>
                                            {{range .Enum.Gender}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "gender") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>

                                <div class="column field is-half">
                                    <label class="label" for="pronouns">Pronouns</label>
                                    <input type="text" class="input"
                                        id="pronouns"
                                        name="pronouns"
                                        maxlength="30"
                                        value="{{$User.GetProfileField "pronouns"}}">
                                    <p class="help">e.g. he/him; she/her</p>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="city">City/Location</label>
                                    <input type="text" class="input"
                                        id="city"
                                        name="city"
                                        value="{{$User.GetProfileField "city"}}">
                                </div>


                                <div class="column field is-half">
                                    <label class="label" for="job">Job/Occupation</label>
                                    <input type="text" class="input"
                                        id="job"
                                        name="job"
                                        value="{{$User.GetProfileField "job"}}">
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="marital_status">Marital Status</label>
                                    <div class="select is-fullwidth">
                                        <select id="marital_status" name="marital_status">
                                            <option value="">No answer</option>
                                            {{range .Enum.MaritalStatus}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "marital_status") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>

                                <div class="column field is-half">
                                    <label class="label" for="relationship_type">Relationship Type</label>
                                    <div class="select is-fullwidth">
                                        <select id="relationship_type" name="relationship_type">
                                            <option value="">No answer</option>
                                            {{range .Enum.RelationshipType}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "relationship_type") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column field is-half">
                                    <label class="label" for="orientation">Orientation</label>
                                    <div class="select is-fullwidth">
                                        <select id="orientation" name="orientation">
                                            <option value="">No answer</option>
                                            {{range .Enum.Orientation}}
                                            <option value="{{.}}"{{if eq ($User.GetProfileField "orientation") .}} selected{{end}}>{{.}}</option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="field">
                                <label class="label">Here For</label>
                                <div class="columns is-multiline pb-5">
                                    {{range .Enum.HereFor}}
                                    <div class="column is-one-third pb-0">
                                        <label class="checkbox">
                                            <input type="checkbox"
                                                name="here_for"
                                                value="{{.}}"
                                                {{if $User.ProfileFieldIn "here_for" .}}checked{{end}}>
                                            {{.}}
                                        </label>
                                    </div>
                                    {{end}}
                                </div>
                            </div>

                            <div class="field">
                                <label class="label" for="about_me">About Me</label>
                                <textarea class="textarea" cols="60" rows="4"
                                    id="about_me"
                                    name="about_me"
                                    placeholder="A little blurb about myself">{{$User.GetProfileField "about_me"}}</textarea>
                                <p class="help">
                                    Write a bit about yourself. Markdown formatting is supported here.
                                </p>
                            </div>

                            <div class="field">
                                <label class="label" for="interests">My Interests</label>
                                <textarea class="textarea" cols="60" rows="4"
                                    id="interests"
                                    name="interests"
                                    placeholder="What kinds of things make you curious?">{{$User.GetProfileField "interests"}}</textarea>
                            </div>

                            <div class="field">
                                <label class="label" for="music_movies">Music/Bands/Movies</label>
                                <textarea class="textarea" cols="60" rows="4"
                                    id="music_movies"
                                    name="music_movies"
                                    placeholder="What is your style of music or movie?">{{$User.GetProfileField "music_movies"}}</textarea>
                            </div>

                            <div class="field">
                                <button type="submit" class="button is-primary">
                                    Save Profile Settings
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="column">

                <!-- Website Preferences -->
                <form method="POST" action="/settings">
                    <input type="hidden" name="intent" value="preferences">
                    {{InputCSRF}}

                    <div class="card mb-5" id="prefs">
                        <header class="card-header has-background-success">
                            <p class="card-header-title">
                                <i class="fa fa-square-check pr-2"></i>
                                Website Preferences
                            </p>
                        </header>

                        <div class="card-content">
                            <div class="field">
                                <label class="label">Explicit Content Filter</label>
                                <label class="checkbox">
                                    <input type="checkbox"
                                        name="explicit"
                                        value="true"
                                        {{if .CurrentUser.Explicit}}checked{{end}}>
                                    Show explicit content
                                </label>
                                <p class="help">
                                    Check this box if you are OK seeing explicit content on this site, which may
                                    include erections or sexually charged content. These may appear on the Site
                                    Gallery as well as user profile pages.
                                </p>
                            </div>

                            <div class="field">
                                <button type="submit" class="button is-primary">
                                    Save Website Preferences
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- Account Settings -->
                <form method="POST" action="/settings">
                    <input type="hidden" name="intent" value="settings">
                    {{InputCSRF}}

                    <div class="card mb-5" id="account">
                        <header class="card-header has-background-warning">
                            <p class="card-header-title">
                                <i class="fa fa-gear pr-2"></i>
                                Account Settings
                            </p>
                        </header>

                        <div class="card-content">
                            <div class="field">
                                <label class="label" for="old_password">
                                    Current Password
                                </label>
                                <input type="password" class="input"
                                    name="old_password"
                                    id="old_password"
                                    placeholder="Current password"
                                    required>
                                <p class="help">
                                    Enter your current password before making any changes to your
                                    email address or setting a new password.
                                </p>
                            </div>
                            <div class="field">
                                <label class="label" for="change_email">Change Email</label>
                                <input type="email" class="input"
                                    id="change_email"
                                    name="change_email"
                                    placeholder="name@domain.com"
                                    value="{{.CurrentUser.Email}}">
                            </div>

                            <div class="field">
                                <label class="label">Change Password</label>
                                <input type="password" class="input mb-2"
                                    name="new_password"
                                    placeholder="New password">
                                <input type="password" class="input mb-2"
                                    name="new_password2"
                                    placeholder="Confirm new password">
                            </div>

                            <div class="field">
                                <button type="submit" class="button is-primary">
                                    Save Account Settings
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- Delete Account -->
                <div class="card mb-5" id="account">
                    <header class="card-header has-background-danger">
                        <p class="card-header-title has-text-light">
                            <i class="fa fa-gear pr-2"></i>
                            Delete Account
                        </p>
                    </header>

                    <div class="card-content">
                        <p class="block">
                            If you would like to delete your account, please click
                            on the button below.
                        </p>

                        <p class="block">
                            <a href="/account/delete" class="button is-danger">
                                Delete My Account
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}