Pages de connexion et d'inscription

Dodock propose une interface de connexion repensée, cohérente et moderne, qui s'applique à toutes les étapes d'authentification : connexion par identifiant, connexion par lien e-mail, inscription d'un nouveau compte, réinitialisation et mise à jour du mot de passe.

Page de connexion

Lorsqu'un utilisateur accède à l'adresse de votre instance Dokos, il arrive sur la page de connexion. Celle-ci affiche le logo de l'application en en-tête, suivi d'un formulaire en deux étapes.

Étape 1 — Saisie de l'adresse e-mail

L'utilisateur saisit son adresse e-mail puis clique sur Continuer. La validation de format est effectuée directement dans le champ : un message d'erreur apparaît sous le champ concerné si l'adresse est incorrecte, sans bloquer l'ensemble du formulaire.

Étape 2 — Saisie du mot de passe

Après validation de l'e-mail, le champ mot de passe s'affiche. Un bouton permet d'afficher ou de masquer le mot de passe saisi. En cas d'identifiants incorrects, une bannière d'erreur s'affiche en haut du formulaire.

Connexion via un lien e-mail

Si l'administrateur a activé cette option, un bouton Se connecter avec un lien e-mail est proposé. L'utilisateur reçoit alors un lien à usage unique dans sa boîte mail pour s'authentifier sans mot de passe.

Connexion via un service tiers (OAuth)

Si des fournisseurs d'identité OAuth (Google, GitHub, etc.) sont configurés, leurs boutons apparaissent sur la même page de connexion.

      
flowchart TD
    A([L'utilisateur ouvre la page de connexion]) --> B[Saisie de l'adresse e-mail]
    B --> C{Format valide ?}
    C -- Non --> D[Message d'erreur sous le champ]
    D --> B
    C -- Oui --> E[Saisie du mot de passe]
    E --> F{Identifiants corrects ?}
    F -- Non --> G[Bannière d'erreur en haut du formulaire]
    G --> E
    F -- Oui --> H([Redirection vers l'espace de travail])

    

Mot de passe oublié

Depuis la page de connexion, un lien Mot de passe oublié ? permet d'accéder au formulaire de réinitialisation. L'utilisateur saisit son adresse e-mail : si elle correspond à un compte existant, un e-mail contenant un lien de réinitialisation lui est envoyé.

La validation du format de l'adresse e-mail est effectuée avant l'envoi. Si l'adresse n'est pas reconnue, un message d'information s'affiche sans révéler si le compte existe ou non (protection contre l'énumération de comptes).

      
flowchart TD
    A([Clic sur « Mot de passe oublié ? »]) --> B[Saisie de l'adresse e-mail]
    B --> C{Format valide ?}
    C -- Non --> D[Message d'erreur sous le champ]
    D --> B
    C -- Oui --> E[Envoi du lien de réinitialisation]
    E --> F([Message de confirmation affiché])

    

Page de mise à jour du mot de passe

Lorsqu'un utilisateur suit le lien de réinitialisation reçu par e-mail, ou lorsque son mot de passe a expiré, il accède à la page de mise à jour du mot de passe. Cette page partage le même design que la page de connexion.

Elle comprend :

• Un champ Nouveau mot de passe avec indicateur visuel de force (barre de progression colorée)
• Un champ Confirmer le mot de passe
• Un bouton pour afficher ou masquer chaque champ
• Un bouton Mettre à jour qui s'active uniquement lorsque les deux champs sont remplis et cohérents

Si le lien a expiré, un message spécifique est affiché pour inviter l'utilisateur à demander un nouveau lien.

      
flowchart TD
    A([Ouverture du lien de réinitialisation]) --> B{Lien valide ?}
    B -- Non --> C([Message : lien expiré, demander un nouveau lien])
    B -- Oui --> D[Saisie du nouveau mot de passe]
    D --> E[Confirmation du mot de passe]
    E --> F{Mots de passe identiques et suffisamment forts ?}
    F -- Non --> G[Message d'erreur sous le champ]
    G --> D
    F -- Oui --> H[Clic sur Mettre à jour]
    H --> I([Redirection vers la page de connexion])

    

Page d'inscription

Si l'administrateur a activé l'inscription publique, un lien Créer un compte est visible depuis la page de connexion. L'utilisateur est redirigé vers un formulaire d'inscription.

Le formulaire demande :

• Le prénom
• Le nom
• L'adresse e-mail
• Le mot de passe

La validation est réalisée en ligne, champ par champ. Le bouton Créer un compte reste désactivé tant que tous les champs ne sont pas correctement remplis. Une fois le compte créé, l'utilisateur reçoit un e-mail de confirmation selon la configuration de l'instance.

Comportement sur mobile

Toutes ces pages s'adaptent automatiquement aux petits écrans. Sur mobile, la page occupe toute la hauteur disponible et le cadre de connexion n'affiche pas de bordure arrondie pour optimiser l'espace.