API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 17th, 2018
489
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.50 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>login.overlay3-complete</title>
  5.   <style>
  6.     .textfield {
  7.       background: white;
  8.       border: 1px solid grey;
  9.       border-radius: 5px;
  10.       font-family: 'Lato', sans-serif black;
  11.       height: 30px;
  12.       width: 100%;
  13.     }
  14.  
  15.     .textfield3 {
  16.       background: white;
  17.       border: 1px solid grey;
  18.       border-radius: 5px;
  19.       font-family: 'Lato', sans-serif black;
  20.       height: 30px;
  21.       margin-bottom: 20px;
  22.       width: 100%;
  23.     }
  24.  
  25.     .textfield-email {
  26.       background: white;
  27.       border: 1px solid grey;
  28.       border-radius: 5px;
  29.       font-family: 'Lato', sans-serif black;
  30.       height: 30px;
  31.       width: 90%;
  32.     }
  33.  
  34.     #overlay-button {
  35.       background: #3c683c;
  36.       border: 1px solid black;
  37.       border-radius: 5px;
  38.       float: left;
  39.       font-family: 'Lato', sans-serif black;
  40.       height: 35px;
  41.       margin-top: 20px;
  42.       margin-left: 20px;
  43.       text-align: center;
  44.       width: 70px;
  45.     }
  46.  
  47.     #logout-button {
  48.       background: #a60008;
  49.       border: 1px solid black;
  50.       border-radius: 5px;
  51.       display: none;
  52.       font-family: 'Lato', sans-serif black;
  53.       height: 35px;
  54.       margin-top: 20px;
  55.       margin-left: 20px;
  56.       text-align: center;
  57.       width: 100px;
  58.     }
  59.  
  60.     #login-button2 {
  61.       background: #3c683c;
  62.       border: 1px solid black;
  63.       border-radius: 5px;
  64.       float: left;
  65.       font-family: 'Lato', sans-serif black;
  66.       height: 35px;
  67.       margin-top: 20px;
  68.       margin-left: 20px;
  69.       text-align: center;
  70.       width: 100px;
  71.     }
  72.  
  73.     #login-button {
  74.       background: #e1e1e1;
  75.       border: 1px solid grey;
  76.       border-radius: 5px;
  77.       float: left;
  78.       font-family: 'Lato', sans-serif black;
  79.       height: 35px;
  80.       margin-right: 40px;
  81.       margin-top: 20px;
  82.       text-align: center;
  83.       width: 30%;
  84.       min-width: 80px;
  85.       max-width: 200px;
  86.     }
  87.  
  88.     #register-button {
  89.       background: #e1e1e1;
  90.       border: 1px solid grey;
  91.       border-radius: 5px;
  92.       font-family: 'Lato', sans-serif black;
  93.       height: 35px;
  94.       margin-top: 20px;
  95.       text-align: center;
  96.       width: 50%;
  97.       min-width: 136px;
  98.       max-width: 300px;
  99.     }
  100.  
  101.     .acc-settings {
  102.       background: #3c683c;
  103.       border: 1px solid black;
  104.       border-radius: 5px;
  105.       font-family: 'Lato', sans-serif black;
  106.       height: 35px;
  107.       margin-top: 20px;
  108.       margin-left: 20px;
  109.       text-align: center;
  110.     }
  111.  
  112.     .btn-myAccount {
  113.       width: 130px;
  114.     }
  115.  
  116.     #btnMyAccount {
  117.       display: none;
  118.     }
  119.  
  120.     .btn-changePassword {
  121.       width: 200px;
  122.     }
  123.  
  124.     #my-account {
  125.       background: #3c683c;
  126.       border: 1px solid black;
  127.       border-radius: 5px;
  128.       display: none;
  129.       font-family: 'Lato', sans-serif black;
  130.       height: 35px;
  131.       margin-left: 20px;
  132.       text-align: center;
  133.       width: 130px;
  134.     }
  135.  
  136.     #username {
  137.       float: left;
  138.     }
  139.  
  140.     #password {
  141.       float: left;
  142.     }
  143.  
  144.     #password-text {
  145.       margin-top: 50px;
  146.     }
  147.  
  148.     .login-div {
  149.       border: 2px solid #a5a5a5;
  150.       border-radius: 5px;
  151.       -webkit-box-shadow: 10px 4px 10px 0 #CCCCCC;
  152.       height: 230px;
  153.       width: 60%;
  154.     }
  155.  
  156.     .field-div {
  157.       border: 0;
  158.       height: 186px;
  159.       margin: 20px;
  160.       width: auto;
  161.     }
  162.  
  163.     .login-div2 {
  164.       background: white;
  165.       border: 2px solid black;
  166.       border-radius: 5px;
  167.       -webkit-box-shadow: 10px 4px 10px 0 black;
  168.       height: 305px;
  169.       width: 60%;
  170.       min-width: 300px;
  171.       z-index: 6;
  172.     }
  173.  
  174.     .field-div2 {
  175.       border: 0;
  176.       height: 261px;
  177.       margin: 20px;
  178.       width: auto;
  179.     }
  180.  
  181.     #email-text {
  182.       margin-top: 50px;
  183.     }
  184.  
  185.     #login-overlay {
  186.       background-color: rgba(0,0,0,0.5);
  187.       display: none;
  188.       height: 100%;
  189.       position: fixed;
  190.       width: 100%;
  191.       z-index: 5;
  192.     }
  193.  
  194.     .overlay-all {
  195.       margin-left: auto;
  196.       margin-right: auto;
  197.       margin-top: 100px;
  198.     }
  199.  
  200.     .current-user {
  201.       background-color: #CCCCCC;
  202.       border: 1px solid black;
  203.       border-radius: 5px;
  204.       color: black;
  205.       font-size: 18px;
  206.       height: 35px;
  207.       margin-top: 20px;
  208.       margin-left: 20px;
  209.       margin-right: auto;
  210.       min-width: 300px;
  211.       padding-left: 10px;
  212.       padding-right: 10px;
  213.     }
  214.  
  215.     #alert-message {
  216.       animation: slideDown 2s forwards;
  217.       background: #e1e1e1;
  218.       border-bottom: 1px solid #a5a5a5;
  219.       color: black;
  220.       display: none;
  221.       height: auto;
  222.       min-height: 40px;
  223.       text-align: center;
  224.       width: 100%;
  225.       z-index: 6;
  226.     }
  227.  
  228.     #alert-info {
  229.       background: #000078;
  230.       border: 1px solid black;
  231.       border-radius: 5px;
  232.       color: #fff;
  233.       float: left;
  234.       font-family: 'Lato', sans-serif black;
  235.       font-size: 18px;
  236.       height: 35px;
  237.       margin-top: 20px;
  238.       margin-left: 50px;
  239.       text-align: center;
  240.       width: 40px;
  241.     }
  242.  
  243.     .tfield {
  244.       background-color: #CCCCCC;
  245.       border: 1px solid black;
  246.       border-radius: 5px;
  247.       color: black;
  248.       font-size: 18px;
  249.       height: 35px;
  250.       margin-top: 20px;
  251.       margin-left: 20px;
  252.       margin-right: auto;
  253.       min-width: 300px;
  254.       padding-left: 10px;
  255.       padding-right: 10px;
  256.     }
  257.  
  258.     #myAccount-div {
  259.       background: white;
  260.       border: 0;
  261.       display: none;
  262.       font-family: 'Lato', sans-serif black;
  263.       height: 300px;
  264.       margin-top: 30px;
  265.       margin-left: 20px;
  266.       min-width: 376px;
  267.       width: 50%;
  268.     }
  269.  
  270.     #changePW-div {
  271.       display: none;
  272.       height: 300px;
  273.       margin-left: 20px;
  274.       width: 95%;
  275.     }
  276.   </style>
  277. </head>
  278. <body>
  279. <button id="login-button2">Login</button>
  280. <button id="logout-button">Logout</button>
  281. <button class="btn-myAccount acc-settings" id="btnMyAccount">My Account</button>
  282. <div class="current-user">
  283.   <p id="current-user">current user: guest</p>
  284. </div>
  285. <div id="myAccount-div">
  286.   <label for="myAccount-username">Username</label>
  287.   <input type="text" id="myAccount-username" class="textfield" readonly>
  288.   <label for="myAccount-password">Password</label>
  289.   <input type="password" id="myAccount-password" class="textfield" readonly>
  290.   <label for="myAccount-email">E-mail</label>
  291.   <input type="text" id="myAccount-email" class="textfield" readonly>
  292.   <button class="acc-settings btn-changePassword" id="change-password">Change Password</button>
  293. </div>
  294. <div id="login-overlay">
  295.   <div id="alert-message">
  296.     <p class="alert-message"></p>
  297.   </div>
  298.   <button id="overlay-button">&#10094;</button>
  299.   <button id="alert-info">i</button>
  300.   <div class="overlay-all">
  301.     <div class="login-div2">
  302.       <div class="field-div2">
  303.         <div class="field-text">
  304.           <label for="username">Username</label>
  305.           <input type="text" name = "username" id="username" class="textfield3" maxlength="16" required>
  306.           <label for="password">Password</label>
  307.           <input type="password" id="password" class="textfield3" maxlength="16" required>
  308.           <label for="email">Email</label>
  309.           <input type="text" id="email" class="textfield" maxlength="32" required>
  310.           <button id="login-button">Login</button>
  311.           <button id="register-button">Register</button>
  312.         </div>
  313.       </div>
  314.     </div>
  315.   </div>
  316. </div>
  317. <div id="changePW-div">
  318.   <label for="pwchange">Old Password</label>
  319.   <input type="password" id="pwchange" class="textfield" maxlength="16" required>
  320.   <label for="pwField1">New Password</label>
  321.   <input type="password" id="pwField1" class="textfield" maxlength="16" required>
  322.   <label for="pwField2">Confirm New Password</label>
  323.   <input type="password" id="pwField2" class="textfield" maxlength="16" required>
  324.   <p id="pwChangeMessage"><p>
  325.   <button class="acc-settings changePassword" id="changePassword">Change Password</button>
  326. </div>
  327. <script>
  328.   var username; var password; var email; var regUsername = null; var regPassword = null; var regEmail = "email1@test.de";
  329.   var toggleInfo = false; var toggleMyAccount = false; var toggleChangePW = false;
  330.  
  331.   var alertMessage = document.getElementById('alert-message');
  332.   var loginButton2 = document.getElementById('login-button2');
  333.   var logoutButton = document.getElementById('logout-button');
  334.   var loginOverlay = document.getElementById('login-overlay');
  335.   var currentUser = document.getElementById('current-user');
  336.   var myAccountUsername = document.getElementById('myAccount-username');
  337.   var myAccountPassword = document.getElementById('myAccount-password');
  338.   var myAccountEmail = document.getElementById('myAccount-email');
  339.   var btnMyAccount = document.getElementById('btnMyAccount');
  340.   var myAccountDiv = document.getElementById('myAccount-div');
  341.   var oldPassword = document.getElementById('pwchange');
  342.   var newPassword = document.getElementById('pwField1');
  343.   var newPasswordConfirm = document.getElementById('pwField2');
  344.   var pwChangeMessage = document.getElementById('pwChangeMessage');
  345.   var changePWDiv = document.getElementById('changePW-div');
  346.  
  347.   document.getElementById('login-button').addEventListener("click", login);
  348.   document.getElementById('register-button').addEventListener("click", register);
  349.   document.getElementById('login-button2').addEventListener("click", overlayOpen);
  350.   document.getElementById('overlay-button').addEventListener("click", overlayClose);
  351.   document.getElementById('logout-button').addEventListener("click", logout);
  352.   document.getElementById('alert-info').addEventListener("click", info);
  353.   document.getElementById('btnMyAccount').addEventListener("click", myAccount);
  354.   document.getElementById('change-password').addEventListener("click", changePasswordBtn);
  355.   document.getElementById('changePassword').addEventListener("click", changePassword);
  356.  
  357.   function register(){
  358.     regUsername = document.getElementById('username').value;
  359.     regPassword = document.getElementById('password').value;
  360.     regEmail = document.getElementById('email').value;
  361.     if(regUsername !== null && regUsername !== "" && password !== null && password !== "" && email !== null && email !== ""){
  362.      alerts("#000", "#008700", "Your account " + username + " has been created");
  363.     } else {
  364.       regUsername = null; regPassword = null; regEmail = null;
  365.       alerts("#000", "#878700", "Warning! You have to fill all the fields with details");
  366.     }
  367.   }
  368.  
  369.   function login(){
  370.     username = document.getElementById('username').value;
  371.     password = document.getElementById('password').value;
  372.     if(username !== null && username !== "" && password !== null && password !== "" && username === "username1" && password === "password1" || username === regUsername && password === regPassword){
  373.      loginButton2.style.display = "none";
  374.       logoutButton.style.display = "block";
  375.       currentUser.innerHTML = "current user: " + username;
  376.       btnMyAccount.style.display = "block";
  377.       alerts("#000", "#008700", "You successfully loged in to your account " + username);
  378.     } else {
  379.       alerts("#000", "#870c00", "Error! You entered a wrong username or password");
  380.     }
  381.   }
  382.  
  383.   function info(){
  384.     if(toggleInfo === false){
  385.       toggleInfo = true;
  386.       alerts("#c3c3c3", "#000087", "Info! You can log in if you already have an account or click register to create a new account after writing your details in the corresponding fields");
  387.     } else {
  388.       alertMessage.style.display = "none";
  389.       toggleInfo = false;
  390.     }
  391.   }
  392.  
  393.   function logout(){
  394.     document.getElementById('username').value = null;
  395.     document.getElementById('password').value = null;
  396.     document.getElementById('email').value = null;
  397.     logoutButton.style.display = "none";
  398.     loginButton2.style.display = "block";
  399.     currentUser.innerHTML = "current user guest";
  400.     btnMyAccount.style.display = "none";
  401.     myAccountDiv.style.display = "none";
  402.     toggleMyAccount = false;
  403.     changePWDiv.style.display = "none";
  404.     toggleChangePW = false;
  405.     pwChangeMessage.style.display = "block";
  406.     pwChangeMessage.innerHTML = null;
  407.     alerts("#000", "#878700", "You have been loged out!");
  408.   }
  409.  
  410.   function alerts(color, bgColor, text){
  411.     alertMessage.style.color = color;
  412.     alertMessage.style.backgroundColor = bgColor;
  413.     alertMessage.innerHTML = text;
  414.     alertMessage.style.display = "block";
  415.   }
  416.  
  417.   function overlayOpen(){ loginOverlay.style.display = "block"; }
  418.   function overlayClose(){ loginOverlay.style.display = "none"; }
  419.  
  420.   function myAccount(){
  421.     if(toggleMyAccount === false){
  422.       myAccountDiv.style.display = "block";
  423.       myAccountUsername.value = username;
  424.       myAccountPassword.value = "null";
  425.       myAccountEmail.value = regEmail;
  426.       changePWDiv.style.display = "none";
  427.       if(username === "username1"){regEmail = "email@test.de";}
  428.       toggleMyAccount = true;
  429.       toggleChangePW = false;
  430.     } else {
  431.       myAccountDiv.style.display = "none";
  432.       changePWDiv.style.display = "none";
  433.       toggleMyAccount = false;
  434.     }
  435.     pwChangeMessage.style.display = "block";
  436.     pwChangeMessage.innerHTML = null;
  437.   }
  438.  
  439.   function changePasswordBtn() {
  440.     if(toggleChangePW === false) {
  441.       changePWDiv.style.display = "block";
  442.       myAccountDiv.style.display = "none";
  443.       toggleChangePW = true;
  444.       toggleMyAccount = false;
  445.     } else {
  446.       changePWDiv.style.display = "none";
  447.       myAccountDiv.style.display = "block";
  448.       toggleChangePW = false;
  449.     }
  450.   }
  451.  
  452.   function changePassword(){
  453.     pwChangeMessage.style.display = "block"; pwChangeMessage.innerHTML = null;
  454.     if(oldPassword.value === password && newPassword.value === newPasswordConfirm.value && oldPassword.value !== null && newPassword.value !== null){
  455.      pwChangeMessage.style.color = "#008700";
  456.       pwChangeMessage.innerHTML = "Password changed!";
  457.       password = newPassword.value;
  458.       regPassword = newPassword.value;
  459.       oldPassword.value = null; newPassword.value = null; newPasswordConfirm.value = null;
  460.     } else if (oldPassword.value === password && newPassword.value !== newPasswordConfirm.value){
  461.      pwChangeMessage.style.color = "#870c00";
  462.       pwChangeMessage.innerHTML = "Please confirm your new password!";
  463.     } else if (oldPassword.value !== password && newPassword.value === newPasswordConfirm.value){
  464.      pwChangeMessage.style.color = "#870c00";
  465.       pwChangeMessage.innerHTML = "Wrong password entered!";
  466.     } else {
  467.       pwChangeMessage.style.color = "#870c00";
  468.       pwChangeMessage.innerHTML = "Wrong password entered!";
  469.     }
  470.   }
  471. </script>
  472. </body>
  473. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!