plugins/org.eclipse.papyrus.gamification/html/login2.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">

    <style>
        html{
            height: 100%;
        }
        button,
        input{
            font-family: 'Share Tech Mono', monospace !important;
            border-radius: 5px;
            font-size: 1em;
        }
#accountLabel,
#errorMessage{
    text-align: left;
    width: 80%;
    font-size: 0.7em;
    font-family: 'Share Tech Mono', monospace !important;
}
#accountLabel{
	display: none;
}
#errorMessage{
	color: #ff2020;
	display: inline-block;
}
#sponsor,
#confirmPassword{
	display: none;
}
        body {
margin: 0;
}

        #myForm {
            width: 100%;
text-align: center;
            font-family: 'Cabin Sketch', cursive !important;
        }

        h2 {
            font-size: 3em;
            padding: 0;
            margin: 15px;
            color: orange;
            text-align: center;
        }

       input[type=text], input[type=password] {
	width: 80%;
    padding: 0 0 5px 0;
    margin: 12px 0;
    display: inline-block;
    border-bottom: 1px solid #ccc;
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0px;
    box-sizing: border-box;
        }

    input[type=text]:focus,
input[type=text]:hover, input[type=password]:focus,
input[type=password]:hover {
	outline: none;
    border-bottom: 1px solid #000;
        }

        button {
            background-color: #0D73A5;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 80%;
        }

        button:hover {
            opacity: 0.8;
        }
button:disabled{
	opacity: 0.8;
}

        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }

        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
        }

        img.avatar {
            width: 80%;
        }

        .container {
            padding: 5px;
        }

        span.psw {
            float: right;
            padding-top: 16px;
        }

        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }
            .cancelbtn {
                width: 100%;
            }
        }
        #loader{
            position: absolute;
            width: 330px;
            left: calc(50% - 115px);
            top: calc(50% - 98px);
            height: 196px;
            opacity: 0;
            transition: 1s;
    overflow: hidden;
        }

        #loader>img{
            width: 330px;
        }
        #loader>svg{
width: 80px;
    position: absolute;
    left: 54px;
    top: 22px;
    opacity: 1;
    transition: 1s;
            background: #E9EFED;
        }
    </style>
</head>
<body >

<div id="loader">
    <img src="https://papygame.com/papyrus-plugin/img/papygame-blue.png"/>
    <svg version="1.1" id="loaderSvg" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 <path fill="#333232" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
  c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
      <animateTransform
              attributeName="transform"
              attributeType="XML"
              type="rotate"
              dur="2s"
              from="0 50 50"
              to="360 50 50"
              repeatCount="indefinite" />
  </path>
        <path fill="#0D73A5" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
  c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
      <animateTransform
              attributeName="transform"
              attributeType="XML"
              type="rotate"
              dur="1s"
              from="0 50 50"
              to="-360 50 50"
              repeatCount="indefinite" />
  </path>
        <path fill="#809E09" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
  L82,35.7z">
      <animateTransform
              attributeName="transform"
              attributeType="XML"
              type="rotate"
              dur="2s"
              from="0 50 50"
              to="360 50 50"
              repeatCount="indefinite" />
  </path>
</svg>
<div id="myForm">
    <div class="container">
        <!--<label for="uname"><b>Username</b></label>!-->
        <input type="text" placeholder="Enter Username" name="uname" id="uname" required>
        <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
		<label id="accountLabel" for="confirmPassword">Oops, we couldn't find your username :( <br> Are you new ? Please confirm your password to create your account.</label>
        <input type="password" placeholder="Confirm Password" name="confirmPassword" id="confirmPassword" required>
        <input type="text" placeholder="Sponsor (optional)" name="sponsor" id="sponsor">

        <button type="submit" id="submitButton" disabled>Login</button>
		<div id="errorMessage"></div>
		<div id="explanationMessage"></div>

        <!--<label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>-->
    </div>


</div>
</div>
</body>

<script>
    window.onload = function ()
    {
		show();
		init();
        var submitButton = document.getElementById("submitButton");
        submitButton.onclick = function () {
            try {
                var login = document.getElementById("uname").value;
                var pwd = document.getElementById("psw").value;
                var sponsor = document.getElementById("sponsor").value;
                var confirmPassword = document.getElementById("confirmPassword").value;
				document.getElementById("errorMessage").innerHTML='';

showLoader();

            setTimeout(function () {
                submitLogin(login, pwd, confirmPassword, sponsor);
            }, 200);
                
            } catch(except) {
                print("exception : "+except);
            }
        }
            setTimeout(function () {
                move()
            }, 1600);

    }

function showLoader(){
		document.getElementById("loaderSvg").style.opacity='1';
submitButton.disabled = true;
}
function stopLoader(){
			document.getElementById("loaderSvg").style.opacity='0';
submitButton.disabled = false;
}
function init(){
	const selectElement = document.querySelector('.ice-cream');
document.querySelector('#uname').addEventListener('input', (event) => {
	checkFields();
});
document.querySelector('#psw').addEventListener('input', (event) => {
	checkFields();
});
document.querySelector('#confirmPassword').addEventListener('input', (event) => {
	checkFields();
});
}
function showErrorMatchingPasswords(){
	document.getElementById("errorMessage").innerHTML='Both passwords do not match. Please retry.';
	stopLoader();
}
function showErrorCredentialsMissing(){
	document.getElementById("errorMessage").innerHTML='You have to specify a username and a password. Please retry.';
	stopLoader();
}
function showErrorCredentialsIncorrect(){
	document.getElementById("errorMessage").innerHTML='The password does not match the username. Please retry.';
	stopLoader();
}
function checkFields(){
	if((document.querySelector('#uname').value.trim() == '') ||
	(document.querySelector('#psw').value.trim() == '')){
		document.querySelector('#submitButton').disabled = true;
	}
	else{
		document.querySelector('#submitButton').disabled = false;
		if(!(document.querySelector('#confirmPassword').value.trim() == '')){
			
			document.querySelector('#submitButton').innerHTML = 'Create Account';
			
			if(!(document.querySelector('#confirmPassword').value.trim() == 
			document.querySelector('#psw').value.trim())){
				setConfirmPasswordInvalid();
			}
			else{
				setConfirmPasswordValid();
			}
		}
		else{
			document.querySelector('#submitButton').innerHTML = 'Login';
		}
	}
}

function setConfirmPasswordInvalid(){
	document.querySelector('#confirmPassword').classList.add("invalid");
		document.querySelector('#submitButton').disabled = true;

}
function setConfirmPasswordValid(){
	document.querySelector('#confirmPassword').classList.remove("invalid");
		document.querySelector('#submitButton').disabled = false;
}
function move(){
		document.getElementById("loader").style.top='calc(50% - 195px)';
	document.getElementById("loader").style.height='390px';

	document.getElementById("loaderSvg").style.opacity='0';

}
function show(){
	document.getElementById("loader").style.opacity='1';
}

function proposeAccount(){
	document.getElementById("accountLabel").style.display='inline-block';
	document.getElementById("confirmPassword").style.display='inline-block';
	document.getElementById("sponsor").style.display='inline-block';
	document.getElementById("loader").style.top='calc(50% - 275px)';
	document.getElementById("loader").style.height='550px';
	stopLoader();

}

function logBrowser(){
	var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var fullVersion  = ''+parseFloat(navigator.appVersion); 
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1) 
   fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
   fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
   fullVersion=fullVersion.substring(0,ix);

majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
 fullVersion  = ''+parseFloat(navigator.appVersion); 
 majorVersion = parseInt(navigator.appVersion,10);
}

logBrowserJava(''
 +'Browser name  = '+browserName+'<br>'
 +'Full version  = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
);
}

</script>
</html>