Skip to main content

Part 2 - The loading screen, and the login screen

Introduction​

note

Since the recording of the video, the connection via Microsoft has arrived. You can find the details to configure this step in part 4 (coming soon)

Video​

This tutorial is based on the video below (in French)

Under GitHub Desktop, go to Repository-->Show in Explorer. Then navigate to app/assets/images. LoadingSeal.png will be the image that stays in the background, while LoadingText.png will be the image that rotates. Make sure that your images are in square format, so that the launcher design doesn't run into design problems.
Replace the 2 pictures above, by yours, it's as simple as that

Mojang login screen customization​

note

The connection via Mojang is only offered for backwards compatibility.

Under app/login.ejs, you will be able to customize as below (This example is changed to French):

<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>

Then go to app/assets/lang/en_US.json and translate as needed (Example below was translated from English to French)

{
    "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..."
            }
        }
    }
}
note

When recording the video, I had an extension that corrected the text entered, which is why my file was full of errors. Normally, the file should be valid anyway.

The images of the loading screen​

In GitHub Desktop, press Repository-->Show in explorer. Then open the app/assets/images folder. You have 2 files: LoadingSeal.png and LoadingText.png. The first image will be used as a fixed background for the second one which will rotate. In order to complete this step, you just need to delete the 2 images and replace them with those of your choice. If you want to delete LoadingText.png, you can download this image (right click--->Save Image As if the image doesn't download itself when you open the link).

Test the changes​

Launch

npm start

If you can still connect via Mojang, you can connect to the launcher. Otherwise, we'll see how to configure Microsoft in part 4.

Send changes to GitHub​

Go back to GitHub Desktop, and fill in the form at the bottom left, indicating what changes you've made (or not, but that's basically what these fields are for), then press Commit to master. Then press Push origin at the top.