Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="Login_Register_GUI.css">
- </head>
- <body style="background-color:rgba(192,192,192,0.5);">
- <header><h1>Login/Register GUI</h1></header>
- <nav class="Tabs">
- <button class="tabButton" onclick="openTab('LoginTab')">Login</button>
- <button class="tabButton" onclick="openTab('RegisterTab')">Register</button>
- </nav>
- <div id="LoginTab" class="tab">
- <!-- <form class="login-form"> -->
- <!-- Text input-->
- <div class="form-group">
- <label class="label-group" for="loginusername">Username*</label>
- <input id="loginusername" placeholder="Type in Username here" class="inputTb" required type="text">
- </div>
- <!-- Password input-->
- <div class="form-group">
- <label class="label-group" for="loginpassword">Password*</label>
- <input id="loginpassword" placeholder="Type in Password here" class="inputTb" required type="password">
- </div>
- <!--Checkbox (inline) -->
- <div class="showPwBox">
- <label class="checkbox-inline" for="showPwBox">
- <input name="showPwBox" id="showPwBox" value="showPw" type="checkbox">
- <span class="label-group">Show Password</span>
- </label>
- </div>
- <!-- Buttons -->
- <!--<label class="col-md-4 control-label" for="leaveBtn"></label>-->
- <div class="button-group">
- <button id="loginbtn" type="button" onclick="loginMyUser()" name="loginbtn" class="btnGroup">Login</button>
- <button id="recoverBtn" type="button" name="recoverBtn" class="btnGroup">Recover Password</button>
- <button id="leaveBtn" type="button" name="leaveBtn" onclick="onLeave()" class="btnGroup">Leave</button>
- </div>
- <!--</form>-->
- </div>
- <div id="RegisterTab" class="tab" style="display:none">
- <!--<form id="reg-form">-->
- <!--- Username Label and Inputfield-->
- <div class="fb-text form-group field-regusername">
- <label for="regusername" class="label-group">Username<span class="fb-required">*</span></label>
- <input placeholder="Type in Username here" class="inputTb" id="regusername" required type="text">
- </div>
- <!-- Password Label and Inputfield-->
- <div class="fb-text form-group field-regpassword">
- <label for="regpassword" class="label-group">Password<span class="fb-required">*</span></label>
- <input placeholder="Type in Password here" class="inputTb" id="regpassword" required type="password">
- </div>
- <!--Validate Password Label and Inputfield-->
- <div class="fb-text form-group field-regpwvalid">
- <label for="regpwvalid" class="label-group">Validate Password<span class="fb-required">*</span></label>
- <input placeholder="Type in Password here again" class="inputTb" id="regpwvalid" required type="password">
- </div>
- <!--Email Label and Inputfield-->
- <div class="fb-text form-group field-regemail"><label for="regemail" class="label-group">E-Mail</label>
- <input placeholder="Type in your E-Mail here (optional)" class="inputTb" name="regemail" id="regemail" title="(optional) If you don't fill in your E-Mail you won't be able to recover your Password if you lose it!" type="email">
- </div>
- <!--Buttons-->
- <div class="regBtn-group">
- <button type="button" class="regBtn" onclick="registerMyUser()" name="regbtn" id="regbtn">Register</button>
- <button type="button" class="regBtn" onclick="onLeave()" name="regleave" id="regleave">Leave</button>
- </div>
- </div>
- <!-- </form>-->
- <script >
- function openTab(tabName) {
- var i;
- var x = document.getElementsByClassName("tab");
- for (i = 0; i < x.length; i++) {
- x[i].style.display = "none";
- }
- document.getElementById(tabName).style.display = "block";
- }
- document.getElementById('showPwBox').onclick = function () {
- if (this.checked) {
- document.getElementById('loginpassword').type = "text";
- }
- else {
- document.getElementById('loginpassword').type = "password";
- }
- }
- function loginMyUser () {
- var username = document.getElementById("loginusername").value;
- var password = document.getElementById("loginpassword").value;
- if (username == "") {
- alert("Fill out Username");
- }
- else if (password == "") {
- alert("Fill out Password");
- }
- else {
- ResourceCall("onLoginUser", username, password);
- alert("Hallo login");
- }
- };
- function registerMyUser() {
- //alert("Servus");
- var username = document.getElementById("regusername").value;
- var password = document.getElementById("regpassword").value;
- var validPw = document.getElementById("regpwvalid").value;
- var email = document.getElementById("regemail").value;
- if (username == "") {
- alert("Fill out Username");
- }
- else if (password == "") {
- alert("Fill out Password");
- }
- else if (validPw !== password) {
- alert("Password incorrect!");
- }
- else {
- ResourceCall("onRegisterUser", username, password, email);
- alert("Hallo " + username);
- }
- };
- function onLeave() { ResourceCall("DisconnectUser"); }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement