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

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 15cf32e666da
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mod_invites_register_web/html/register.html	Fri Sep 11 13:51:54 2020 +0100
@@ -0,0 +1,89 @@
+<!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">
+</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">
+				Register on {site_name}<br/>
+			</h1>
+			<div class="card-body" >
+				<p>{site_name} is part of XMPP, a secure and decentralized messaging network. To begin
+				chatting {app&using {app.name} }you need to first register an account.</p>
+
+				<p>Creating an account will allow to communicate with {inviter&{inviter} and }other
+				people on {site_name} and other services on the XMPP network.</p>
+
+				{app&{app.supports_preauth_uri&
+				<div class="alert alert-info">
+					<p>If you already have {app.name} installed,
+					we recommend that you continue the account creation process using the app
+					by clicking on the button below:</p>
+
+					<h6 class="text-center">{app.name} already installed?</h6>
+
+					<div class="text-center">
+						<a href="{uri}"><button class="btn btn-secondary btn-sm">Open the app</button></a><br/>
+						<small class="text-muted">This button works only if you have the app installed already!</small>
+					</div>
+					<br/>
+				</div>
+				}}
+
+				<h5 class="card-title">Create an account</h5>
+
+				{message&<div class="alert {msg_class?alert-info}" role="alert">
+				  {message}
+				</div>}
+
+				<form method="post">
+					<div class="form-group form-row">
+						<label for="user" class="col-md-4 col-lg-12 col-form-label">Username:</label>
+						<div class="col-md-8 col-lg-12">
+							<div class="input-group">
+								<input
+								       type="text" name="user" class="form-control" aria-describedby="usernameHelp"
+								       required autofocus minlength="1" maxlength="30" length="30"
+								>
+								<div class="input-group-append">
+									<span class="input-group-text">@{domain}</span>
+								</div>
+							</div>
+							<small id="usernameHelp" class="d-block form-text text-muted">Choose a username, this will become the first part of your new chat address.</small>
+						</div>
+					</div>
+					<div class="form-group form-row">
+						<label for="password" class="col-md-4 col-lg-12 col-form-label">Password:</label>
+						<div class="col-md-8 col-lg-12">
+							<input type="password" name="password" class="form-control" aria-describedby="passwordHelp"
+							       autocomplete="new-password"
+							>
+							<small id="passwordHelp" class="form-text text-muted">Enter a secure password that you do not use anywhere else.</small>
+						</div>
+					</div>
+					<div class="form-group form-row">
+						<input type="hidden" name="token" value="{token}">
+						{app&<input type="hidden" name="app_id" value="{app.id}">}
+						<button type="submit" class="btn btn-primary btn-lg">Submit</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+	<script src="/share/jquery/jquery.min.js"></script>
+	<script src="/share/bootstrap4/js/bootstrap.min.js"></script>
+</body>
+</html>