File

mod_invites_register_web/html/register.html @ 5243:d5dc8edb2695

mod_http_oauth2: Use more compact IDs UUIDs are nice but so verbose! The reduction in entropy for the nonce should be fine since the timestamp is also counts towards this, and it changes every second (modulo clock shenanigans), so the chances of someone managing to get the same client_secret by registering with the same information at the same time as another entity should be negligible.
author Kim Alvefur <zash@zash.se>
date Sat, 11 Mar 2023 22:46:27 +0100
parent 4833:15cf32e666da
line wrap: on
line source

<!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" required minlength="{password_policy.length}"
							>
							<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>