From f8878619669979f9ddb6b7d972853dc7c57b46c8 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Fri, 15 May 2020 04:09:00 +0100
Subject: [PATCH] added form buttons moved sign out button

---
 public/css/style.scss   |  54 ++++++++++-----
 public/index.html       |   6 +-
 public/js/account.js    | 145 +++++++++++++++++++++++-----------------
 public/js/script.js     |  74 ++++++++++----------
 public/js/userconfig.js |   9 +++
 5 files changed, 173 insertions(+), 115 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 6b1254b31..9eaf04d0c 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -705,6 +705,23 @@ key {
     display: grid;
     gap: .5rem;
     width: 100%;
+    .button{
+      border-radius: var(--roundness);
+      background: var(--sub-color);
+      color: var(--bg-color);
+      padding: .5rem;
+      font-size: 1rem;
+      line-height: 1rem;
+      text-align: center;
+      cursor: pointer;
+      transition: .25s;
+      &:hover{
+        background: var(--main-color);
+      }
+      .fas{
+        margin-right: .5rem;
+      }
+    }
   }
   .preloader{
     position: fixed;
@@ -800,6 +817,26 @@ key {
   }
 }
 
+.signOut{
+  font-size: 1rem;
+  line-height: 1rem;
+  justify-self: end;
+  // background: var(--sub-color);
+  color: var(--sub-color); 
+  width: fit-content;
+  padding: .5rem;
+  border-radius: var(--roundness);
+  cursor: pointer;
+  transition: .25s;
+  float: right;
+  &:hover{
+    color: var(--main-color);
+  }
+  .fas{
+    margin-right: .5rem;
+  }
+}
+
 .pageAccount{
   display: grid;
   gap: 1rem;
@@ -811,23 +848,6 @@ key {
     font-size: 2rem;
     justify-self: center;
   }
-  .signOut{
-    justify-self: end;
-    // background: var(--sub-color);
-    color: var(--sub-color); 
-    width: fit-content;
-    padding: .5rem;
-    border-radius: var(--roundness);
-    cursor: pointer;
-    transition: .25s;
-    float: right;
-    &:hover{
-      color: var(--main-color);
-    }
-    .fas{
-      margin-right: .5rem;
-    }
-  }
   .triplegroup{
     display: grid;
     grid-auto-flow: column;
diff --git a/public/index.html b/public/index.html
index 215981db1..70055cb7d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -85,7 +85,7 @@
       </div>
 
 
-      <div class="config">
+      <div class="config" style="grid-column: 3/4;grid-row: 1/2;">
         <div class="group punctuationMode">
           <!--           <div class="title">time</div> -->
           <div class="buttons">
@@ -127,6 +127,7 @@
         </div>
 
       </div>
+      <div class="signOut hidden" style="grid-column: 3/4;grid-row: 1/2;" tabindex="0"><i class="fas fa-sign-out-alt"></i>sign out</div>
 
     </div>
     <div id="middle">
@@ -242,6 +243,7 @@
             <input type="text" placeholder="email">
             <input type="password" placeholder="password">
             <input type="password" placeholder="verify password">
+            <div class="button"><i class="fas fa-user-plus"></i>Sign Up</div>
           </form>
         </div>
         <div class="login side">
@@ -249,6 +251,7 @@
           <form action="">
             <input type="text" placeholder="email">
             <input type="password" placeholder="password">
+            <div class="button"><i class="fas fa-sign-in-alt"></i>Sign In</div>
           </form>
         </div>
 
@@ -256,7 +259,6 @@
       <div class="page pageAccount hidden">
         <div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
         <div class="content hidden">
-          <div class="signOut"><i class="fas fa-sign-out-alt"></i>sign out</div>
           <div class="group">
             <div class="title"></div>
             <div class="chart">
diff --git a/public/js/account.js b/public/js/account.js
index 0cfd31323..8ea013d86 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -1,78 +1,99 @@
 $(".pageLogin .register input").keyup(e => {
   if (e.key == "Enter") {
-    $(".pageLogin .preloader").removeClass('hidden');
-
-
-    let name = $(".pageLogin .register input")[0].value;
-    let email = $(".pageLogin .register input")[1].value;
-    let password = $(".pageLogin .register input")[2].value;
-    let passwordVerify = $(".pageLogin .register input")[3].value;
-
-    if (name == "") {
-      showNotification("Name is required", 3000);
-      $(".pageLogin .preloader").addClass('hidden');
-      return;
-    }
-
-    if (password != passwordVerify) {
-      showNotification("Passwords do not match", 3000);
-      $(".pageLogin .preloader").addClass('hidden');
-      return;
-    }
-
-    firebase.auth().createUserWithEmailAndPassword(email, password).then(user => {
-      // Account has been created here.
-      let usr = user.user;
-      usr.updateProfile({
-        displayName: name
-      }).then(function() {
-        // Update successful.
-        showNotification("Account created", 2000);
-        firebase.analytics().logEvent("accountCreated", usr.uid);
-        $(".pageLogin .preloader").addClass('hidden');
-        changePage('account');
-      }).catch(function(error) {
-        // An error happened.
-        usr.delete().then(function() {
-          // User deleted.
-          showNotification("Name invalid", 2000);
-           $(".pageLogin .preloader").addClass('hidden');
-        }).catch(function(error) {
-          // An error happened.
-          $(".pageLogin .preloader").addClass('hidden');
-        });
-      });
-    }).catch(function(error) {
-      // Handle Errors here.
-      var errorCode = error.code;
-      var errorMessage = error.message;
-      showNotification(errorMessage, 5000);
-      $(".pageLogin .preloader").addClass('hidden');
-    });
-
-
+    signUp();
   }
 })
 
+$(".pageLogin .register .button").click(e => {
+    signUp();
+})
+
 $(".pageLogin .login input").keyup(e => {
   if (e.key == "Enter") {
-    $(".pageLogin .preloader").removeClass('hidden');
-    let email = $(".pageLogin .login input")[0].value;
-    let password = $(".pageLogin .login input")[1].value;
-
-    firebase.auth().signInWithEmailAndPassword(email, password).then(e => {
-      changePage('account');
-    }).catch(function(error) {
-      showNotification(error.message, 5000);
-      $(".pageLogin .preloader").addClass('hidden');
-    });
+    signIn();
   }
 })
 
-$(".pageAccount .signOut").click(e => {
+$(".pageLogin .login .button").click(e => {
+  signIn();
+})
+
+$(".signOut").click(e => {
   signOut();
 })
 
+function showSignOutButton() {
+  $(".signOut").removeClass('hidden').css("opacity",1);
+}
+
+function hideSignOutButton() {
+  $(".signOut").css("opacity",0).addClass('hidden');
+}
+
+function signIn() {
+  $(".pageLogin .preloader").removeClass('hidden');
+  let email = $(".pageLogin .login input")[0].value;
+  let password = $(".pageLogin .login input")[1].value;
+
+  firebase.auth().signInWithEmailAndPassword(email, password).then(e => {
+    changePage('account');
+  }).catch(function(error) {
+    showNotification(error.message, 5000);
+    $(".pageLogin .preloader").addClass('hidden');
+  });
+}
+
+function signUp() {
+  $(".pageLogin .preloader").removeClass('hidden');
+  let name = $(".pageLogin .register input")[0].value;
+  let email = $(".pageLogin .register input")[1].value;
+  let password = $(".pageLogin .register input")[2].value;
+  let passwordVerify = $(".pageLogin .register input")[3].value;
+
+  if (name == "") {
+    showNotification("Name is required", 3000);
+    $(".pageLogin .preloader").addClass('hidden');
+    return;
+  }
+
+  if (password != passwordVerify) {
+    showNotification("Passwords do not match", 3000);
+    $(".pageLogin .preloader").addClass('hidden');
+    return;
+  }
+
+  firebase.auth().createUserWithEmailAndPassword(email, password).then(user => {
+    // Account has been created here.
+    let usr = user.user;
+    usr.updateProfile({
+      displayName: name
+    }).then(function() {
+      // Update successful.
+      showNotification("Account created", 2000);
+      firebase.analytics().logEvent("accountCreated", usr.uid);
+      $(".pageLogin .preloader").addClass('hidden');
+      changePage('account');
+    }).catch(function(error) {
+      // An error happened.
+      usr.delete().then(function() {
+        // User deleted.
+        showNotification("Name invalid", 2000);
+         $(".pageLogin .preloader").addClass('hidden');
+      }).catch(function(error) {
+        // An error happened.
+        $(".pageLogin .preloader").addClass('hidden');
+      });
+    });
+  }).catch(function(error) {
+    // Handle Errors here.
+    var errorCode = error.code;
+    var errorMessage = error.message;
+    showNotification(errorMessage, 5000);
+    $(".pageLogin .preloader").addClass('hidden');
+  });
+
+
+}
 
 function signOut() {
   firebase.auth().signOut().then(function() {
diff --git a/public/js/script.js b/public/js/script.js
index 772c15be1..55fa4e6d1 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -20,16 +20,16 @@ function showNotification(text, time) {
   let noti = $(".notification");
   noti.text(text);
   noti.css('top', `-${noti.outerHeight()}px`);
-  noti.stop(true,true).animate({
+  noti.stop(true, true).animate({
     top: "1rem"
   }, 250, 'swing', () => {
-      noti.stop(true,true).animate({
-        opacity: 1
-      }, time, () => {
-        noti.stop(true,true).animate({
-          top: `-${noti.outerHeight()}px`
-        }, 250, 'swing');
-      })
+    noti.stop(true, true).animate({
+      opacity: 1
+    }, time, () => {
+      noti.stop(true, true).animate({
+        top: `-${noti.outerHeight()}px`
+      }, 250, 'swing');
+    })
   });
 }
 
@@ -389,7 +389,7 @@ function hideCrown() {
 function showCrown() {
   $("#result .stats .wpm .crownWrapper").animate({
     width: '1.7rem'
-  },250);
+  }, 250);
 }
 
 function showResult() {
@@ -436,7 +436,7 @@ function showResult() {
       $("#result .loginTip").removeClass('hidden');
 
       // showNotification("Sign in to save your result",3000);
-    }  
+    }
   } else {
     showNotification("Test invalid", 3000);
     firebase.analytics().logEvent('testCompletedInvalid', completedEvent);
@@ -468,8 +468,8 @@ function showResult() {
   }
 
   let mainColor = getComputedStyle(document.body).getPropertyValue('--main-color').replace(' ', '');
-  let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ','');
-  
+  let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ', '');
+
 
   wpmOverTimeChart.options.scales.xAxes[0].ticks.minor.fontColor = subColor;
   wpmOverTimeChart.options.scales.yAxes[0].ticks.minor.fontColor = subColor;
@@ -497,13 +497,13 @@ function restartTest() {
   testActive = false;
   hideLiveWpm();
 
-  $("#words").stop(true,true).animate({ opacity: 0 }, 125);
-  $("#result").stop(true,true).animate({
+  $("#words").stop(true, true).animate({ opacity: 0 }, 125);
+  $("#result").stop(true, true).animate({
     opacity: 0
   }, 125, () => {
     initWords();
     $("#result").addClass('hidden');
-    $("#words").css('opacity', 0).removeClass('hidden').stop(true,true).animate({
+    $("#words").css('opacity', 0).removeClass('hidden').stop(true, true).animate({
       opacity: 1
     }, 125, () => {
       clearIntervals();
@@ -515,7 +515,7 @@ function restartTest() {
         $("#timer")
           .css("transition", "none")
           .css("width", "0vw")
-          .stop(true,true)
+          .stop(true, true)
           .animate({ top: 0 }, 0, () => {
             $("#timer").css("transition", "1s linear");
           });
@@ -553,7 +553,7 @@ function restartTest() {
 }
 
 function focusWords() {
-  if(!$("#words").hasClass('hidden')) $("#wordsInput").focus();
+  if (!$("#words").hasClass('hidden')) $("#wordsInput").focus();
 }
 
 function changeCustomText() {
@@ -589,18 +589,21 @@ function changePage(page) {
     $(".page.pageTest").addClass('active');
     swapElements(activePage, $(".page.pageTest"), 250, focusWords);
     history.pushState('/', null, '/');
-    $('.config').css('opacity', 1);
+    showTestConfig();
+    hideSignOutButton();
   } else if (page == "about") {
     $(".page.pageAbout").addClass('active');
     swapElements(activePage, $(".page.pageAbout"), 250);
     history.pushState('about', null, 'about');
-    $('.config').css('opacity', 0);
+    hideTestConfig();
+    hideSignOutButton();
   } else if (page == "settings") {
     updateSettingsPage()
     $(".page.pageSettings").addClass('active');
     swapElements(activePage, $(".page.pageSettings"), 250);
     history.pushState('settings', null, 'settings');
-    $('.config').css('opacity', 0);
+    hideTestConfig();
+    hideSignOutButton();
   } else if (page == "account") {
     if (!firebase.auth().currentUser) {
       changePage("login");
@@ -609,16 +612,19 @@ function changePage(page) {
       swapElements(activePage, $(".page.pageAccount"), 250);
       refreshAccountPage();
       history.pushState('account', null, 'account');
-      $('.config').css('opacity', 0);
+      hideTestConfig();
+      showSignOutButton();
     }
   } else if (page == "login") {
     if (firebase.auth().currentUser != null) {
       changePage('account');
     } else {
-    $(".page.pageLogin").addClass('active');
+      $(".page.pageLogin").addClass('active');
       swapElements(activePage, $(".page.pageLogin"), 250);
       history.pushState('login', null, 'login');
-      $('.config').css('opacity', 0);
+      hideTestConfig();
+      hideSignOutButton();
+
     }
   }
   // firebase.analytics().logEvent('changedPage', {
@@ -681,7 +687,7 @@ function hideLiveWpm() {
   $("#liveWpm").css('opacity', 0);
 }
 
-function swapElements(el1, el2, totalDuration, callback = function(){ return; }) {
+function swapElements(el1, el2, totalDuration, callback = function() { return; }) {
   if (
     (el1.hasClass('hidden') && !el2.hasClass('hidden')) ||
     (!el1.hasClass('hidden') && el2.hasClass('hidden'))
@@ -698,16 +704,16 @@ function swapElements(el1, el2, totalDuration, callback = function(){ return; })
       $(el2).stop(true, true).removeClass('hidden').css('opacity', 0).animate({
         opacity: 1
       }, totalDuration / 2, () => {
-          callback();
+        callback();
       });
     });
-    
-  } else if (el1.hasClass('hidden') && el2.hasClass('hidden')){
+
+  } else if (el1.hasClass('hidden') && el2.hasClass('hidden')) {
     //both are hidden, only fade in the second
     $(el2).stop(true, true).removeClass('hidden').css('opacity', 0).animate({
       opacity: 1
     }, totalDuration, () => {
-        callback();
+      callback();
     });
   }
 
@@ -725,7 +731,7 @@ function updateAccountLoginButton() {
     // $("#menu .button.account").removeClass('hidden');
     // $("#menu .button.login").addClass('hidden');
   } else {
-    swapElements($("#menu .button.login"), $("#menu .button.account"),  250);
+    swapElements($("#menu .button.login"), $("#menu .button.account"), 250);
     // $("#menu .button.login").removeClass('hidden');
     // $("#menu .button.account").addClass('hidden');
   }
@@ -788,13 +794,13 @@ $(window).on('popstate', (e) => {
 
 });
 
-$(document).on("keypress",  "#restartTestButton", (event) => {
+$(document).on("keypress", "#restartTestButton", (event) => {
   if (event.keyCode == 32 || event.keyCode == 13) {
     restartTest();
   }
 });
 
-$(document.body).on("click",  "#restartTestButton", (event) => {
+$(document.body).on("click", "#restartTestButton", (event) => {
   restartTest();
 });
 
@@ -826,7 +832,7 @@ $(document).keypress(function(event) {
   //start the test
   if (currentInput == "" && inputHistory.length == 0) {
     if (firebase.auth().currentUser != null) {
-      firebase.analytics().logEvent('testStarted');      
+      firebase.analytics().logEvent('testStarted');
     } else {
       firebase.analytics().logEvent('testStartedNoLogin');
     }
@@ -873,7 +879,7 @@ $(document).keydown((event) => {
 
 
   //tab
-  
+
   if (event["keyCode"] == 9) {
     if (config.quickTab && $(".pageTest").hasClass("active")) {
       event.preventDefault();
@@ -1005,7 +1011,7 @@ let wpmOverTimeChart = new Chart(ctx, {
       intersect: true
     },
     scales: {
-      
+
       xAxes: [{
         ticks: {
           fontFamily: "Roboto Mono"
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 5e3136eeb..2c5f9b68e 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -33,6 +33,15 @@ function loadConfigFromCookie() {
     }
 }
 
+function showTestConfig() {
+    $("#top .config").removeClass('hidden').css("opacity",1);
+  }
+
+function hideTestConfig() {
+  $("#top .config").css("opacity",0).addClass('hidden');
+    
+}
+
 //key tips
 function setKeyTips(keyTips) {
     config.showKeyTips = keyTips;