From be67986123ddd69b986ab3e88c75d7ffe054757a Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Fri, 11 Jun 2021 05:31:29 +0530 Subject: [PATCH 1/4] feat: sign in with email --- components/app/Header.vue | 4 +- components/firebase/Email.vue | 117 ++++++++++++++++++++++++++++++++++ components/firebase/Login.vue | 6 ++ components/http/Notes.vue | 4 +- components/smart/Modal.vue | 4 +- components/teams/index.vue | 4 +- helpers/fb.js | 14 ++++ lang/en-US.json | 3 +- pages/enter.vue | 42 ++++++++++++ pages/index.vue | 4 +- pages/settings.vue | 5 +- 11 files changed, 199 insertions(+), 8 deletions(-) create mode 100644 components/firebase/Email.vue create mode 100644 pages/enter.vue diff --git a/components/app/Header.vue b/components/app/Header.vue index e0fb80be8..175ff8d99 100644 --- a/components/app/Header.vue +++ b/components/app/Header.vue @@ -73,7 +73,7 @@ login @@ -160,6 +160,7 @@ /> + @@ -178,6 +179,7 @@ export default { showExtensions: false, showShortcuts: false, showSupport: false, + showEmail: false, navigatorShare: navigator.share, fb, } diff --git a/components/firebase/Email.vue b/components/firebase/Email.vue new file mode 100644 index 000000000..4e0bc87e9 --- /dev/null +++ b/components/firebase/Email.vue @@ -0,0 +1,117 @@ + + + diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue index 0ecce0503..3491a85d2 100644 --- a/components/firebase/Login.vue +++ b/components/firebase/Login.vue @@ -30,6 +30,12 @@ GitHub +
+ +
diff --git a/components/http/Notes.vue b/components/http/Notes.vue index 483a71868..c325a9e34 100644 --- a/components/http/Notes.vue +++ b/components/http/Notes.vue @@ -6,8 +6,9 @@

{{ $t("login_first") }}

- +
+ @@ -18,6 +19,7 @@ export default { data() { return { fb, + showEmail: false, } }, } diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue index c31966f98..b7de431f8 100644 --- a/components/smart/Modal.vue +++ b/components/smart/Modal.vue @@ -44,7 +44,7 @@ export default { @apply ease-in-out; @apply duration-150; - background-color: rgba(255, 255, 255, 0.02); + background-color: rgba(0, 0, 0, 0.32); } .modal-wrapper { @@ -66,6 +66,8 @@ export default { @apply bg-bgColor; @apply rounded-lg; @apply shadow-2xl; + @apply border; + @apply border-ttColor; max-height: calc(100vh - 128px); max-width: 640px; diff --git a/components/teams/index.vue b/components/teams/index.vue index 5c422f5c3..327bea09b 100644 --- a/components/teams/index.vue +++ b/components/teams/index.vue @@ -12,7 +12,7 @@

- +

@@ -50,6 +50,7 @@ + @@ -67,6 +68,7 @@ export default { me: {}, myTeams: [], fb, + showEmail: false, } }, apollo: { diff --git a/helpers/fb.js b/helpers/fb.js index 450ee2f66..18cf0b139 100644 --- a/helpers/fb.js +++ b/helpers/fb.js @@ -327,6 +327,20 @@ export class FirebaseInstance { return await this.app.auth().fetchSignInMethodsForEmail(email) } + async signInWithEmail(email, actionCodeSettings) { + return await this.app + .auth() + .sendSignInLinkToEmail(email, actionCodeSettings) + } + + async isSignInWithEmailLink(url) { + return await this.app.auth().isSignInWithEmailLink(url) + } + + async signInWithEmailLink(email, url) { + return await this.app.auth().signInWithEmailLink(email, url) + } + async signOutUser() { if (!this.currentUser) throw new Error("No user has logged in") diff --git a/lang/en-US.json b/lang/en-US.json index dd17f01ae..2d31176b3 100644 --- a/lang/en-US.json +++ b/lang/en-US.json @@ -332,5 +332,6 @@ "role_updated": "User role(s) updated successfully", "user_removed": "User removed successfully", "import_from_my_collections": "Import from My Collections", - "export_as_json": "Export as JSON" + "export_as_json": "Export as JSON", + "send_magic_link": "Send a magic link to sign in" } diff --git a/pages/enter.vue b/pages/enter.vue new file mode 100644 index 000000000..d3013ce85 --- /dev/null +++ b/pages/enter.vue @@ -0,0 +1,42 @@ + + + diff --git a/pages/index.vue b/pages/index.vue index 2059ca4ca..4b43a33cb 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -77,8 +77,8 @@
  • - - + +
diff --git a/pages/settings.vue b/pages/settings.vue index e65debbf3..93128d1fc 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -68,7 +68,7 @@

- +

@@ -207,6 +207,7 @@ + @@ -244,6 +245,8 @@ export default Vue.extend({ EXTENSIONS_ENABLED: true, PROXY_ENABLED: true, + + showEmail: false, } }, subscriptions() { From 9b43f9a40c438b82a8bf417cd0c63096e77b9062 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Thu, 10 Jun 2021 23:57:29 -0400 Subject: [PATCH 2/4] Close email modal on login complete --- components/firebase/Email.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/firebase/Email.vue b/components/firebase/Email.vue index 4e0bc87e9..b36cb72da 100644 --- a/components/firebase/Email.vue +++ b/components/firebase/Email.vue @@ -73,6 +73,10 @@ export default { } }, mounted() { + this.$subscribeTo(fb.currentUser$, (user) => { + if (user) this.hideModal() + }) + this._keyListener = function (e) { if (e.key === "Escape") { e.preventDefault() From 07e2cb5cd936bdb667b802993ef49542b2ce9910 Mon Sep 17 00:00:00 2001 From: Andrew Bastin Date: Fri, 11 Jun 2021 00:25:58 -0400 Subject: [PATCH 3/4] Email login toast improvements --- components/firebase/Email.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/firebase/Email.vue b/components/firebase/Email.vue index b36cb72da..563f04dfa 100644 --- a/components/firebase/Email.vue +++ b/components/firebase/Email.vue @@ -99,7 +99,8 @@ export default { .signInWithEmail(this.form.email, actionCodeSettings) .then(() => { this.$toast.success("Check your inbox", { - icon: "person", + icon: "email", + duration: 0, }) window.localStorage.setItem("emailForSignIn", this.form.email) }) @@ -114,6 +115,7 @@ export default { }) }, hideModal() { + this.$toast.clear() this.$emit("hide-modal") }, }, From 03987da05bd1189841e0e7878a863565350af2de Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Fri, 11 Jun 2021 10:29:52 +0530 Subject: [PATCH 4/4] 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 @@ -
+
-
+
+
+ + verified + +

+ {{ $t("we_sent_magic_link") }} +

+

+ {{ $t("we_sent_magic_link_description", { email: form.email }) }} +

+

{{ $t("check_your_inbox") }}

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