Connexion à [Nom de service-site]
Se connecter avec FranceConnect
FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.
ou
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.
ou
<main role="main" id="content">
<div class="fr-container fr-container--fluid fr-mb-md-14v">
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
<div class="fr-container fr-background-alt--grey fr-px-md-0 fr-pt-10v fr-pt-md-14v fr-pb-6v fr-pb-md-10v">
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
<div class="fr-col-12 fr-col-md-9 fr-col-lg-8">
<h1 class="fr-h4">Connexion à [Nom de service-site]</h1>
<div class="fr-mb-6v">
<h2 class="fr-h5">Se connecter avec FranceConnect</h2>
<p class="fr-text--sm">FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.</p>
<div class="fr-connect-group">
<button class="fr-connect" id="connect-9340">
<span class="fr-connect__login">S’identifier avec</span>
<span class="fr-connect__brand">FranceConnect</span>
</button>
<p>
<a href="https://franceconnect.gouv.fr/" id="connect-link-9346" target="_blank" rel="noopener" title="Qu’est-ce que FranceConnect ? - nouvelle fenêtre">Qu’est-ce que FranceConnect ?</a>
</p>
</div>
</div>
<p class="fr-hr-or">ou</p>
<div>
<form id="login-9345">
<fieldset class="fr-fieldset" id="login-9345-fieldset" aria-labelledby="login-9345-fieldset-legend login-9345-fieldset-messages">
<legend class="fr-fieldset__legend" id="login-9345-fieldset-legend">
<h2 class="fr-h5">Se connecter avec son compte</h2>
</legend>
<div class="fr-fieldset__element">
<div id="alert-9341" class="fr-mb-2v fr-alert fr-alert--error fr-alert--sm">
<p>Identifiant/mot de passe incorrect</p>
</div>
</div>
<div class="fr-fieldset__element">
<fieldset class="fr-mb-n4v fr-fieldset fr-fieldset--error" id="credentials" role="group" aria-labelledby="credentials-legend credentials-messages">
<legend class="fr-sr-only" id="credentials-legend">
identifiants
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-9347">
<label class="fr-label" for="username-9342">
Identifiant
<span class="fr-hint-text">Format attendu : nom@domaine.fr</span>
</label>
<input class="fr-input" aria-describedby="username-9342-messages" autocomplete="username" aria-required="true" autocapitalize="off" autocorrect="off" name="username" id="username-9342" type="text">
<div class="fr-messages-group" id="username-9342-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-password" id="password-9343">
<label class="fr-label" for="password-9343-input">
Mot de passe
</label>
<div class="fr-input-wrap">
<input class="fr-password__input fr-input" aria-describedby="password-9343-input-messages" autocapitalize="off" autocorrect="off" aria-required="true" name="password" autocomplete="current-password" id="password-9343-input" type="password">
</div>
<div class="fr-messages-group" id="password-9343-input-messages" aria-live="polite">
</div>
<div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
<input aria-label="Afficher le mot de passe" id="password-9343-show" type="checkbox">
<label class="fr--password__checkbox fr-label" for="password-9343-show">
Afficher
</label>
</div>
<p>
<a href="" class="fr-link">Mot de passe oublié ?</a>
</p>
</div>
</div>
<div class="fr-messages-group" id="credentials-messages" aria-live="polite">
</div>
</fieldset>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="remember" id="remember-9344" type="checkbox" aria-describedby="remember-9344-messages">
<label class="fr-label" for="remember-9344">
Se souvenir de moi
</label>
<div class="fr-messages-group" id="remember-9344-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<ul class="fr-btns-group">
<li>
<button class="fr-mt-2v fr-btn" id="button-9348">
Se connecter
</button>
</li>
</ul>
</div>
<div class="fr-messages-group" id="login-9345-fieldset-messages" aria-live="polite">
</div>
</fieldset>
</form>
</div>
<hr>
<h2 class="fr-h5">Vous n’avez pas de compte ?</h2>
<ul class="fr-btns-group">
<li>
<button class="fr-btn fr-btn--secondary" id="button-9349">
Créer un compte
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</main>