Noah Petherbridge
f6d076f7c2
* 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.
166 lines
8.2 KiB
HTML
166 lines
8.2 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">
|
|
<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>
|
|
|
|
<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>
|
|
</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}} |