Skip to main content

Deel 2 - Het laadscherm, en het inlogscherm

Introductie

note

Sinds de opname van de video is de verbinding via Microsoft aangekomen. De details om deze stap te configureren vindt u in deel 4 (verschijnt binnenkort)

Video

Deze handleiding is gebaseerd op de onderstaande video (in het Frans)

Onder GitHub Desktop, ga naar Repository-->Toon in Verkenner. Navigeer dan naar app/assets/images. LoadingSeal.png zal de afbeelding zijn die op de achtergrond blijft, terwijl LoadingText.png de afbeelding zal zijn die draait. Zorg ervoor dat u afbeeldingen in vierkant formaat zijn, zodat het ontwerp van de launcher niet op problemen stuit.
Vervang de 2 bovenstaande foto's door de uwe, zo simpel is het.

Mojang login scherm aanpassing

note

De verbinding via Mojang wordt alleen aangeboden voor achterwaartse compatibiliteit.

Onder app/login.ejs, kunt u zich aanpassen zoals hieronder (Dit voorbeeld is veranderd in het Frans):

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

Ga dan naar app/assets/lang/en_US.json en vertaal indien nodig (onderstaand voorbeeld is vertaald van Engels naar Frans)

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

Bij het opnemen van de video had ik een extensie die de ingevoerde tekst corrigeerde, vandaar dat mijn bestand vol fouten zat. Normaal zou het bestand toch geldig moeten zijn.

De beelden van het laadscherm

In GitHub Desktop, druk op Repository-->Toon in verkenner. Open dan de map app/assets/images. U hebt 2 bestanden: LoadingSeal.png en LoadingText.png. De eerste afbeelding wordt gebruikt als vaste achtergrond voor de tweede die zal roteren. Om deze stap te voltooien, hoeft u slechts de 2 afbeeldingen te verwijderen en te vervangen door die van uw keuze. Als u LoadingText.png wilt verwijderen, kun u deze afbeelding downloaden (rechtsklik--->Beeld opslaan als als de afbeelding zichzelf niet downloadt als u de link opent).

Test de veranderingen

Start

npm start

Als u nog steeds verbinding kunt maken via Mojang, kunt u verbinding maken met de launcher. Anders zullen we in deel 4 zien hoe we Microsoft kunnen configureren.

Stuur wijzigingen naar GitHub

Ga terug naar GitHub Desktop, en vul het formulier linksonder in, en geef aan welke veranderingen u gemaakt hebt (of niet, maar daar zijn deze velden in principe voor), en druk dan op Commit to master. Druk dan op Push origin bovenaan.