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}}
|