daily pastebin goal
28%
SHARE
TWEET

Untitled

a guest Mar 17th, 2018 463 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
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
 
Top