Comment créer un formulaire de connexion ou d'inscription (ou les deux) ?

Dans cet article, vous apprendre à créer un formulaire de connexion ou d'inscription (ou les deux).

Vous pouvez voir ci-dessous une démo de ce que j'ai créé :

Avant de passer au code proprement dit, j'aimerais décomposer les éléments que nous allons avoir dans le composant. Cela nous aidera à rendre le code que nous écrivons beaucoup plus clair.

Nous avons 4 petits écrans/boîtes à l'intérieur du composant principal (".container") :

• Le formulaire de connexion
• Le formulaire d'inscription
• La fenêtre de connexion
• La fenêtre d'inscription

En outre, à un moment donné, vous pouvez voir soit :

• Le formulaire de connexion à côté de la fenêtre d'inscription.
• Le formulaire d'inscription à côté de la fenêtre de connexion.

Dans les panneaux superposés, nous avons du texte et un bouton - en cliquant dessus, vous ferez apparaître l'autre combinaison de fenêtre et vice-versa. Regardez le GIF ci-dessus une fois de plus pour voir ce que je veux dire.

L'animation de superposition - expliquée

C'est ici que les choses se compliquent un peu, mais je vais faire de mon mieux pour vous expliquer afin que vous puissiez comprendre la logique qui se cache derrière.

Nous avons les couches suivantes pour le composant de superposition :

Le conteneur de superposition - il affichera la zone visible (plus de détails ci-dessous) à un moment donné. Sa largeur est égale à 50 % de la largeur totale du conteneur principal.

La superposition - cette division a une largeur double (200%), elle occupe donc toute la largeur du conteneur principal. (200% * 50%= 100%. Les 50% proviennent du ".overlay-container" ci-dessus).

Les panneaux de recouvrement - sont les divs qui contiennent le contenu réel (le texte et le bouton) que nous voyons à l'écran. Elles ont toutes deux une position absolue ; ce qui signifie que nous pouvons les positionner où nous voulons dans le composant ".overlay". L'un des panneaux est positionné à gauche et l'autre à droite, tous deux ayant une largeur de 50 % du composant ".overlay".

"Pourquoi avons-nous besoin de 3 couches ?", demanderez-vous... Eh bien, voyons à quoi cela ressemblerait sans la première couche :

Dans l'image ci-dessus, vous pouvez voir que les deux panneaux sont "visibles", ce qui n'est pas ce que nous voulons, et c'est pourquoi nous ajoutons le ".overlay-container" qui agit comme une "zone de mise au point" en nous permettant de masquer le panneau qui déborde, ou qui est hors de ses limites. C'est pourquoi nous avions besoin que le ".overlay" soit deux fois plus grand que le ".overlay-container". En déplaçant le conteneur ".overlay", qui a également une position absolue, nous pouvons masquer ou afficher le panneau que nous voulons.

C'était un peu confus, je l'admets, mais j'espère avoir été plus clair.

L'animation des formulaires - expliquée

Ce n'est pas difficile à comprendre du tout. En gros, nous avons à nouveau deux conteneurs - les conteneurs ".form" - ayant chacun une largeur de 50% et une position - absolue. Nous les déplaçons tous les deux en même temps de la gauche vers la droite, et lorsqu'ils arrivent derrière le conteneur ".overlay" du haut (pendant qu'ils se déplacent), nous modifions rapidement la valeur z-index de sorte que le formulaire Sign Up - d'inscription - (par exemple) se déplace au-dessus du formulaire Sign In - de connexion -, et vice-versa. Magique pour les yeux, mais juste un peu de logique de code derrière !

Le HTML

Maintenant que nous avons décomposé la "fonctionnalité" de base de l'animation, il est temps de voir le code HTML réel. Commençons par le squelette de base :

<div class="container" id="container">
    <div class="form-container sign-up-container">
        <!-- Sign Up form code goes here -->
    </div>
    <div class="form-container sign-in-container">
        <!-- Sign In form code goes here -->
    </div>
    <div class="overlay-container">
        <!-- The overlay code goes here -->
    </div>
</div>

La div principale a une classe ".container" et aussi un id "#container" car nous voulons cibler cet élément dans le JavaScript (nous y reviendrons plus loin).

Le formulaire d'inscription

<div class="form-container sign-up-container">
    <form action="#">
        <h1>Create Account</h1>
        <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
        </div>
        <span>or use your email for registration</span>
        <input type="text" placeholder="Name" />
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <button>Sign Up</button>
    </form>
</div>

Le formulaire de connexion

<div class="form-container sign-in-container">
    <form action="#">
        <h1>Sign in</h1>
        <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
        </div>
        <span>or use your account</span>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <a href="#">Forgot your password?</a>
        <button>Sign In</button>
    </form>
</div>

Nous avons également quelques classes sur chaque div :

• La classe ".form-container" contient le CSS qui est dupliqué pour les classes ".sign-in-container" et ".sign-up-container" ;
• les 2 classes différentes (mentionnées ci-dessus) contiendront le CSS qui est différent.

De cette façon, nous évitons de devoir écrire deux fois le même code CSS et nous utilisons la puissance de la possibilité d'ajouter plusieurs classes.

Vous avez peut-être aussi remarqué que les éléments <i> ont quelques classes. C'est parce que nous utilisons FontAwesome pour les icônes. Pour en savoir plus, consultez leur site Web.

Le conteneur de la superposition

<div class="overlay-container">
    <div class="overlay">
        <div class="overlay-panel overlay-left">
            <h1>Welcome Back!</h1>
            <p>
                To keep connected with us please login with your personal info
            </p>
            <button class="ghost" id="signIn">Sign In</button>
        </div>
        <div class="overlay-panel overlay-right">
            <h1>Hello, Friend!</h1>
            <p>Enter your personal details and start journey with us</p>
            <button class="ghost" id="signUp">Sign Up</button>
        </div>
    </div>
</div>

Comme ci-dessus, nous avons une classe commune ".overlay-panel" et deux classes différentes : ".overlay-left" et ".overlay-right". Nous avons également des identifiants pour les boutons, car nous allons ajouter un événement onClick pour chacun d'eux dans le JavaScript.

Le JavaScript

Habituellement, nous couvrons le CSS avant la partie JS, mais cette fois, il est plus facile de montrer et d'expliquer le code JavaScript d'abord, car il vous aidera à comprendre le CSS que nous aurons plus tard.

const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
    container.classList.add('right-panel-active');
});

signInButton.addEventListener('click', () => {
    container.classList.remove('right-panel-active');
});

Comme expliqué ci-dessus, nous ajoutons les event listeners (écouteurs d'événements) et, lorsque les boutons sont cliqués, nous ajoutons ou supprimons la classe ".right-panel-active" (ce n'est pas le meilleur nom pour la classe, mais c'est le meilleur que j'ai pour le moment) - cette classe sera utilisée pour donner un style différent aux sous-composants, car nous avons deux écrans.

Le CSS

Tout d'abord, nous avons le CSS de base pour les composants de base :

h1 {
    font-weight: bold;
    margin: 0;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

button {
    border-radius: 20px;
    border: 1px solid #ff4b2b;
    background-color: #ff4b2b;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: transparent;
    border-color: #ffffff;
}

form {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #dddddd;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

Quelques points à noter ici :

• Nous stylons directement les éléments (h1, p, a). Habituellement, vous ne feriez pas cela car cela pourrait être mélangé avec d'autres styles, il est donc bon d'ajouter une classe à chacun d'eux. Mais pour cet exemple, cela fonctionne bien car nous n'avons que ces éléments sur la page.
• Nous avons une petite transition sur le bouton ; quand il est cliqué, l'état actif est déclenché donc nous le rendons un peu plus petit. Effet de clic simple et agréable !
• Le formulaire est un conteneur flex car nous voulons tout centrer à l'intérieur et il est facile de le faire avec flexbox. Vous verrez ci-dessous qu'il est utilisé quelques fois de plus.

Le ".container" CSS :

.container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

• Positionnement relatif car les éléments enfants seront positionnés de manière absolue (nous avons expliqué pourquoi, ci-dessus).
• Overflow est défini sur hidden car nous avons défini un border-radius (rayon de bordure) et nous ne voulons pas que les éléments enfants brisent ce rayon et soient affichés en dehors du ".container".

Passons maintenant à la partie amusante, le ".form-container" et les styles associés :

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

Notez ce qui suit :

• La propriété animation (show) qui est responsable du changement du z-index des ".form-container" comme discuté ci-dessus. Nous allons avoir le z-index 1 de 0-49.99% et l'avoir à 5 de 50-100%. Ces plages sont utilisées car nous voulons que le changement soit rapide.
• Nous utilisons la classe ".right-panel-active" pour déplacer les conteneurs ".form" lorsque les boutons sont cliqués.

Et enfin, le conteneur ".overlay" et les styles associés :

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

.overlay {
    background: #ff416c;
    background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
    background: linear-gradient(to right, #ff4b2b, #ff416c);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #ffffff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

• Le .overlay a un fond en dégradé, j'ai utilisé UI Gradients pour l'obtenir ;
• ".overlay-left" et ".container .right-panel-active .overlay-right "ont une translation de -20% et 20% sur l'axe des X. C'est parce que je voulais ajouter un petit effet au texte lorsqu'il est affiché, comme s'il venait de l'extérieur (en quelque sorte) ;

A part ça... Rien ! On a tout couvert. On a fini !

Conclusion

Dans ce tutoriel, vous appris comment créer un double formulaire de connexion et d'inscription. J'espère que vous en avez appris quelque chose et que vous êtes à présent capable de créer le votre.