From d4ebc6ae345a12eb5d415d657e560ae38d389454 Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Tue, 28 Nov 2023 10:21:29 -0800
Subject: [PATCH 01/12] ForgotPasswordButton.vue: reformats for consistency,
 updates tabindex

---
 src/pages/components/buttons/ForgotPasswordButton.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/components/buttons/ForgotPasswordButton.vue b/src/pages/components/buttons/ForgotPasswordButton.vue
index 1b77796..d610bd7 100644
--- a/src/pages/components/buttons/ForgotPasswordButton.vue
+++ b/src/pages/components/buttons/ForgotPasswordButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="login-page-submit-button-container">
         <button class="secondary-hollow-button" @click="submitForgotPassword" :class="computedClass"
-            :disabled="forgotPasswordDisabled" tabindex="99">
+            :disabled="forgotPasswordDisabled" tabindex="10">
             {{ $i18n(forgotPasswordButtonText) }}
         </button>
         <br />
@@ -12,7 +12,6 @@
 
 <script>
 import ErrorMessage from '../ErrorMessage.vue';
-import TextComponent from '../TextComponent.vue';
 
 import axios from 'axios';
 import { baseUrl, extractFromError, formatErrorMessages, submitButtonLabels } from '../../../utilities.js';
@@ -20,8 +19,8 @@ import { baseUrl, extractFromError, formatErrorMessages, submitButtonLabels } fr
 export default {
     name: "ForgotPasswordButton",
     props: {
+        email: { type: String, default: '' },
         forgotPasswordDisabled: { type: Boolean, required: true },
-        email: { type: String, default: '' }
     },
     components: {
         ErrorMessage,

From efaf9ef57b35172cda38e933a8bcef41a7a43073 Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:47:27 -0800
Subject: [PATCH 02/12] utilities.js: adds "reset" option for button text
 utility function

---
 src/utilities.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/utilities.js b/src/utilities.js
index 8395d5a..337675d 100644
--- a/src/utilities.js
+++ b/src/utilities.js
@@ -129,11 +129,13 @@ export function setChromeStorage(storageObj) {
  * @returns {string} A translation key string to show on the submit button
  */
 export function submitButtonLabels(
-    { errorArr, errorMsg = 'error', initialMsg, submitted, submittedMsg = 'success', submitting, submittingMsg = 'waiting', status }
+    { errorArr, errorMsg = 'error', initialMsg, reset = false, submitted, submittedMsg = 'success', submitting, submittingMsg = 'waiting', status }
 ) {
     let result = '';
 
-    if (submitted) {
+    if (reset) {
+        result = initialMsg;
+    } else if (submitted) {
         result = submittedMsg;
     } else if (submitting) {
         result = submittingMsg;

From b5f5327c31faf9b4c23a3fd208f29376568aeddd Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:48:03 -0800
Subject: [PATCH 03/12] ForgotPassword.vue: extracts forgot password UI into
 its own component

---
 src/pages/components/ForgotPassword.vue | 73 +++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/pages/components/ForgotPassword.vue

diff --git a/src/pages/components/ForgotPassword.vue b/src/pages/components/ForgotPassword.vue
new file mode 100644
index 0000000..2227e29
--- /dev/null
+++ b/src/pages/components/ForgotPassword.vue
@@ -0,0 +1,73 @@
+<template>
+    <div id="forgot-password-container">
+        <TextComponent :msg="$i18n('forgot_password')" id="forgot-password-header" bold />
+        <br />
+        <br />
+        <EmailInput placeholder="enter_email_to_change_password" @currentEmail="getEmail" tabindex="8"
+            @emailHasError="getEmailHasError" />
+        <ForgotPasswordButton v-bind="{ email, fadeLoginPage, forgotPasswordDisabled, resetButtonText }" />
+    </div>
+</template>
+
+<script>
+import EmailInput from "./inputs/EmailInput.vue";
+import ForgotPasswordButton from "./buttons/ForgotPasswordButton.vue";
+import TextComponent from "./TextComponent.vue";
+
+export default {
+    name: 'ForgotPassword',
+    props: {
+        checkState: { type: Function, required: true },
+        fadeLoginPage: { type: Function, required: true },
+        resetButtonText: { type: Boolean, required: true },
+        selectPage: { type: Function, required: true }
+    },
+    components: {
+        EmailInput,
+        ForgotPasswordButton,
+        TextComponent
+    },
+    data() {
+        return {
+            email: '',
+            emailHasError: ''
+        }
+    },
+    computed: {
+        forgotPasswordDisabled() {
+            return !this.email || this.emailHasError;
+        }
+    },
+    methods: {
+        getEmail(email) {
+            this.email = email;
+        },
+        getEmailHasError(errorBool) {
+            this.emailHasError = errorBool;
+        }
+    }
+}
+</script>
+
+<style>
+input:focus {
+    border: 3px solid #3b8de8;
+    outline: none;
+}
+
+#forgot-password-container {
+    margin-top: 4rem;
+}
+
+#forgot-password-header {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    display: block;
+}
+
+.disabled {
+    border: 1px solid #d0d4d9;
+    opacity: 0.3;
+    pointer-events: none;
+}
+</style>

From 1d5e7d29739314d2d05fc4d2aa158bbe94a7ac8f Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:48:46 -0800
Subject: [PATCH 04/12] NewPasswordModal.vue: adds modal for entering new
 password

---
 src/pages/components/NewPasswordModal.vue | 98 +++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 src/pages/components/NewPasswordModal.vue

diff --git a/src/pages/components/NewPasswordModal.vue b/src/pages/components/NewPasswordModal.vue
new file mode 100644
index 0000000..504a320
--- /dev/null
+++ b/src/pages/components/NewPasswordModal.vue
@@ -0,0 +1,98 @@
+<template>
+    <div id="modal-overlay" @keydown.esc="doneAction">
+        <div id="modal-container" style="bottom: 40%">
+            <!-- <div id="modal-container" :style="active ? 'bottom: 40%' : 'display: none'"> -->
+            <!-- TODO translate this -->
+            <TextComponent msg="We emailed you a one-time password. Please enter it below." /> <br />
+            <br />
+            <div id="modal-password-input">
+                <SinglePasswordInput inputId='new-password' @currentPassword="getPassword"
+                    @passwordHasError="getPasswordHasError" tabindex="12" />
+            </div>
+            <div tabindex="14">
+                <LoginButton v-bind="{ checkState, loginDisabled, password, selectPage, username }"
+                    style="margin-top: 6.5rem;" />
+            </div>
+            <br />
+            <button @click="doneAction" class="secondary-hollow-button" tabindex="16">
+                {{ $i18n('cancel') }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import LoginButton from "./buttons/LoginButton.vue";
+import SinglePasswordInput from "./inputs/SinglePasswordInput.vue";
+import TextComponent from './TextComponent.vue';
+
+export default {
+    name: "WalletInfoModal",
+    props: {
+        checkState: { type: Function, required: true },
+        fadeLoginPage: { type: Function, required: true },
+        selectPage: { type: Function, required: true },
+        username: { type: String, default: '' }
+    },
+    components: {
+        LoginButton,
+        SinglePasswordInput,
+        TextComponent
+    },
+    data() {
+        return {
+            password: '',
+            passwordHasError: false
+        }
+    },
+    mounted() {
+        const passwordInput = document.getElementById('new-password');
+        console.log('passwordInput', passwordInput);
+
+        passwordInput.focus();
+    },
+    computed: {
+        loginDisabled() {
+            const { password, passwordHasError } = this;
+
+            return !password || passwordHasError;
+        },
+    },
+    methods: {
+        doneAction() {
+            this.password = '';
+
+            this.fadeLoginPage(false);
+        },
+        getPassword(password) {
+            this.password = password;
+        },
+        getPasswordHasError(errorBool) {
+            this.passwordHasError = errorBool;
+        }
+    }
+};
+</script>
+
+<style>
+#modal-container {
+    background-color: #0F0818;
+    border-radius: 12px;
+    color: #FFFFFF;
+    padding: 50px;
+    position: fixed;
+    width: 400px;
+    z-index: 2147483643 !important;
+}
+
+#modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+</style>

From a81f7e0dce44cdbe91412547182148870ec40b6b Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:49:22 -0800
Subject: [PATCH 05/12] LoginPage.vue: refactored to use new forgot pw
 component and modal

---
 src/pages/LoginPage.vue | 71 ++++++++++-------------------------------
 1 file changed, 17 insertions(+), 54 deletions(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 67116ad..a53f1db 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -8,31 +8,21 @@
     <br />
     <UsernameInput @currentUsername="getUsername" @usernameHasError="getUsernameHasError" tabindex="2" focus />
     <SinglePasswordInput @currentPassword="getPassword" @passwordHasError="getPasswordHasError" tabindex="4" />
-    <LoginButton v-bind="{ checkState, loginDisabled, password, selectPage, username }" style="margin-top: 0.75rem;" />
+    <div tabindex="6">
+        <LoginButton v-bind="{ checkState, loginDisabled, password, selectPage, username }" style="margin-top: 0.75rem;" />
+    </div>
     <br />
-    <br />
-    <!-- TODO uncomment when available -->
-    <!-- Forgot username / password flow -->
-    <!-- <div id="forgot-password-container">
-        <TextComponent :msg="$i18n('forgot_password')" id="forgot-password-header" bold />
-        <br />
-        <br />
-        <EmailInput placeholder="enter_email_to_change_password" @currentEmail="getEmail" tabindex="8"
-            @emailHasError="getEmailHasError" />
-        <ForgotPasswordButton :forgotPasswordDisabled="forgotPasswordDisabled" :email="email" style="margin-top: 0.75rem;"
-            tabindex="10" />
-    </div> -->
+    <ForgotPassword v-bind="{ checkState, fadeLoginPage, resetButtonText, selectPage }" />
+    <NewPasswordModal v-if="active" v-bind="{ checkState, fadeLoginPage, selectPage, username }" />
 </template>
 
 <script>
-import EmailInput from "./components/inputs/EmailInput.vue";
-import ErrorMessage from "./components/ErrorMessage.vue";
-import ForgotPasswordButton from "./components/buttons/ForgotPasswordButton.vue";
+import ForgotPassword from "./components/ForgotPassword.vue";
 import LoginButton from "./components/buttons/LoginButton.vue";
+import NewPasswordModal from "./components/NewPasswordModal.vue";
 import PageBanner from "./components/PageBanner.vue";
 import RegisterLine from './components/RegisterLine.vue';
 import SinglePasswordInput from "./components/inputs/SinglePasswordInput.vue";
-import TextComponent from "./components/TextComponent.vue";
 import UsernameInput from "./components/inputs/UsernameInput.vue";
 import WarningTextBox from "./components/WarningTextBox.vue";
 
@@ -44,31 +34,26 @@ export default {
         urlToStake: { type: String, default: '' }
     },
     components: {
-        EmailInput,
-        ErrorMessage,
-        ForgotPasswordButton,
+        ForgotPassword,
         LoginButton,
+        NewPasswordModal,
         PageBanner,
         RegisterLine,
         SinglePasswordInput,
-        TextComponent,
         UsernameInput,
         WarningTextBox
     },
     data() {
         return {
-            email: '',
-            emailHasError: '',
+            active: false,
             password: '',
             passwordHasError: false,
+            resetButtonText: false,
             username: '',
             usernameHasError: ''
         };
     },
     computed: {
-        forgotPasswordDisabled() {
-            return !this.email || this.emailHasError;
-        },
         loginDisabled() {
             const { password, passwordHasError, username, usernameHasError } = this;
 
@@ -79,11 +64,12 @@ export default {
         }
     },
     methods: {
-        getEmail(email) {
-            this.email = email;
-        },
-        getEmailHasError(errorBool) {
-            this.emailHasError = errorBool;
+        fadeLoginPage(bool) {
+            this.active = bool;
+
+            if (bool === true) {
+                this.resetButtonText = true;
+            }
         },
         getPassword(password) {
             this.password = password;
@@ -107,31 +93,8 @@ input:focus {
     outline: none;
 }
 
-#forgot-password-container {
-    bottom: 30vh;
-    position: absolute;
-}
-
-#forgot-password-header {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-    display: block;
-}
-
 .login-page-submit-button-container {
     color: #FFFFFF;
     width: 400px;
 }
-
-.disabled {
-    border: 1px solid #d0d4d9;
-    opacity: 0.3;
-    pointer-events: none;
-}
-
-.login-active {
-    border: none;
-    color: #963cf5;
-    pointer-events: initial;
-}
 </style>

From 0d7112587fc012ec5d5afd4e17a3a72807fce73a Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:50:02 -0800
Subject: [PATCH 06/12] NoAccountPage.vue: adds missing space

---
 src/pages/NoAccountPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/NoAccountPage.vue b/src/pages/NoAccountPage.vue
index 0d61f87..ec12935 100644
--- a/src/pages/NoAccountPage.vue
+++ b/src/pages/NoAccountPage.vue
@@ -10,7 +10,7 @@
     </WarningTextBox>
     <br />
     <div>
-        <TextComponent class="left-label" :msg="$i18n('ilock_earned')" bold />
+        <TextComponent class="left-label" :msg="$i18n('ilock_earned')" bold />&nbsp;
         <TextComponent msg="0" bigmono /> <br />
         <br />
         <br />

From f56a480c6be6cc21aeb2049d7357dc7ec12f76ec Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:50:52 -0800
Subject: [PATCH 07/12] DeleteUserModal.vue: renames ID to be more descriptive

---
 src/pages/components/DeleteUserModal.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/components/DeleteUserModal.vue b/src/pages/components/DeleteUserModal.vue
index 0fb586f..4de5f87 100644
--- a/src/pages/components/DeleteUserModal.vue
+++ b/src/pages/components/DeleteUserModal.vue
@@ -9,7 +9,7 @@
             <TextComponent :msg="$i18n('confirm_are_you_sure')" id="delete-user-confirm-text" /><br />
             <TextComponent :msg="$i18n('warning_account_will_be_deleted')" /><br />
             <TextComponent :msg="$i18n('warning_ilock_will_be_lost')" /><br />
-            <div id="delete-user-password-input">
+            <div id="modal-password-input">
                 <SinglePasswordInput placeholder="enter_password_to_delete_account" @currentPassword="getPassword"
                     @passwordHasError="getPasswordHasError" />
             </div>
@@ -124,11 +124,6 @@ export default {
     background-color: #261142;
 }
 
-#delete-user-password-input {
-    margin-top: 2rem;
-    position: relative;
-}
-
 #delete-user-toggle-button {
     background-color: #0F0818;
     border: none;

From b375d5c5b63803a25ab2dd8690f66ad8b0f13945 Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:51:11 -0800
Subject: [PATCH 08/12] App.vue: moves CSS to parent

---
 src/App.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 9429b64..87308a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -195,6 +195,11 @@ input {
   width: 100%;
 }
 
+#modal-password-input {
+  margin-top: 2rem;
+  position: absolute;
+}
+
 #view-container {
   background-color: #0F0818;
   float: right;

From d3067b0b5d41a0f51e159fe1ec9439f5e6d4fe30 Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:51:34 -0800
Subject: [PATCH 09/12] =?UTF-8?q?WalletInfoModal.vue:=C2=A0removes=20disus?=
 =?UTF-8?q?ed=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/components/WalletInfoModal.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pages/components/WalletInfoModal.vue b/src/pages/components/WalletInfoModal.vue
index 78944fa..167e2a1 100644
--- a/src/pages/components/WalletInfoModal.vue
+++ b/src/pages/components/WalletInfoModal.vue
@@ -200,11 +200,6 @@ export default {
     text-align: center;
 }
 
-#delete-user-password-input {
-    margin-top: 1rem;
-    position: absolute;
-}
-
 #delete-user-toggle-button {
     background-color: #0F0818;
     border: none;

From 15899886de5ba75fd23883b9c76fb5123525f5be Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:52:02 -0800
Subject: [PATCH 10/12] ForgotPasswordButton.vue: refactored to work with new
 modal

---
 .../buttons/ForgotPasswordButton.vue          | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/pages/components/buttons/ForgotPasswordButton.vue b/src/pages/components/buttons/ForgotPasswordButton.vue
index d610bd7..a5fe101 100644
--- a/src/pages/components/buttons/ForgotPasswordButton.vue
+++ b/src/pages/components/buttons/ForgotPasswordButton.vue
@@ -20,18 +20,19 @@ export default {
     name: "ForgotPasswordButton",
     props: {
         email: { type: String, default: '' },
+        fadeLoginPage: { type: Function, required: true },
         forgotPasswordDisabled: { type: Boolean, required: true },
+        resetButtonText: { type: Boolean, required: true }
     },
     components: {
-        ErrorMessage,
-        TextComponent
+        ErrorMessage
     },
     data() {
         return {
             errorArr: [],
+            status: 200,
             submitted: false,
-            submitting: false,
-            status: 200
+            submitting: false
         }
     },
     computed: {
@@ -47,9 +48,9 @@ export default {
             return result;
         },
         forgotPasswordButtonText() {
-            const { errorArr, submitted, submitting, status } = this;
+            const { errorArr, resetButtonText, submitted, submitting, status } = this;
 
-            return submitButtonLabels({ errorArr, initialMsg: 'change_password', submitted, submitting, status });
+            return submitButtonLabels({ errorArr, initialMsg: 'change_password', reset: resetButtonText, submitted, submitting, status });
         }
     },
     methods: {
@@ -64,6 +65,8 @@ export default {
                     this.status = status;
                     this.submitted = true;
                     this.submitting = false;
+
+                    this.fadeLoginPage(true);
                 })
                 .catch((error) => {
                     const { errors, status } = extractFromError(error);
@@ -74,10 +77,14 @@ export default {
                     this.status = status;
                     this.submitted = false;
                     this.submitting = false;
-                });
+                })
+                // TODO delete this 
+                .finally(() => {
+                    this.fadeLoginPage(true)
+                })
         }
     }
-};
+}
 </script>
 
 <style></style>

From c103ba3a96261da1a11d10924ef7cc6b069f51bc Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:52:34 -0800
Subject: [PATCH 11/12] LoginButton.vue: small refactors

---
 src/pages/components/buttons/LoginButton.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/components/buttons/LoginButton.vue b/src/pages/components/buttons/LoginButton.vue
index b5c9828..775afc6 100644
--- a/src/pages/components/buttons/LoginButton.vue
+++ b/src/pages/components/buttons/LoginButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="login-page-submit-button-container">
         <button class='submit-button' @click="submitLogin" :class="computedClass" :disabled="disabled"
-            style="margin-bottom: 1rem;" tabindex="6">
+            style="margin-bottom: 1rem;">
             {{ $i18n(loginButtonText) }}
         </button>
         <br />
@@ -114,4 +114,10 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.login-active {
+    border: none;
+    color: #963cf5;
+    pointer-events: initial;
+}
+</style>

From 512f908ae76b065b4d9b87325de69179d709433c Mon Sep 17 00:00:00 2001
From: Dan TS <dan@interlock.network>
Date: Thu, 30 Nov 2023 16:53:08 -0800
Subject: [PATCH 12/12] SinglePasswordInput.vue: refactored to accept custom
 IDs

---
 src/pages/components/inputs/SinglePasswordInput.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/components/inputs/SinglePasswordInput.vue b/src/pages/components/inputs/SinglePasswordInput.vue
index a5304b0..51e1c95 100644
--- a/src/pages/components/inputs/SinglePasswordInput.vue
+++ b/src/pages/components/inputs/SinglePasswordInput.vue
@@ -1,6 +1,6 @@
 <template>
-    <input id="login-password" class="password-input" @input="validatePassword" :type="passwordInputType"
-        v-model.trim="password" :placeholder="$i18n(placeholder)" :tabindex="tabindex" :class="passwordInputClass" />
+    <input :id="inputId" class="password-input" @input="validatePassword" :type="passwordInputType" v-model.trim="password"
+        :placeholder="$i18n(placeholder)" :tabindex="tabindex" :class="passwordInputClass" />
     <button @click="togglePasswordInputType" id="show-password-toggle-button" :tabindex="showButtonIndex" :style="style">
         {{ passwordInputType === 'password' ? $i18n('password_show') : $i18n('password_hide') }}
     </button>
@@ -18,6 +18,7 @@ export default {
         ErrorMessage
     },
     props: {
+        inputId: { type: String, default: 'login-password' },
         modal: { type: Boolean, default: false },
         placeholder: { type: String, default: 'password' },
         tabindex: { type: Number, default: 4 }