view mod_invites_register_web/html/register.html @ 5271:3a1df3adad0c

mod_http_oauth2: Allow user to decide which requested scopes to grant These should at the very least be shown to the user, so they can decide whether to grant them. Considered whether to filter the requested scopes down to actually understood scopes that would be granted, but decided that this was a bit complex for a first step, since role role selection and other kinds of scopes are mixed into the same field here.
author Kim Alvefur <zash@zash.se>
date Thu, 23 Mar 2023 16:28:08 +0100
parents 15cf32e666da
children
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>