website/web/templates/account/settings.html
Noah 400a256ec8 Certification Photo Workflow
* Add "Site Gallery" page showing all public+gallery member photos.
* Add "Certification Required" decorator for gallery and other main pages.
* Add the Certification Photo workflow:
  * Users have a checklist on their dashboard to upload a profile pic
    and post a certification selfie (two requirements)
  * Admins notified by email when a new certification pic comes in.
  * Admin can reject (w/ comment) or approve the pic.
  * Users can re-upload or delete their pic at the cost of losing
    certification status if they make any such changes.
  * Users are emailed when their photo is either approved or rejected.
* User Preferences: can now save the explicit pref to your account.
* Explicit photos on user pages and site gallery are hidden if the
  current user hasn't opted-in (user can always see their own explicit
  photos regardless of the setting)
* If a user is viewing a member gallery and explicit pics are hidden, a
  count of the number of explicit pics is shown to inform the user that
  more DO exist, they just don't see them. The site gallery does not do
  this and simply hides explicit photos.
2022-08-13 15:39:31 -07:00

307 lines
16 KiB
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="{{$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">
<div class="card block" id="verification">
<header class="card-header has-background-info">
<p class="card-header-title has-text-light">
<i class="fa fa-camera pr-2"></i>
Verification Photo
</p>
</header>
<div class="card-content">
xxx
</div>
</div>
<!-- Website Preferences -->
<form method="POST" action="/settings">
<input type="hidden" name="intent" value="preferences">
{{InputCSRF}}
<div class="card block" 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.
</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 block" 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>
Account Settings
</p>
</header>
<div class="card-content">
<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">
</div>
<div class="field">
<label class="label">Change Password</label>
<input type="password" class="input mb-2"
name="old_password"
placeholder="Current password">
<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>
</div>
</div>
</div>
</div>
{{end}}