Aller au contenu

Vue · Authentification

Connexion / Auth

Disponible

Quick-win universel : Card centrée + Form avec Input e-mail + PasswordInput + Checkbox « se souvenir » + Button + Alert d'erreur + Link (mot de passe oublié, inscription). Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

Connexion : carte centrée (données mock)

Connexion

Accédez à votre espace Sent Tech.

Mot de passe oublié ?

Pas encore de compte ? Créer un compte

Voir le code (Svelte) 
<div class="lg-wrap">
  <Card class="lg-card">
    <div class="lg-head">
      <h2 class="lg-title">Connexion</h2>
      <p class="lg-subtitle">Accédez à votre espace Sent Tech.</p>
    </div>
    <Alert
      tone="error"
      title="Échec de connexion"
      message="Identifiant ou mot de passe incorrect."
    />
    <Form status="idle">
      <Input
        label="Adresse e-mail"
        type="email"
        placeholder="[email protected]"
        value="[email protected]"
      />
      <PasswordInput
        label="Mot de passe"
        placeholder="••••••••"
        showLabel="Afficher"
        hideLabel="Masquer"
      />
      <div class="lg-row">
        <Checkbox label="Se souvenir de moi" />
        <Link href="#">Mot de passe oublié ?</Link>
      </div>
      <Button variant="primary" type="submit" class="lg-submit">Se connecter</Button>
    </Form>
    <p class="lg-foot">
      Pas encore de compte ? 
      <Link href="#">Créer un compte</Link>
    </p>
  </Card>
</div>

Composants DS utilisés