Aller au contenu principal

Partie 2 - L'écran de chargement, et l'écran de connexion

Introduction​

remarque

Depuis l'enregistrement de la vidéo, la connexion via Microsoft est arrivé. Retrouvez les détails pour configurer cette étape en partie 4 (arrive bientôt)

Vidéo​

Ce tutoriel est basé sur la vidéo ci-dessous

Changement du logo de chargement​

Sous GitHub Desktop, allez sour Repository-->Show in Explorer. Naviguez ensuite dans app/assets/images. LoadingSeal.png sera l'image qui restera en fond, tandis que LoadingText.png sera l'image qui tourne. Assurez-vous que vos images soient au format carré, afin d'éviter que le design du launcher rencontre des problèmes au niveau du design.
Remplacez donc les 2 images susmentionnées, par les votres, c'est aussi simple que celà

Personalisation de l'écran de connexion Mojang​

remarque

La connexion via Mojang n'est proposée qu'à des fins de rétrocompatibilité.

Sous app/login.ejs, vous allez pouvoir personnaliser comme ci-dessous:

<div id="loginContainer" style="display: none;">
    <div id="loginCancelContainer" style="display: none;">
        <button id="loginCancelButton">
            <div id="loginCancelIcon">X</div>
            <span id="loginCancelText">Annuler</span>
        </button>
    </div>
    <div id="loginContent">
        <form id="loginForm">
            <img id="loginImageSeal" src="assets/images/SealCircle.png"/>
            <span id="loginSubheader">CONNEXION VIA MOJANG</span>
            <div class="loginFieldContainer">
                <svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43">
                    <g>
                        <path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
                    </g>
                </svg>
                <span class="loginErrorSpan" id="loginEmailError">* Valeur invalide</span>
                <input id="loginUsername" class="loginField" type="text" placeholder="EMAIL OU NOM D'UTILISATEUR"/>
            </div>
            <div class="loginFieldContainer">
                <svg id="lockSVG" class="loginSVG" viewBox="40 32 60.36 70.43">
                    <g>
                        <path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
                    </g>
                </svg>
                <span class="loginErrorSpan" id="loginPasswordError">* Requis</span>
                <input id="loginPassword" class="loginField" type="password" placeholder="MOT DE PASSE"/>
            </div>
            <div id="loginOptions">
                <span class="loginSpanDim">
                    <a href="https://minecraft.net/password/forgot/">mot de passe oublié?</a>
                </span>
                <label id="checkmarkContainer">
                    <input id="loginRememberOption" type="checkbox" checked>
                    <span id="loginRememberText" class="loginSpanDim">rester connecté?</span>
                    <span class="loginCheckmark"></span>
                </label>
            </div>
            <button id="loginButton" disabled>
                <div id="loginButtonContent">
                    CONNEXION
                    <svg id="loginSVG" viewBox="0 0 24.87 13.97">
                        <defs>
                            <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
                        </defs>
                        <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
                    </svg>
                    <div class="circle-loader">
                        <div class="checkmark draw"></div>
                    </div>
                    <!--<div class="spinningCircle" id="loginSpinner"></div>-->
                </div>
            </button>
            <div id="loginDisclaimer">
                <span class="loginSpanDim" id="loginRegisterSpan">
                    <a href="https://minecraft.net/store/minecraft-java-edition/">Vous n'avez pas de compte Minecraft?</a>
                </span>
                <p class="loginDisclaimerText">Votre mot de passe est directement envoyé de mannière sécurisée sur les serveurs de Mojang, sans intermédiaire.</p>
                <p class="loginDisclaimerText">Mon Launcher n'est pas affilié avec Mojang Studios.</p>
            </div>
        </form>
    </div>
    <script src="./assets/js/scripts/login.js"></script>
</div>

Rendez-vous ensuite dans app/assets/lang/en_US.json puis traduisez selon vos besoins

{
    "html": {
        "avatarOverlay": "Modifier"
    },
    "js": {
        "login": {
            "error": {
                "invalidValue": "* Valeur invalide",
                "requiredValue": "* Requis",
                "userMigrated": {
                    "title": "Erreur durant la connexion:<br>Identifiants invalides",
                    "desc": "Vous avez essayé de vous connecter avec un compte migré vers Mojang. Essayez de vous connecter avec l'email à la place du nom d'utilisateur."
                },
                "invalidCredentials": {
                    "title": "Erreur durant la connexion:<br>Identifiants invalides",
                    "desc": "L'e-mail ou le mot de passe que vous avez entré est incorrect. Veuillez réessayer."
                },
                "rateLimit": {
                   "title": "Erreur lors de la connexion:<br>Trop de tentatives",
                    "desc": "Il y a eu trop de tentatives de connexion avec ce compte récemment. Veuillez réessayer plus tard."
                },
                "noInternet": {
                    "title": "Erreur lors de la connexion:<br>Pas de connexion Internet",
                    "desc": "Vous devez être connecté à Internet pour vous connecter. Veuillez vous connecter et réessayer."
                },
                "authDown": {
                    "title": "Erreur lors de la connexion:<br>Serveur d'authentification hors ligne",
                    "desc": "Le serveur d'authentification de Mojang est actuellement hors ligne ou inaccessible. Veuillez patienter un peu et réessayer."
                },
                "notPaid": {
                    "title": "Erreur lors de la connexion:<br>Jeu non acheté",
                    "desc": "Le compte avec lequel vous essayez de vous connecter n'a pas acheté de copie de Minecraft.<br>Vous pouvez acheter une copie sur <a href=\"https://minecraft.net/\">Minecraft.net</a>."
                },
                "unknown": {
                    "title": "Erreur lors de la connexion:<br>Erreur inconnue"
                }
            },
            "login": "CONNEXION",
            "loggingIn": "CONNEXION EN COURS",
            "success": "CONNECTÉ",
            "tryAgain": "Veuillez réessayer"
        },
        "landing": {
            "launch": {
                "pleaseWait": "Veuillez patienter..."
            }
        }
    }
}
remarque

Lors de l'enregistrement de la vidéo, j'avais une extension qui corrigait le texte entré, ce qui explique que mon fichier était rempli d'erreurs. Normalement, le fichier devrait être valide quand même.

Les images de l'écran de chargement​

Dans GitHub Desktop, pressez Repository-->Show in explorer. Ouvrez ensuite le dossier app/assets/images. Vous avez 2 fichiers: LoadingSeal.png et LoadingText.png. La première image servira de fond fixe à la 2ème qui quand à elle tournera. Afin de mettre à bien cette étape, il vous suffit juste de supprimer les 2 images et de les remplacer par celles de votre choix. Si vous souhaitez supprimer LoadingText.png, vous pouvez télécharger cette image (faites clic droit--->Enregistrer l'image sous si l'image ne se télécharge pas toute seule quand vous ouvrez le lien).

Tester les modifications​

Lancez

npm start

Si vous pouvez toujours vous connecter via Mojang, vous pouvez vous connecter au launcher. Sinon, on verra comment configurer Microsoft en partie 4.

Envoyer les modifications sur GitHub​

Retournez sur GitHub Desktop, et remplissez en bas à gauche le formulaire, en indiquant les changements effectués (ou pas, mais c'est à la base la raison d'être de ces champs), puis pressez Commit to master. Ensuite, pressez en haut Push origin.