feat: sign in with email

pages/enter.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex container flex-col min-h-screen">
+    <span v-if="signingInWithEmail" class="info">{{ $t("loading") }}</span>
+    <span v-else class="info">{{ $t("waiting_for_connection") }}</span>
+    <pre v-if="error">{{ error }}</pre>
+  </div>
+</template>
+
+<script>
+import { fb } from "~/helpers/fb"
+
+export default {
+  data() {
+    return {
+      signingInWithEmail: false,
+      error: null,
+    }
+  },
+  async mounted() {
+    if (fb.isSignInWithEmailLink(window.location.href)) {
+      this.signingInWithEmail = true
+      let email = window.localStorage.getItem("emailForSignIn")
+      if (!email) {
+        email = window.prompt("Please provide your email for confirmation")
+      }
+      await fb
+        .signInWithEmailLink(email, window.location.href)
+        .then(() => {
+          window.localStorage.removeItem("emailForSignIn")
+          this.$router.push({ path: "/" })
+        })
+        .catch((error) => {
+          this.signingInWithEmail = false
+          this.error = error.message
+        })
+        .finally(() => {
+          this.signingInWithEmail = false
+        })
+    }
+  },
+}
+</script>

pages/index.vue

@@ -77,8 +77,8 @@
           </ul>
           <ul>
             <li>
-              <label for="name" class="text-sm">{{ $t("token_req_name") }}</label>
-              <input id="name" name="name" type="text" v-model="name" class="text-sm" />
+              <label for="request-name" class="text-sm">{{ $t("token_req_name") }}</label>
+              <input id="request-name" name="request-name" type="text" v-model="name" class="text-sm" />
             </li>
           </ul>
           <div label="Request Body" v-if="['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)">

pages/settings.vue

@@ -68,7 +68,7 @@
         <div v-else>
           <label>{{ $t("login_with") }}</label>
           <p>
-            <FirebaseLogin />
+            <FirebaseLogin @show-email="showEmail = true" />
           </p>
         </div>
       </div>
@@ -207,6 +207,7 @@
         </div>
       </div>
     </AppSection>
+    <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
   </div>
 </template>
 
@@ -244,6 +245,8 @@ export default Vue.extend({
 
       EXTENSIONS_ENABLED: true,
       PROXY_ENABLED: true,
+
+      showEmail: false,
     }
   },
   subscriptions() {