From cf4deaedfb7a3234dd11db10d382e443f91fc64b Mon Sep 17 00:00:00 2001
From: mh <stateandbehavior@gmail.com>
Date: Mon, 30 Mar 2020 19:51:39 -0700
Subject: [PATCH 1/2] Move Switch Account to Main Login Screen

---
 src/css/style.css |  5 +++++
 src/index.html    | 37 +++++++++++++++++++------------------
 src/js/app.js     | 19 ++++++++++++++-----
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 8725322d..58240ec8 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -19,6 +19,7 @@ body {
 
 a {
   text-decoration: none;
+  cursor: pointer;
 }
 
 a:hover {
@@ -162,6 +163,10 @@ header #back-button {
   min-width: 0;
 }
 
+.start-hidden {
+  display: none;
+}
+
 .msg {
   display: flex;
   flex-direction: column;
diff --git a/src/index.html b/src/index.html
index 880bc5f6..3751922f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -63,12 +63,26 @@
     <section id="login">
       <img style="width: 86px" src="img/android-chrome-192x192.png" alt="Iris">
       <h1>Iris Messenger</h1>
-      <form id="login-form" autocomplete="off">
-        <input autofocus autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off" id="login-form-name" type="text" name="name" placeholder="What's your name?">
-        <p><button type="submit">Go</button></p>
-      </form>
+      <div id="login-form" autocomplete="off">
+        <div id="create-account">
+          <input autofocus autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off" id="login-form-name" type="text" name="name" placeholder="What's your name?">
+          <p><button id="sign-up" type="input">Sign Up</button></p>
+          <br>
+          <p>Already have an account? <a id="show-switch-account">Log in here!</a></p>
+        </div>
+      </div>
+      <div id="switch-account" class="start-hidden">
+        <p>Don't have an account? <a id="show-create-account">Create account!</a></p>
+        <input id="paste-privkey" placeholder="Paste a private key">
+        <p>
+          <button id="startButton" onclick="startPrivKeyQRScanner()">Scan private key QR code</button>
+        </p>
+        </p>
+          <video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;"></video>
+        </p>
+      </div>
     </section>
-
+        
     <section class="sidebar hidden-xs">
       <div class="user-info">
         <div id="my-identicon"></div>
@@ -175,9 +189,6 @@
         <p>
           <button class="show-logout-confirmation">Log out</button>
         </p>
-        <p>
-          <button class="show-switch-account">Switch account</button>
-        </p>
         <h4>Private key</h4>
         <p>
           <b>DANGER!</b> Private key is used to <b>log in to your account</b>. Don't give or show your private key to anyone else!
@@ -255,16 +266,6 @@
         </p>
       </div>
 
-      <!-- Login view -->
-      <div class="main-view" id="switch-account">
-        <input id="paste-privkey" placeholder="Paste a private key">
-        <p>
-          <button id="startButton" onclick="startPrivKeyQRScanner()">Scan private key QR code</button>
-        </p>
-        </p>
-          <video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;"></video>
-        </p>
-      </div>
 
       <!-- Profile view -->
       <div class="main-view" id="profile">
diff --git a/src/js/app.js b/src/js/app.js
index f057af8f..e8a130c2 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -130,8 +130,7 @@ async function addPeer(peer) {
 function newUserLogin() {
   $('#login').css('display', 'flex');
   $('#login-form-name').focus();
-  $('#login-form').submit(e => {
-    e.preventDefault();
+  $('#sign-up').click(function() {
     var name = $('#login-form-name').val();
     if (name.length) {
       $('#login').hide();
@@ -382,6 +381,7 @@ function resetView() {
   $("#header-content").empty();
   $("#header-content").css({cursor: null});
   $('#profile-page-qr').empty();
+  $('#switch-account').show();
 }
 
 function showMenu(show = true) {
@@ -484,11 +484,17 @@ function showLogoutConfirmation() {
   $('#logout-confirmation').show();
 }
 
-$('.show-switch-account').click(showSwitchAccount);
+$('#show-switch-account').click(showSwitchAccount);
 function showSwitchAccount() {
   resetView();
-  $('#header-content').text('Switch account');
-  $('#switch-account').show();
+  $('#create-account').hide();
+  $('.start-hidden').show();
+}
+
+$('#show-create-account').click(showCreateAccount);
+function showCreateAccount() {
+  $('#create-account').show();
+  $('#switch-account').hide();
 }
 
 $('#switch-account input').on('input', (event) => {
@@ -500,6 +506,9 @@ $('#switch-account input').on('input', (event) => {
     $(event.target).val('');
   } catch (e) {
     console.error('Login with key', val, 'failed:', e);
+    $('#login').show();
+  } finally {
+    $('#login').hide();
   }
 });
 

From ca1d5beee3478e22e5aea1411e474072a845485f Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 2 Apr 2020 14:14:31 +0300
Subject: [PATCH 2/2] some changes to existing account login

---
 src/css/style.css | 22 ++++++++++------------
 src/index.html    | 45 ++++++++++++++++++++++++---------------------
 src/js/app.js     | 28 +++++++++++++++++++---------
 3 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 58240ec8..02fbdbae 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -52,10 +52,6 @@ img {
   max-height: 80vh;
 }
 
-.hidden {
-  display: none !important;
-}
-
 @media (max-width: 575px) {
   .hidden-xs {
     display: none !important;
@@ -92,6 +88,10 @@ img {
   }
 }
 
+.hidden {
+  display: none;
+}
+
 .chat {
   display: flex;
   flex-direction: row;
@@ -163,10 +163,6 @@ header #back-button {
   min-width: 0;
 }
 
-.start-hidden {
-  display: none;
-}
-
 .msg {
   display: flex;
   flex-direction: column;
@@ -314,10 +310,8 @@ header #back-button {
 }
 
 #login {
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  padding: 15px;
+  display: flex;
   overflow-y: scroll;
   color: white;
   position: fixed;
@@ -327,6 +321,10 @@ header #back-button {
   bottom: 0;
   background-color: var(--login-background);
   z-index: 1000;
+}
+
+#login-content {
+  margin: auto;
   text-align: center;
 }
 
diff --git a/src/index.html b/src/index.html
index 3751922f..d2194309 100644
--- a/src/index.html
+++ b/src/index.html
@@ -60,29 +60,31 @@
 
 <body>
   <div class="chat">
-    <section id="login">
-      <img style="width: 86px" src="img/android-chrome-192x192.png" alt="Iris">
-      <h1>Iris Messenger</h1>
-      <div id="login-form" autocomplete="off">
-        <div id="create-account">
-          <input autofocus autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off" id="login-form-name" type="text" name="name" placeholder="What's your name?">
-          <p><button id="sign-up" type="input">Sign Up</button></p>
-          <br>
-          <p>Already have an account? <a id="show-switch-account">Log in here!</a></p>
+    <section id="login" class="hidden">
+      <div id="login-content">
+        <div id="login-form" autocomplete="off">
+          <div id="create-account">
+            <img style="width: 86px" src="img/android-chrome-192x192.png" alt="Iris">
+            <h1>Iris Messenger</h1>
+            <input autofocus autocomplete="off" autocorrect="off" autocapitalize="sentences" spellcheck="off" id="login-form-name" type="text" name="name" placeholder="What's your name?">
+            <p><button id="sign-up" type="input">Go</button></p>
+            <br>
+            <p><a id="show-existing-account-login">Already have an account?</a></p>
+          </div>
+        </div>
+        <div id="existing-account-login" class="hidden">
+          <p><a id="show-create-account">&lt; Back</a></p>
+          <input id="paste-privkey" placeholder="Paste a private key">
+          <p>
+            <button id="scan-privkey-btn">Scan private key QR code</button>
+          </p>
+          </p>
+            <video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;" class="hidden"></video>
+          </p>
         </div>
       </div>
-      <div id="switch-account" class="start-hidden">
-        <p>Don't have an account? <a id="show-create-account">Create account!</a></p>
-        <input id="paste-privkey" placeholder="Paste a private key">
-        <p>
-          <button id="startButton" onclick="startPrivKeyQRScanner()">Scan private key QR code</button>
-        </p>
-        </p>
-          <video id="privkey-qr-video" width="320" height="320" style="object-fit: cover;"></video>
-        </p>
-      </div>
     </section>
-        
+
     <section class="sidebar hidden-xs">
       <div class="user-info">
         <div id="my-identicon"></div>
@@ -200,7 +202,8 @@
         <p>
           <button id="show-private-key-qr">Show private key QR code</button>
         </p>
-        <h4>Peers</h4>
+        <hr/>
+        <h3>Peers</h3>
         <div id="peers" class="flex-table">
           <div class="flex-row" id="add-peer-row">
             <div class="flex-cell">
diff --git a/src/js/app.js b/src/js/app.js
index e8a130c2..49e650dd 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -128,7 +128,7 @@ async function addPeer(peer) {
 }
 
 function newUserLogin() {
-  $('#login').css('display', 'flex');
+  $('#login').show();
   $('#login-form-name').focus();
   $('#sign-up').click(function() {
     var name = $('#login-form-name').val();
@@ -147,6 +147,7 @@ function login(k) {
   chats = {};
   key = k;
   localStorage.setItem('chatKeyPair', JSON.stringify(k));
+  $('#login').hide();
   iris.Chat.initUser(gun, key);
   $('#my-chat-links').empty();
   iris.Chat.getMyChatLinks(gun, key, undefined, chatLink => {
@@ -381,7 +382,6 @@ function resetView() {
   $("#header-content").empty();
   $("#header-content").css({cursor: null});
   $('#profile-page-qr').empty();
-  $('#switch-account').show();
 }
 
 function showMenu(show = true) {
@@ -419,6 +419,17 @@ function getUserChatLink(pub) {
   return 'https://iris.to/?chatWith=' + pub;
 }
 
+var scanPrivKeyBtn = $('#scan-privkey-btn');
+scanPrivKeyBtn.click(() => {
+  if ($('#privkey-qr-video:visible').length) {
+    $('#privkey-qr-video').hide();
+    cleanupScanner();
+  } else {
+    $('#privkey-qr-video').show();
+    startPrivKeyQRScanner();
+  }
+});
+
 $('#scan-chatlink-qr-btn').click(() => {
   if ($('#chatlink-qr-video:visible').length) {
     $('#chatlink-qr-video').hide();
@@ -484,20 +495,22 @@ function showLogoutConfirmation() {
   $('#logout-confirmation').show();
 }
 
-$('#show-switch-account').click(showSwitchAccount);
+$('#show-existing-account-login').click(showSwitchAccount);
 function showSwitchAccount() {
   resetView();
   $('#create-account').hide();
-  $('.start-hidden').show();
+  $('#existing-account-login').show();
 }
 
 $('#show-create-account').click(showCreateAccount);
 function showCreateAccount() {
+  $('#privkey-qr-video').hide();
   $('#create-account').show();
-  $('#switch-account').hide();
+  $('#existing-account-login').hide();
+  cleanupScanner();
 }
 
-$('#switch-account input').on('input', (event) => {
+$('#existing-account-login input').on('input', (event) => {
   var val = $(event.target).val();
   if (!val.length) { return; }
   try {
@@ -506,9 +519,6 @@ $('#switch-account input').on('input', (event) => {
     $(event.target).val('');
   } catch (e) {
     console.error('Login with key', val, 'failed:', e);
-    $('#login').show();
-  } finally {
-    $('#login').hide();
   }
 });