website/web/templates/photo/share.html
Noah 6c91c67c97 More Private User Avatars
* Users who set their Profile Picture to "friends only" or "private" can have
  their avatar be private all over the website to users who are not their
  friends or not granted access.
* Users who are not your friends see a yellow placeholder avatar, and users
  not granted access to a private Profile Pic sees a purple avatar.
* Admin users see these same placeholder avatars most places too (on search,
  forums, comments, etc.) if the user did not friend or grant the admin. But
  admins ALWAYS see it on their Profile Page directly, for ability to moderate.
* Fix marking Notifications as read: clicking the link in an unread notification
  now will wait on the ajax request to finish before allowing the redirect.
* Update the FAQ
2022-09-08 21:42:20 -07:00

111 lines
4.7 KiB
HTML

{{define "title"}}Share Private Photos{{end}}
{{define "content"}}
<div class="container">
<section class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Share Private Photos
</h1>
</div>
</div>
</section>
<div class="block p-4">
<div class="columns is-centered">
<div class="column is-half">
<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 mr-2"><i class="fa fa-eye"></i></span>
<span>Share Private Photos</span>
</p>
</header>
<div class="card-content">
<!-- Show the introduction or selected user profile -->
{{if not .User}}
<div class="block">
You may use this page to grant access to your
<span class="has-text-private">
<i class="fa fa-eye"></i>
Private Photos
</span>
to another member on this site by entering their
username below.
</div>
{{else}}
<div class="block">
Confirm that you wish to grant <strong>{{.User.Username}}</strong>
access to view your
<span class="has-text-private">
<i class="fa fa-eye"></i>
Private Photos
</span>
by clicking the button below.
</div>
<div class="media block">
<div class="media-left">
{{template "avatar-64x64" .User}}
</div>
<div class="media-content">
<p class="title is-4">{{.User.NameOrUsername}}</p>
<p class="subtitle is-6">
<span class="icon"><i class="fa fa-user"></i></span>
<a href="/u/{{.User.Username}}" target="_blank">{{.User.Username}}</a>
</p>
</div>
</div>
{{end}}
<!-- Show the relevant form -->
<form action="/photo/private/share" method="POST">
{{InputCSRF}}
{{if .User}}
<input type="hidden" name="to" value="{{.User.Username}}">
{{else}}
<div class="field block">
<label for="to" class="label">Share with Username:</label>
<input type="text" class="input"
name="to" id="to"
placeholder="username">
</div>
{{end}}
<div class="field has-text-centered">
<button type="submit" class="button is-success"
name="intent"
value="{{if .User}}submit{{else}}preview{{end}}">
{{if .User}}
<span class="icon"><i class="fa fa-unlock"></i></span>
<span>Confirm Share</span>
{{else}}
Continue
{{end}}
</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}}