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