a16a22e2e1
Disabled clouds on welcome.ejs. Added some welcome text to replace the lorem ipsum. The alignment was also changed from center to justify, to make the UI look sharper. Transitions between each view was changed from 250ms to 500ms. Removed some testing code from login.ejs.
254 lines
11 KiB
Plaintext
254 lines
11 KiB
Plaintext
<div id="loginContainer" style="display: none;">
|
|
<div id="loginContent">
|
|
<div id='loginForm'>
|
|
<img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
|
|
<span class="loginSpan" id="loginSubheader">MEMBER LOGIN</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">* Invalid Value</span>
|
|
<input id="loginUsername" class="loginField" type="text" placeholder="EMAIL"/>
|
|
</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">* Required</span>
|
|
<input id="loginPassword" class="loginField" type="password" placeholder="PASSWORD"/>
|
|
</div>
|
|
<div id="loginOptions">
|
|
<span class="loginSpanDim">
|
|
<a href="https://help.mojang.com/customer/en/portal/articles/329524-change-or-forgot-password">forgot password?</a>
|
|
</span>
|
|
<label id="checkmarkContainer">
|
|
<input id="loginRememberOption" type="checkbox" checked>
|
|
<span id="loginRememberText" class="loginSpanDim">remember me?</span>
|
|
<span class="loginCheckmark"></span>
|
|
</label>
|
|
</div>
|
|
<button id="loginButton" disabled>
|
|
<div id="loginButtonContent">
|
|
LOGIN
|
|
<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/en-us/store/minecraft/">Need an Account?</a>
|
|
</span>
|
|
<p class="loginDisclaimerText">Your password is sent directly to mojang and never stored.</p>
|
|
<p class="loginDisclaimerText">WesterosCraft is not affiliated with Mojang AB.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="application/javascript">
|
|
//const validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
|
|
|
|
// Validation Regexes.
|
|
const validUsername = /^[a-zA-Z0-9_]{1,16}$/
|
|
const basicEmail = /^\S+@\S+\.\S+$/
|
|
|
|
// DOM cache.
|
|
const loginContainer = document.getElementById('loginContainer')
|
|
const loginErrorTitle = document.getElementById('loginErrorTitle')
|
|
const loginErrorDesc = document.getElementById('loginErrorDesc')
|
|
const loginErrorAcknowledge = document.getElementById('loginErrorAcknowledge')
|
|
|
|
const loginEmailError = document.getElementById('loginEmailError')
|
|
const loginUsername = document.getElementById('loginUsername')
|
|
const loginPasswordError = document.getElementById('loginPasswordError')
|
|
const loginPassword = document.getElementById('loginPassword')
|
|
const checkmarkContainer = document.getElementById('checkmarkContainer')
|
|
const loginRememberOption = document.getElementById('loginRememberOption')
|
|
const loginButton = document.getElementById('loginButton')
|
|
|
|
// Control variables.
|
|
let lu = false, lp = false
|
|
|
|
// Show error element.
|
|
function showError(element, value){
|
|
element.innerHTML = value
|
|
element.style.opacity = 1
|
|
}
|
|
|
|
// Shake error element.
|
|
function shakeError(element){
|
|
if(element.style.opacity == 1){
|
|
element.classList.remove('shake')
|
|
void element.offsetWidth
|
|
element.classList.add('shake')
|
|
}
|
|
}
|
|
|
|
// Validate email field is neither empty nor invalid.
|
|
function validateEmail(value){
|
|
if(value){
|
|
if(!basicEmail.test(value) && !validUsername.test(value)){
|
|
showError(loginEmailError, '* Invalid Value')
|
|
loginDisabled(true)
|
|
lu = false
|
|
} else {
|
|
loginEmailError.style.opacity = 0
|
|
lu = true
|
|
if(lp){
|
|
loginDisabled(false)
|
|
}
|
|
}
|
|
} else {
|
|
lu = false
|
|
showError(loginEmailError, '* Required')
|
|
loginDisabled(true)
|
|
}
|
|
}
|
|
|
|
// Validate password field is not empty.
|
|
function validatePassword(value){
|
|
if(value){
|
|
loginPasswordError.style.opacity = 0
|
|
lp = true
|
|
if(lu){
|
|
loginDisabled(false)
|
|
}
|
|
} else {
|
|
lp = false
|
|
showError(loginPasswordError, '* Required')
|
|
loginDisabled(true)
|
|
}
|
|
}
|
|
|
|
// Emphasize errors with shake when focus is lost.
|
|
loginUsername.addEventListener('focusout', (e) => {
|
|
validateEmail(e.target.value)
|
|
shakeError(loginEmailError)
|
|
})
|
|
loginPassword.addEventListener('focusout', (e) => {
|
|
validatePassword(e.target.value)
|
|
shakeError(loginPasswordError)
|
|
})
|
|
|
|
// Validate input for each field.
|
|
loginUsername.addEventListener('input', (e) => {
|
|
validateEmail(e.target.value)
|
|
})
|
|
loginPassword.addEventListener('input', (e) => {
|
|
validatePassword(e.target.value)
|
|
})
|
|
|
|
// Enable or disable login button.
|
|
function loginDisabled(v){
|
|
if(loginButton.disabled !== v){
|
|
loginButton.disabled = v
|
|
}
|
|
}
|
|
|
|
// Enable or disable loading elements.
|
|
function loginLoading(v){
|
|
if(v){
|
|
loginButton.setAttribute('loading', v)
|
|
loginButton.innerHTML = loginButton.innerHTML.replace('LOGIN', 'LOGGING IN')
|
|
} else {
|
|
loginButton.removeAttribute('loading')
|
|
loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'LOGIN')
|
|
}
|
|
}
|
|
|
|
// Disable or enable login form.
|
|
function formDisabled(v){
|
|
loginDisabled(v)
|
|
loginUsername.disabled = v
|
|
loginPassword.disabled = v
|
|
if(v){
|
|
checkmarkContainer.setAttribute('disabled', v)
|
|
} else {
|
|
checkmarkContainer.removeAttribute('disabled')
|
|
}
|
|
loginRememberOption.disabled = v
|
|
}
|
|
|
|
function resolveError(err){
|
|
if(err.cause != null && err.cause === 'UserMigratedException') {
|
|
return {
|
|
title: 'Error During Login:<br>Invalid Credentials',
|
|
desc: 'You\'ve attempted to login with a migrated account. Try again using the account email as the username.'
|
|
}
|
|
} else {
|
|
if(err.error != null){
|
|
if(err.error === 'ForbiddenOperationException'){
|
|
if(err.errorMessage != null){
|
|
if(err.errorMessage === 'Invalid credentials. Invalid username or password.'){
|
|
return {
|
|
title: 'Error During Login:<br>Invalid Credentials',
|
|
desc: 'The email or password you\'ve entered is incorrect. Please try again.'
|
|
}
|
|
} else if(err.errorMessage === 'Invalid credentials.'){
|
|
return {
|
|
title: 'Error During Login:<br>Too Many Attempts',
|
|
desc: 'There have been too many login attempts with this account recently. Please try again later.'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
title: err.error,
|
|
desc: err.errorMessage
|
|
}
|
|
}
|
|
|
|
loginButton.addEventListener('click', () => {
|
|
// Disable form.
|
|
formDisabled(true)
|
|
|
|
// Show loading stuff.
|
|
loginLoading(true)
|
|
|
|
AuthManager.addAccount(loginUsername.value, loginPassword.value).then((value) => {
|
|
loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'SUCCESS')
|
|
$('.circle-loader').toggleClass('load-complete')
|
|
$('.checkmark').toggle()
|
|
//console.log(value)
|
|
setTimeout(() => {
|
|
$('#loginContainer').fadeOut(500, () => {
|
|
$('#landingContainer').fadeIn(500)
|
|
})
|
|
}, 1000)
|
|
}).catch((err) => {
|
|
loginLoading(false)
|
|
const errF = resolveError(err)
|
|
setOverlayContent(errF.title, errF.desc, 'Try Again')
|
|
setOverlayHandler(() => {
|
|
formDisabled(false)
|
|
toggleOverlay(false)
|
|
})
|
|
toggleOverlay(true)
|
|
console.log(err)
|
|
})
|
|
|
|
})
|
|
</script>
|
|
<!-- Will reuse this down the line, then it will be removed from this file. -->
|
|
<!--<div id="loginLoading">
|
|
<div id="loginLoadingContent">
|
|
<div id="loadSpinnerContainer">
|
|
<img id="loadCenterImage" src="assets/images/westeroscraftlogo1.png">
|
|
<img id="loadSpinnerImage" class="rotating" src="assets/images/westeroscraftlogo2.png">
|
|
</div>
|
|
<span id="loadDescText">LOGGING IN</span>
|
|
</div>
|
|
</div>-->
|
|
</div> |