refactor: better ui + ux for email sign in

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", {
+          this.mode = "email"
-            icon: "email",
-            duration: 0,
-          })
           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")
     },

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."
 }