Template for a invitation-based Matrix registration form https://matrix.spootle.de
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

98 lines
3.7 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta property="og:title" content="Spootle Matrix Registration">
<meta property="og:site_name" content="{Spootle Matrix">
<meta property="og:type" content="website" />
<meta name="og:description" content="Ein Matrix Konto bei Spootle registrieren" />
<meta name="og:image" content="images/icon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="images/icon.png">
<link rel="icon" type="image/png" href="images/icon32x32.png" sizes="32x32">
<link rel="shortcut icon" href="images/favicon.ico">
<meta name="msapplication-TileImage" content="images/tile.png">
<meta name="msapplication-TileColor" content="#fff">
<title>Spootle Matrix Registration</title>
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="blur">
<article class="widget register">
<div class="center">
<header>
<h1>Spootle Matrix Registration</h1>
</header>
<section>
<form id="registration" action="/register" method="post">
<div class="group">
<input id="username" name="username" type="text" placeholder=" " required
pattern="^@?[a-zA-Z_\-=\.\/0-9]+(:spootle.de)?$" required minlength="1"
maxlength="200">
<span class="highlight"></span>
<span class="bar"></span>
<label for="username">Benutzername</label>
</div>
<div class="group">
<input id="password" name="password" type="password" placeholder=" " required minlength="6"
maxlength="128">
<span class="highlight"></span>
<span class="bar"></span>
<label for="password">Passwort</label>
</div>
<div class="group">
<input id="confirm_password" name="confirm" type="password" placeholder=" " required>
<span class="highlight"></span>
<span class="bar"></span>
<label for="confirm_password">Passwort bestätigen</label>
</div>
<div class="group">
<input id="token" name="token" type="text" placeholder=" ">
<span class="highlight"></span>
<span class="bar"></span>
<label for="token">Einladungscode</label>
</div>
<div class="group">
<a href="https://www.spootle.de/datenschutz/">Datenschutz</a> | <a href="https://www.spootle.de/nutzungsbedingungen">Nutzungsbedingungen</a>
</div>
<div class="btn-box">
<input class="btn btn-submit" type="submit" value="Registrieren">
</div>
</form>
</section>
</div>
</article>
<article id="success" class="widget modal hidden">
<div class="center">
<header>
<h2 id="welcome"></h2>
</header>
<section>
<p>Bei Element Web einloggen (Webchat):</p>
<h3><a href="https://element.spootle.de"><img src="images/element-logo.svg" height="50px"></a></h3>
<p>oder eine andere App aussuchen: <a href="https://matrix.org/docs/projects/clients-matrix">https://matrix.org/docs/projects/clients-matrix</a></p>
</section>
</div>
</article>
<article id="error" class="widget modal hidden">
<div class="center">
<header>
<h2>Fehler</h2>
</header>
<section>
<p>Es gab einen Fehler bei der Registrierung</p>
<h3 id="error_message" class="error"></h3>
<p id="error_dialog"></p>
</section>
</div>
</article>
<footer class="info">
<p>Das Hintergrundbild stammt von <a href="https://www.flickr.com/golan" target="_blank">Jesús Roncero</a>,<br>
unter der Lizenz <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA
4.0</a>.
</p>
</footer>
<script src="js/validate.js"></script>
</body>
</html>