[WIP] One time password branch

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;

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>

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 />

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;

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>

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>

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;