WikiLerni/front/public/themes/default/connexion.html

108 lines
5.8 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Formulaire de connexion à WikiLerni.">
<title>Se connecter à WikiLerni</title>
<script src="/JS/polyfill.app.js" defer></script>
<script src="/JS/connection.app.js" defer></script>
<link rel="shortcut icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/themes/default/CSS/pure-min.css">
<link rel="stylesheet" href="/themes/default/CSS/grids-responsive-min.css">
<link rel="stylesheet" href="/themes/default/CSS/wikilerni.css">
<link rel="canonical" href="https://www.wililerni.com/inscription.html">
</head>
<body>
<header class="pure-g menu">
<div class="pure-u-1 pure-u-lg-1-8 menu-heading">
<a class="pure-menu-heading" href="/">WikiLerni</a>
</div>
<div class="pure-u-1 pure-u-lg-7-8">
<ul class="pure-g">
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/">Accueil</a>
</li>
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/connexion.html" id="accountHeadLink">Mon compte</a>
</li>
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/a-propos.html">À propos</a>
</li>
<li class="pure-menu-item pure-u-1 pure-u-lg-1-4">
<a class="pure-menu-link" href="/contact.html">Contact</a>
</li>
</ul>
</div>
</header>
<section id="main-content">
<header id="main-header">
<h1>WikiLerni</h1>
<p>Cultivons notre jardin !</p>
</header>
<div class="content">
<h2 class="content-head is-center">Connectez-vous à WikiLerni</h2>
<div class="pure-g">
<div class="l-box-lrg pure-u-1">
<noscript>Désolé, mais pour l'instant, l'utilisation de WikiLerni nécessite l'activation du JavaScript. Nous travaillons à changer cela.</noscript>
<div id="message"></div>
<form class="pure-form pure-form-aligned needJS" id="connection" method="POST">
<fieldset>
<p>Pas de compte WikiLerni ? <a href="/inscription.html">créez-le ici</a>.</p>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" name="email" placeholder="Adresse e-mail utilisée pour ce site" required>
<span class="pure-form-message-inline" id="emailMessage"></span>
</div>
<div class="pure-control-group">
<label for="password">Mot de passe</label>
<input id="password" type="password" name="password" placeholder="Votre mot de passe">
<span class="pure-form-message-inline" id="passwordMessage"><i class="information">Oublié ? Alors laissez vide et cochez la case ci-dessous.</i></span>
</div>
<div class="pure-controls">
<label for="getLoginLink" class="pure-checkbox">
<input type="checkbox" id="getLoginLink" name="getLoginLink" value="true" /> Je souhaite recevoir un lien de connexion par e-mail.
</label>
<label for="keepConnected" class="pure-checkbox">
<input type="checkbox" id="keepConnected" name="keepConnected" value="true" /> Je souhaite ne pas avoir à me connecter à chaque fois.
</label>
<button type="submit" class="pure-button pure-button-primary">Valider</button>
</div>
</fieldset>
</form>
<div id="response"></div>
</div>
<div class="l-box-lrg pure-u-1">
<h4>Besoin d'aide ?</h4>
<p>Si vous avez oublié votre mot de passe, il vous suffit de cocher la case <i>"Je souhaite recevoir un lien de connexion par e-mail."</i>. Un lien valide pendant une courte durée vous permettra de vous connecter au site.<br>Si vous ne vous souvenez pas non plus de l'adresse e-mail utilisée sur ce site ou que vous n'y avez plus accès, vous pouvez <a href="/contact.html">nous contacter</a> en fournissant des informations permettant de vous identifier.</p><p>La case <i>"Je souhaite ne pas avoir à me connecter à chaque fois."</i> vous permettra de rester connecté(e) jusqu'à 6 mois, pour peu que vous utilisiez le même navigateur internet.</p>
</div>
</div>
</div>
</section>
<footer class="footer l-box is-center">
<ul class="pure-g">
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/mentions-legales.html">Crédits</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/mentions-legales.html">Mentions légales</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/donnees.html">Données personnelles</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/cgu.html">C.G.U.</a>
</li>
<li class="pure-u-1 pure-u-lg-1-5">
<a href="/cgv.html">C.G.V.</a>
</li>
</ul>
</footer>
</body>
</html>