Mercurial > prosody-modules

diff mod_invites_register_web/html/register_success_setup.html @ 4093:a2116f5a7c8f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
mod_invites_register_web: New module to allow web registration with an invite token
author Matthew Wild <mwild1@gmail.com>
date Fri, 11 Sep 2020 13:51:54 +0100
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mod_invites_register_web/html/register_success_setup.html	Fri Sep 11 13:51:54 2020 +0100
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{site_name}</title>
+	<link rel="stylesheet" href="/share/bootstrap4/css/bootstrap.min.css">
+	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+	<meta name="msapplication-TileColor" content="#fbd308">
+	<meta name="theme-color" content="#fbd308">
+
+	<script>
+		function toggle_password(e) {
+			var button = e.target;
+			var input = button.parentNode.parentNode.querySelector("input");
+			switch(input.attributes.type.value) {
+			case "password":
+				input.attributes.type.value = "text";
+				button.innerText = "Hide";
+				break;
+			case "text":
+				input.attributes.type.value = "password";
+				button.innerText = "Show";
+				break;
+			}
+		  }
+	</script>
+</head>
+<body>
+	<div id="background" class="fixed-top overflow-hidden" aria-role="none presentation"></div>
+	<div id="form" class="container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 mt-2 mt-md-5">
+		<div class="card rounded-lg shadow">
+			<h1 class="card-header rounded-lg rounded-lg">
+				{site_name}<br/>
+			</h1>
+			<div class="card-body">
+				<h5 class="card-title">Congratulations!</h5>
+
+				<p>You have created an account on {site_name}!</p>
+
+				<p>You can now set up {app.name} and connect it to your new account.</p>
+
+				<h5>Step 1: Download and install {app.name}</h5>
+
+				<p>{app.download.text?Download and install {app.name} below:}</p>
+
+				<div class="ml-5 mb-3">
+					{app.download.buttons#
+						{item.image&
+							<a href="{item.url}" {item.target&target="{item.target}"} rel="noopener">
+								<img src="{item.image}" {item.alttext&alt="{item.alttext}"}>
+							</a>
+						}
+						{item.text&
+							<a href="{item.url}" {item.target&target="{item.target}"} rel="noopener">
+								<button class="btn btn-primary">
+									{item.text}
+								</button>
+							</a>
+						}
+					}
+				</div>
+
+				<h5>Step 2: Connect {app.name} to your new account</h5>
+
+				<p>{app.setup.text?Launch {app.name} and sign in using your account credentials.}</p>
+
+				<p>As a final reminder, your account details are shown below:</p>
+
+				<form class="account-details col-12 col-lg-6 mx-auto">
+					<div class="form-group form-row">
+						<label for="user" class="col-md-4 col-lg-12 col-form-label font-weight-bold">Chat address (JID):</label>
+						<div class="col-md-8 col-lg-12">
+							<input type="text" class="form-control-plaintext" readonly value="{username}@{domain}">
+						</div>
+					</div>
+					{password&
+					<div class="form-group form-row">
+						<label for="password" class="col-md-4 col-lg-12 col-form-label font-weight-bold">Password:</label>
+						<div class="col-md-8 col-lg-12">
+							<div class="input-group">
+								<input type="password" readonly class="form-control" value="{password}">
+								<div class="input-group-append">
+									<button class="btn btn-outline-secondary" type="button" onclick="toggle_password(event)">Show</button>
+								</div>
+							</div>
+						</div>
+					</div>
+					}
+				</form>
+
+				<p>Your password is stored encrypted at {site_name} and will not be accessible after you close
+				this page. Keep it safe and never share it with anyone.</p>
+			</div>
+		</div>
+	</div>
+	<script src="/share/jquery/jquery.min.js"></script>
+	<script src="/share/bootstrap4/js/bootstrap.min.js"></script>
+</body>
+</html>