website/web/templates/photo/certification.html
Noah Petherbridge 35258beb36 Helpful copy and image lightbox fix
* On the "Certification Required" error page: show help text under the
  checklist to make it clear that clicking the checklist item will link
  to the profile photo or cert photo upload page.
* Add more helpful text around the site to address common confusion:
  * On the Photo Upload page for profile_pic and the user is already at
    quota: add special text saying they can use an existing gallery
    photo as their profile pic instead.
  * On the self Gallery view page: if the user has no profile pic
    currently set, offer advice and links on how to set one.
* Fix the image max-width on Gallery lightbox modals
2024-03-28 23:02:42 -07:00

196 lines
10 KiB
HTML

{{define "title"}}Certification Photo{{end}}
{{define "content"}}
<div class="container">
<section class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Certification Photo
</h1>
</div>
</div>
</section>
<div class="block p-4">
<div class="level">
<div class="level-item">
<div class="card" style="width: 100%; max-width: 640px">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">
<span class="icon"><i class="fa fa-image-portrait"></i></span>
Certification Photo
</p>
</header>
<div class="card-content">
<div class="block">
<strong>Certification Status:</strong>
{{if eq .CertificationPhoto.Status "needed"}}
<span class="tag is-warning">Awaiting Upload</span>
{{else if eq .CertificationPhoto.Status "pending"}}
<span class="tag is-info">Pending Approval</span>
{{else if eq .CertificationPhoto.Status "approved"}}
<span class="tag is-success">Approved</span>
{{else if eq .CertificationPhoto.Status "rejected"}}
<span class="tag is-danger">Rejected</span>
{{else}}
<span class="tag is-danger">{{.CertificationPhoto.Status}}</span>
{{end}}
</div>
{{if .CertificationPhoto.AdminComment}}
<div class="notification is-warning content">
<p>
Your certification photo has been rejected. Please review the admin comment
below and try taking and uploading a new certification photo.
</p>
<p>
<strong>Admin comment:</strong>
</p>
<p>
{{.CertificationPhoto.AdminComment}}
</p>
</div>
{{end}}
{{if .CertificationPhoto.Filename}}
<div class="image block">
<img src="{{PhotoURL .CertificationPhoto.Filename}}">
</div>
<div class="block">
<form action="/photo/certification" method="POST">
{{InputCSRF}}
<input type="hidden" name="delete" value="true">
<div class="field">
<label class="label has-text-danger">Delete Photo</label>
<p class="help block">
If your Certification Photo has been approved (so that your user
account is "Certified"), removing this picture will revert your
account to "Not Certified" status. You would then need to be
re-approved with a new Certification Photo to be recertified.
</p>
<button type="submit" class="button is-danger"
{{if eq .CertificationPhoto.Status "approved"}}
onclick="return window.confirm('Removing this photo will mark your account as Not Certified.\n\nYou will then need to upload a new certification photo for approval to certify your account again.\n\nAre you sure you want to do this?')"
{{end}}>
<span class="icon"><i class="fa fa-trash"></i></span>
<span>Delete This Photo</span>
</button>
</div>
</form>
</div>
<hr class="block">
{{end}}
<div class="block content">
<p>
Uploading a certification photo (or "verification selfie") is required to gain
full access to this website. We want to know that only "real" users are here --
no anonymous lurkers. To get certified, please take a selfie that shows your
face and depicts you holding a sheet of paper with the following information
written on it:
</p>
<ul>
<li>The name of this website: {{PrettyTitle}}</li>
<li>Your username: <strong>{{.CurrentUser.Username}}</strong></li>
<li>Today's date: <strong>{{Now.Format "2006/01/02"}}</strong></li>
</ul>
<p>
Please ensure that your face is visible and your hand is clearly seen
holding the sheet of paper. Your certification photo <strong>will not</strong>
appear on your photo gallery, and nor should you upload it separately
to your gallery page (as it may enable others to photoshop your image
and use it to verify a fake profile on another website).
</p>
</div>
<!-- If the user has no profile picture, ask them to upload that first. -->
{{if not .CurrentUser.ProfilePhotoID}}
<div class="notification is-danger is-light content">
<p>
<i class="fa fa-hand mr-1"></i>
<strong>Hang on a moment!</strong>
</p>
<p>
Before you submit your certification photo, please upload
<a href="/photo/upload?intent=profile_pic" class="has-text-link"><strong>a profile photo</strong></a>
that shows your face. Your certification photo will be compared to the face
picture on your profile page so that we know it's actually the same person.
</p>
<p>
<strong>Note:</strong> you may make your profile picture "Friends-only" or
"Private" if you need; but you should have a clear face picture on your
profile page for the {{PrettyTitle}} admin to compare your certification
picture to!
</p>
</div>
{{else}}
<form method="POST" action="/photo/certification" enctype="multipart/form-data">
{{InputCSRF}}
<div class="has-text-centered block">
<div><strong>Example Picture</strong></div>
<div><small class="has-text-grey">(ink colors not important)</small></div>
<img src="/static/img/certification-example.jpg">
</div>
<div class="field">
<label for="file" class="label">Browse and select your verification photo:</label>
<div class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file"
name="file"
id="file"
accept=".jpg,.jpeg,.jpe,.png"
required>
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name" id="fileName">
Select a file
</span>
</label>
</div>
</div>
<div class="block has-text-centered">
<button type="submit" class="button is-primary">Upload Certification Photo</button>
</div>
</form>
{{end}}
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", (event) => {
let $file = document.querySelector("#file"),
$fileName = document.querySelector("#fileName");
$file.addEventListener("change", function() {
let file = this.files[0];
$fileName.innerHTML = file.name;
});
});
</script>
{{end}}