296 lines
16 KiB
HTML
296 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="author" content="Florine W. Dekker" />
|
|
<meta name="application-name" content="Death Notifier" />
|
|
<meta name="description" content="Get notified when a famous person dies." />
|
|
<meta name="theme-color" content="#0033cc" />
|
|
|
|
<title>Death Notifier | FWDekker</title>
|
|
|
|
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
|
|
<link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css?v=%%VERSION_NUMBER%%" />
|
|
<!--suppress HtmlUnknownTarget -->
|
|
<link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
|
|
<script async src="https://stats.fwdekker.com/count.js"
|
|
data-goatcounter="https://stats.fwdekker.com/count"></script>
|
|
</head>
|
|
<body>
|
|
<noscript>
|
|
<img src="https://stats.fwdekker.com/count?p=/tools/death-notifier/" alt="Counting pixel" />
|
|
|
|
<p>
|
|
This website does not function if JavaScript is disabled.
|
|
Please check the
|
|
<a href="https://www.enable-javascript.com/">instructions on how to enable JavaScript in your web browser</a>.
|
|
</p>
|
|
</noscript>
|
|
<main class="hidden">
|
|
<div id="nav"></div>
|
|
<div id="contents">
|
|
<div id="header"></div>
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
<div class="column">
|
|
<p id="globalMessage" class="formValidationInfo">
|
|
<output class="validationInfo" for="globalMessage"></output>
|
|
</p>
|
|
<p id="sharedValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="sharedValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
<p id="sharedHomeLink" class="hidden">
|
|
<a href="./">Click here to return to the main page</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row hidden" id="loginRow">
|
|
<div class="column">
|
|
<h2>Log in</h2>
|
|
<p>Already have an account? Welcome back!</p>
|
|
<form id="loginForm" novalidate>
|
|
<p id="loginFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="loginFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<label for="loginEmail">Email</label>
|
|
<input id="loginEmail" type="email" name="email" autocomplete="on" />
|
|
<output class="validationInfo" for="loginEmail"></output>
|
|
|
|
<label for="loginPassword">Password</label>
|
|
<div class="inputWithButton">
|
|
<input id="loginPassword" type="password" name="password" />
|
|
<button type="button" class="passwordToggle" data-toggles="loginPassword">Show</button>
|
|
</div>
|
|
<output class="validationInfo" for="loginPassword"></output>
|
|
|
|
<button id="loginButton">Log in</button>
|
|
<a id="forgotPasswordGoTo" class="linkButton" href="#">Forgot password?</a>
|
|
</form>
|
|
</div>
|
|
<div class="column">
|
|
<h2>Register</h2>
|
|
<p>
|
|
New user?
|
|
Create an account!
|
|
You can always delete your account and associated data.
|
|
Check the <a href="https://fwdekker.com/privacy/">privacy policy</a> for more information.
|
|
</p>
|
|
<form id="registerForm" novalidate>
|
|
<p id="registerFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="registerFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<label for="registerEmail">Email</label>
|
|
<input id="registerEmail" type="email" name="email" autocomplete="on" />
|
|
<output class="validationInfo" for="registerEmail"></output>
|
|
|
|
<label for="registerPassword">Password</label>
|
|
<div class="inputWithButton">
|
|
<input id="registerPassword" type="password" name="password" />
|
|
<button type="button" class="passwordToggle" data-toggles="registerPassword">Show</button>
|
|
</div>
|
|
<!-- TODO: Receive requirements from server(?) (combine this with client-side validation) -->
|
|
<span class="inputHint" data-for="registerPassword">Use at least 8 characters.</span>
|
|
<output class="validationInfo" for="registerPassword"></output>
|
|
|
|
<button id="registerButton">Create account</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row hidden" id="sendForgotPasswordRow">
|
|
<div class="column column-50">
|
|
<h2>Forgot password</h2>
|
|
<p>Send an email to help reset your password.</p>
|
|
<form id="sendPasswordResetForm" novalidate>
|
|
<p id="sendPasswordResetFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="sendPasswordResetFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<label for="sendPasswordResetEmail">Email</label>
|
|
<input id="sendPasswordResetEmail" type="email" name="email" autocomplete="on" />
|
|
<output class="validationInfo" for="sendPasswordResetEmail"></output>
|
|
|
|
<button id="sendPasswordResetButton">Send email</button>
|
|
<a id="forgotPasswordGoBack" class="linkButton" href="#">Return to log in form</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row hidden" id="resetPasswordRow">
|
|
<div class="column column-50">
|
|
<h2>Reset password</h2>
|
|
<p>Set a new password for your account.</p>
|
|
<form id="resetPasswordForm" novalidate>
|
|
<p id="resetPasswordFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="resetPasswordFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<input id="resetPasswordToken" type="hidden" name="token" />
|
|
|
|
<label for="resetPasswordEmail">Email</label>
|
|
<input id="resetPasswordEmail" type="email" name="email" disabled />
|
|
<output class="validationInfo" for="resetPasswordEmail"></output>
|
|
|
|
<label for="resetPasswordPassword">Password</label>
|
|
<div class="inputWithButton">
|
|
<input id="resetPasswordPassword" type="password" name="password" />
|
|
<button type="button" class="passwordToggle" data-toggles="resetPasswordPassword">
|
|
Show
|
|
</button>
|
|
</div>
|
|
<span class="inputHint" data-for="resetPasswordPassword">Use at least 8 characters.</span>
|
|
<output class="validationInfo" for="resetPasswordPassword"></output>
|
|
|
|
<button id="resetPasswordButton">Set password</button>
|
|
<a id="resetPasswordGoBack" class="linkButton" href="./">Return to log in form</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row hidden" id="trackingRow">
|
|
<div class="column">
|
|
<h2>Has this person died?</h2>
|
|
<table id="trackings">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="3">
|
|
<form id="addTrackingForm" novalidate>
|
|
<p id="addTrackingFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="addTrackingFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<div class="inputWithButton">
|
|
<!--suppress HtmlFormInputWithoutLabel Purpose is clear from table headers -->
|
|
<input id="addTrackingPersonName" type="text" name="person_name"
|
|
autocomplete="on" />
|
|
<button id="addTrackingButton">Add</button>
|
|
</div>
|
|
<output class="validationInfo" for="addTrackingPersonName"></output>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row hidden" id="accountRow">
|
|
<div class="column">
|
|
<h2>Manage account</h2>
|
|
<form id="logoutForm" novalidate>
|
|
<p id="logoutFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="logoutFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
<button id="logoutButton">Log out</button>
|
|
</form>
|
|
<form id="deleteForm" novalidate>
|
|
<p id="deleteFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="deleteFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
<input id="deleteEmail" type="hidden" name="email" />
|
|
<button id="deleteButton">Delete account</button>
|
|
</form>
|
|
</div>
|
|
<div class="column">
|
|
<h3>Change email</h3>
|
|
<!-- TODO: Single form, differentiate between `submitter`(?) -->
|
|
<form class="inlineForm" novalidate>
|
|
<label>Current email:</label>
|
|
<span id="emailCurrent">...</span>
|
|
</form>
|
|
<form id="resendEmailVerificationForm" class="inlineForm" novalidate>
|
|
<p id="resendEmailVerificationFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="resendEmailVerificationFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<label>Verified:</label>
|
|
<span id="emailVerified">...</span>
|
|
<button id="resendEmailVerificationButton" class="hidden">resend</button>
|
|
</form>
|
|
<form id="toggleNotificationsForm" class="inlineForm" novalidate>
|
|
<p id="toggleNotificationsFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="toggleNotificationsFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<label>Notifications:</label>
|
|
<span id="notificationsEnabled">...</span>
|
|
<button id="toggleNotificationsButton" class="hidden">...</button>
|
|
</form>
|
|
<br />
|
|
<form id="updateEmailForm" novalidate>
|
|
<p id="updateEmailFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="updateEmailFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<label for="updateEmailEmail">New email</label>
|
|
<input id="updateEmailEmail" type="email" name="email" autocomplete="on" />
|
|
<output class="validationInfo" for="updateEmailEmail"></output>
|
|
|
|
<button id="updateEmailButton">Change email</button>
|
|
</form>
|
|
</div>
|
|
<div class="column">
|
|
<h3>Change password</h3>
|
|
<form><b>Last changed:</b> <span id="passwordLastChanged">...</span></form>
|
|
<form id="updatePasswordForm" novalidate>
|
|
<p id="updatePasswordFormValidationInfo" class="formValidationInfo">
|
|
<output class="validationInfo" for="updatePasswordFormValidationInfo"></output>
|
|
<button type="button" class="closeButton">×</button>
|
|
</p>
|
|
|
|
<label for="updatePasswordPasswordOld">Old password</label>
|
|
<div class="inputWithButton">
|
|
<input id="updatePasswordPasswordOld" type="password" name="password_old" />
|
|
<button type="button" class="passwordToggle" data-toggles="updatePasswordPasswordOld">
|
|
Show
|
|
</button>
|
|
</div>
|
|
<output class="validationInfo" for="updatePasswordPasswordOld"></output>
|
|
|
|
<label for="updatePasswordPasswordNew">New password</label>
|
|
<div class="inputWithButton">
|
|
<input id="updatePasswordPasswordNew" type="password" name="password_new" />
|
|
<button type="button" class="passwordToggle" data-toggles="updatePasswordPasswordNew">
|
|
Show
|
|
</button>
|
|
</div>
|
|
<span class="inputHint" data-for="updatePasswordPasswordNew">Use at least 8 characters.</span>
|
|
<output class="validationInfo" for="updatePasswordPasswordNew"></output>
|
|
|
|
<button id="updatePasswordButton">Change password</button>
|
|
</form>
|
|
<!-- TODO: Add forgot password button after logging in -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div id="footer"></div>
|
|
</main>
|
|
|
|
<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
|
|
<!--suppress HtmlUnknownTarget -->
|
|
<script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
|
|
</body>
|
|
</html>
|