35258beb36
* 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
196 lines
10 KiB
HTML
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}}
|