From 03987da05bd1189841e0e7878a863565350af2de Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 11 Jun 2021 10:29:52 +0530
Subject: [PATCH] refactor: better ui + ux for email sign in

---
 components/firebase/Email.vue | 25 +++++++++++++++++++------
 lang/en-US.json               |  6 +++++-
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/components/firebase/Email.vue b/components/firebase/Email.vue
index 563f04dfa..5b1bbde75 100644
--- a/components/firebase/Email.vue
+++ b/components/firebase/Email.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div slot="body" class="flex flex-col">
+    <div v-if="mode === 'sign-in'" slot="body" class="flex flex-col">
       <label for="email"> E-mail </label>
       <input
         id="email"
@@ -25,7 +25,21 @@
         @keyup.enter="signInWithEmail"
       />
     </div>
-    <div slot="footer">
+    <div v-else slot="body" class="flex flex-col items-center">
+      <div class="flex justify-center max-w-md p-4 items-center flex-col">
+        <i class="material-icons text-acColor" style="font-size: 64px">
+          verified
+        </i>
+        <h3 class="font-bold my-2 text-center text-lg">
+          {{ $t("we_sent_magic_link") }}
+        </h3>
+        <p class="text-center">
+          {{ $t("we_sent_magic_link_description", { email: form.email }) }}
+        </p>
+        <p class="info">{{ $t("check_your_inbox") }}</p>
+      </div>
+    </div>
+    <div v-if="mode === 'sign-in'" slot="footer">
       <div class="row-wrapper">
         <span></span>
         <span>
@@ -70,6 +84,7 @@ export default {
       signingInWithEmail: false,
       emailRegex:
         /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
+      mode: "sign-in",
     }
   },
   mounted() {
@@ -98,10 +113,7 @@ export default {
       await fb
         .signInWithEmail(this.form.email, actionCodeSettings)
         .then(() => {
-          this.$toast.success("Check your inbox", {
-            icon: "email",
-            duration: 0,
-          })
+          this.mode = "email"
           window.localStorage.setItem("emailForSignIn", this.form.email)
         })
         .catch((error) => {
@@ -115,6 +127,7 @@ export default {
         })
     },
     hideModal() {
+      this.mode = "sign-in"
       this.$toast.clear()
       this.$emit("hide-modal")
     },
diff --git a/lang/en-US.json b/lang/en-US.json
index 2d31176b3..34bac43bd 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -333,5 +333,9 @@
   "user_removed": "User removed successfully",
   "import_from_my_collections": "Import from My Collections",
   "export_as_json": "Export as JSON",
-  "send_magic_link": "Send a magic link to sign in"
+  "send_magic_link": "Send a magic link to sign in",
+  "check_your_inbox": "Check your inbox.",
+  "you_can_dismiss_this_modal": "You can dismiss this ",
+  "we_sent_magic_link": "We sent you a magic link!",
+  "we_sent_magic_link_description": "We sent an email to {email}. It contains a magic link that’ll log you in."
 }