snikket-server/snikket-modules/mod_invites_register/html/register.html

88 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{site_name} | Snikket</title>
<link rel="stylesheet" href="/share/bootstrap4/css/bootstrap.min.css">
<link rel="stylesheet" href="/snikket.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">
Secure communication on {site_name}<br/>
</h1>
<div id="powered-by">Powered by <img src="/snikket-logo.svg"></div>
<div class="card-body" >
<p>{site_name} is using Snikket - a secure, privacy-friendly chat app.</p>
<h5 class="card-title">Create an account</h5>
<p>Creating an account will allow to communicate with other people using
the Snikket app or compatible software. If you already have the app installed,
we recommend that you continue the account creation process inside the app
by clicking on the button below:</p>
<h6 class="text-center">App 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/>
<h5 class="card-title">Create an account online</h5>
<p>If you plan to use a legacy XMPP client, you can register an account online and enter your
credentials into any XMPP-compatible software.</p>
{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}">
<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>