btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

♻️ Refactoring code

Browse Source
This commit is contained in:
Liyas Thomas
2020-03-05 06:48:10 +05:30
parent da628ca26d
commit 0f2686a102
7 changed files with 147 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/firebase/login.vue
View File

@@ -1,43 +1,38 @@
<template> <template>
<v-popover> <div>
<button class="icon" v-tooltip="$t('login_with')"> <div>
<i class="material-icons">vpn_key</i> <button class="icon" @click="signInWithGoogle" v-close-popover>
</button> <svg
<template slot="popover"> xmlns="http://www.w3.org/2000/svg"
<div> width="24"
<button class="icon" @click="signInWithGoogle" v-close-popover> height="24"
<svg viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" class="material-icons"
width="24" >
height="24" <path
viewBox="0 0 24 24" d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
class="material-icons" />
> </svg>
<path <span>Google</span>
d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z" </button>
/> </div>
</svg> <div>
<span>Google</span> <button class="icon" @click="signInWithGithub" v-close-popover>
</button> <svg
</div> xmlns="http://www.w3.org/2000/svg"
<div> width="24"
<button class="icon" @click="signInWithGithub" v-close-popover> height="24"
<svg viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" class="material-icons"
width="24" >
height="24" <path
viewBox="0 0 24 24" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
class="material-icons" />
> </svg>
<path <span>GitHub</span>
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" </button>
/> </div>
</svg> </div>
<span>GitHub</span>
</button>
</div>
</template>
</v-popover>
</template> </template>
<script> <script>

38
components/firebase/logout.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div>
<button class="icon" @click="logout" v-close-popover>
<i class="material-icons">exit_to_app</i>
<span>{{ $t("logout") }}</span>
</button>
</div>
</template>
<script>
import firebase from "firebase/app"
import { fb } from "../../functions/fb"
export default {
data() {
return {
fb,
}
},
methods: {
logout() {
fb.currentUser = null
const self = this
firebase
.auth()
.signOut()
.catch(err => {
self.$toast.show(err.message || err, {
icon: "error",
})
})
self.$toast.info(this.$t("logged_out"), {
icon: "vpn_key",
})
},
},
}
</script>

95
components/layout/header.vue
View File

@@ -35,46 +35,48 @@
> >
<i class="material-icons">offline_bolt</i> <i class="material-icons">offline_bolt</i>
</button> </button>
<login v-if="fb.currentUser === null" /> <v-popover v-if="fb.currentUser === null">
<span v-else> <button class="icon" v-tooltip="$t('login_with')">
<v-popover> <i class="material-icons">vpn_key</i>
<button </button>
class="icon" <template slot="popover">
v-tooltip=" <login />
(fb.currentUser.displayName || '<label><i>Name not found</i></label>') + </template>
'<br>' + </v-popover>
(fb.currentUser.email || '<label><i>Email not found</i></label>') <v-popover v-else>
" <button
aria-label="Account" class="icon"
> v-tooltip="
<img (fb.currentUser.displayName || '<label><i>Name not found</i></label>') +
v-if="fb.currentUser.photoURL" '<br>' +
:src="fb.currentUser.photoURL" (fb.currentUser.email || '<label><i>Email not found</i></label>')
class="material-icons" "
alt="Profile image" aria-label="Account"
/> >
<i v-else class="material-icons">account_circle</i> <img
</button> v-if="fb.currentUser.photoURL"
<template slot="popover"> :src="fb.currentUser.photoURL"
<div> class="material-icons"
<nuxt-link :to="localePath('settings')" v-close-popover> alt="Profile image"
<button class="icon"> />
<i class="material-icons">settings</i> <i v-else class="material-icons">account_circle</i>
<span> </button>
{{ $t("settings") }} <template slot="popover">
</span> <div>
</button> <nuxt-link :to="localePath('settings')" v-close-popover>
</nuxt-link> <button class="icon">
</div> <i class="material-icons">settings</i>
<div> <span>
<button class="icon" @click="logout" v-close-popover> {{ $t("settings") }}
<i class="material-icons">exit_to_app</i> </span>
<span>{{ $t("logout") }}</span>
</button> </button>
</div> </nuxt-link>
</template> </div>
</v-popover> <div>
</span> <logout />
</div>
</template>
</v-popover>
<v-popover> <v-popover>
<button class="icon" v-tooltip="$t('more')"> <button class="icon" v-tooltip="$t('more')">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
@@ -267,6 +269,7 @@ export default {
components: { components: {
modal: () => import("../ui/modal"), modal: () => import("../ui/modal"),
login: () => import("../firebase/login"), login: () => import("../firebase/login"),
logout: () => import("../firebase/logout"),
contributors: () => import("./contributors"), contributors: () => import("./contributors"),
}, },
@@ -355,20 +358,6 @@ export default {
methods: { methods: {
getSpecialKey: getPlatformSpecialKey, getSpecialKey: getPlatformSpecialKey,
logout() {
fb.currentUser = null
firebase
.auth()
.signOut()
.catch(err => {
this.$toast.show(err.message || err, {
icon: "error",
})
})
this.$toast.info(this.$t("logged_out"), {
icon: "vpn_key",
})
},
nativeShare() { nativeShare() {
if (navigator.share) { if (navigator.share) {
navigator navigator

22
components/ui/modal.vue
View File

@@ -8,6 +8,8 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<slot name="body"></slot> <slot name="body"></slot>
<div class="fade top"></div>
<div class="fade bottom"></div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<slot name="footer"></slot> <slot name="footer"></slot>
@@ -40,6 +42,7 @@
} }
.modal-container { .modal-container {
position: relative;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
@@ -76,4 +79,23 @@
transform: scale(0.8); transform: scale(0.8);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.fade {
position: absolute;
left: 16px;
right: 20px;
display: block;
height: 32px;
transition: all 0.2s;
&.top {
top: 68px;
background: linear-gradient(to bottom, var(--bg-color), transparent);
}
&.bottom {
bottom: 16px;
background: linear-gradient(to top, var(--bg-color), transparent);
}
}
</style> </style>

1
nuxt.config.js
View File

@@ -199,6 +199,7 @@ export default {
*/ */
loading: { loading: {
color: "var(--ac-color)", color: "var(--ac-color)",
continuous: true,
}, },
/* /*
** Customize the loading indicator ** Customize the loading indicator

8
pages/index.vue
View File

@@ -1023,6 +1023,9 @@
<ul> <ul>
<li> <li>
<label>{{ $t("login_first") }}</label> <label>{{ $t("login_first") }}</label>
<p>
<login />
</p>
</li> </li>
</ul> </ul>
</div> </div>
@@ -1372,14 +1375,15 @@ export default {
"pw-section": section, "pw-section": section,
"pw-toggle": () => import("../components/ui/toggle"), "pw-toggle": () => import("../components/ui/toggle"),
"pw-modal": () => import("../components/ui/modal"), "pw-modal": () => import("../components/ui/modal"),
history: () => import("../components/layout/history"),
autocomplete: () => import("../components/ui/autocomplete"), autocomplete: () => import("../components/ui/autocomplete"),
history: () => import("../components/layout/history"),
collections: () => import("../components/collections"), collections: () => import("../components/collections"),
saveRequestAs: () => import("../components/collections/saveRequestAs"), saveRequestAs: () => import("../components/collections/saveRequestAs"),
Editor: AceEditor, Editor: AceEditor,
environments: () => import("../components/environments"),
inputform: () => import("../components/firebase/inputform"), inputform: () => import("../components/firebase/inputform"),
notes: () => import("../components/firebase/feeds"), notes: () => import("../components/firebase/feeds"),
environments: () => import("../components/environments"), login: () => import("../components/firebase/login"),
}, },
data() { data() {
return { return {

271
pages/settings.vue
View File

@@ -23,11 +23,7 @@
</span> </span>
</button> </button>
<br /> <br />
<button class="icon" @click="logout"> <logout />
<i class="material-icons">exit_to_app</i>
<span>{{ $t("logout") }}</span>
</button>
<br />
<p v-for="setting in fb.currentSettings" :key="setting.id"> <p v-for="setting in fb.currentSettings" :key="setting.id">
<pw-toggle <pw-toggle
:key="setting.name" :key="setting.name"
@@ -48,35 +44,7 @@
<div v-else> <div v-else>
<label>{{ $t("login_with") }}</label> <label>{{ $t("login_with") }}</label>
<p> <p>
<button class="icon" @click="signInWithGoogle"> <login />
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="material-icons"
>
<path
d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
/>
</svg>
<span>Google</span>
</button>
<br />
<button class="icon" @click="signInWithGithub">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="material-icons"
>
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
/>
</svg>
<span>GitHub</span>
</button>
</p> </p>
</div> </div>
</li> </li>
@@ -248,6 +216,8 @@ export default {
"pw-section": () => import("../components/layout/section"), "pw-section": () => import("../components/layout/section"),
"pw-toggle": () => import("../components/ui/toggle"), "pw-toggle": () => import("../components/ui/toggle"),
swatch: () => import("../components/settings/swatch"), swatch: () => import("../components/settings/swatch"),
login: () => import("../components/firebase/login"),
logout: () => import("../components/firebase/logout"),
}, },
data() { data() {
@@ -387,11 +357,6 @@ export default {
this.applySetting("THEME_COLOR", color.toUpperCase()) this.applySetting("THEME_COLOR", color.toUpperCase())
this.applySetting("THEME_COLOR_VIBRANT", vibrant) this.applySetting("THEME_COLOR_VIBRANT", vibrant)
}, },
showLoginSuccess() {
this.$toast.info(this.$t("login_success"), {
icon: "vpn_key",
})
},
getActiveColor() { getActiveColor() {
// This strips extra spaces and # signs from the strings. // This strips extra spaces and # signs from the strings.
const strip = str => str.replace(/#/g, "").replace(/ /g, "") const strip = str => str.replace(/#/g, "").replace(/ /g, "")
@@ -403,238 +368,10 @@ export default {
this.settings[key] = value this.settings[key] = value
this.$store.commit("postwoman/applySetting", [key, value]) this.$store.commit("postwoman/applySetting", [key, value])
}, },
signInWithGoogle() {
const provider = new firebase.auth.GoogleAuthProvider()
const self = this
firebase
.auth()
.signInWithPopup(provider)
.then(({ additionalUserInfo }) => {
if (additionalUserInfo.isNewUser) {
self.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
icon: "sync",
duration: null,
closeOnSwipe: false,
action: {
text: this.$t("yes"),
onClick: (e, toastObject) => {
fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true)
this.$router.push({ path: "/settings" })
toastObject.remove()
},
},
})
}
self.showLoginSuccess()
})
.catch(err => {
// An error happened.
if (err.code === "auth/account-exists-with-different-credential") {
// Step 2.
// User's email already exists.
// The pending Google credential.
var pendingCred = err.credential
// The provider account's email address.
var email = err.email
// Get sign-in methods for this email.
firebase
.auth()
.fetchSignInMethodsForEmail(email)
.then(function(methods) {
// Step 3.
// If the user has several sign-in methods,
// the first method in the list will be the "recommended" method to use.
if (methods[0] === "password") {
// Asks the user their password.
// In real scenario, you should handle this asynchronously.
var password = promptUserForPassword() // TODO: implement promptUserForPassword.
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(function(user) {
// Step 4a.
return user.linkWithCredential(pendingCred)
})
.then(function() {
// Google account successfully linked to the existing Firebase user.
self.showLoginSuccess()
})
return
}
self.$toast.info(`${self.$t("login_with")}`, {
icon: "vpn_key",
duration: null,
closeOnSwipe: false,
action: {
text: self.$t("yes"),
onClick: (e, toastObject) => {
// All the other cases are external providers.
// Construct provider object for that provider.
// TODO: implement getProviderForProviderId.
var provider = new firebase.auth.GithubAuthProvider()
// At this point, you should let the user know that they already has an account
// but with a different provider, and let them validate the fact they want to
// sign in with this provider.
// Sign in to provider. Note: browsers usually block popup triggered asynchronously,
// so in real scenario you should ask the user to click on a "continue" button
// that will trigger the signInWithPopup.
firebase
.auth()
.signInWithPopup(provider)
.then(function(result) {
// Remember that the user may have signed in with an account that has a different email
// address than the first one. This can happen as Firebase doesn't control the provider's
// sign in flow and the user is free to login using whichever account they own.
// Step 4b.
// Link to Google credential.
// As we have access to the pending credential, we can directly call the link method.
result.user
.linkAndRetrieveDataWithCredential(pendingCred)
.then(function(usercred) {
// Google account successfully linked to the existing Firebase user.
self.$toast.info(self.$t("login_success"), {
icon: "vpn_key",
})
})
})
toastObject.remove()
},
},
})
})
}
})
},
signInWithGithub() {
const provider = new firebase.auth.GithubAuthProvider()
const self = this
firebase
.auth()
.signInWithPopup(provider)
.then(({ additionalUserInfo }) => {
if (additionalUserInfo.isNewUser) {
self.$toast.info(`${self.$t("turn_on")} ${self.$t("sync")}`, {
icon: "sync",
duration: null,
closeOnSwipe: false,
action: {
text: self.$t("yes"),
onClick: (e, toastObject) => {
fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true)
self.$router.push({ path: "/settings" })
toastObject.remove()
},
},
})
}
self.$toast.info(self.$t("login_success"), {
icon: "vpn_key",
})
})
.catch(err => {
// An error happened.
if (err.code === "auth/account-exists-with-different-credential") {
// Step 2.
// User's email already exists.
// The pending Google credential.
var pendingCred = err.credential
// The provider account's email address.
var email = err.email
// Get sign-in methods for this email.
firebase
.auth()
.fetchSignInMethodsForEmail(email)
.then(function(methods) {
// Step 3.
// If the user has several sign-in methods,
// the first method in the list will be the "recommended" method to use.
if (methods[0] === "password") {
// Asks the user their password.
// In real scenario, you should handle this asynchronously.
var password = promptUserForPassword() // TODO: implement promptUserForPassword.
auth
.signInWithEmailAndPassword(email, password)
.then(function(user) {
// Step 4a.
return user.linkWithCredential(pendingCred)
})
.then(function() {
// Google account successfully linked to the existing Firebase user.
self.$toast.info(self.$t("login_success"), {
icon: "vpn_key",
})
})
return
}
self.$toast.info(`${this.$t("login_with")}`, {
icon: "vpn_key",
duration: null,
closeOnSwipe: false,
action: {
text: self.$t("yes"),
onClick: (e, toastObject) => {
// All the other cases are external providers.
// Construct provider object for that provider.
// TODO: implement getProviderForProviderId.
var provider = new firebase.auth.GoogleAuthProvider()
// At this point, you should let the user know that they already has an account
// but with a different provider, and let them validate the fact they want to
// sign in with this provider.
// Sign in to provider. Note: browsers usually block popup triggered asynchronously,
// so in real scenario you should ask the user to click on a "continue" button
// that will trigger the signInWithPopup.
firebase
.auth()
.signInWithPopup(provider)
.then(function(result) {
// Remember that the user may have signed in with an account that has a different email
// address than the first one. This can happen as Firebase doesn't control the provider's
// sign in flow and the user is free to login using whichever account they own.
// Step 4b.
// Link to Google credential.
// As we have access to the pending credential, we can directly call the link method.
result.user
.linkAndRetrieveDataWithCredential(pendingCred)
.then(function(usercred) {
// Google account successfully linked to the existing Firebase user.
self.showLoginSuccess()
})
})
toastObject.remove()
},
},
})
})
}
})
},
toggleSetting(key) { toggleSetting(key) {
this.settings[key] = !this.settings[key] this.settings[key] = !this.settings[key]
this.$store.commit("postwoman/applySetting", [key, this.settings[key]]) this.$store.commit("postwoman/applySetting", [key, this.settings[key]])
}, },
logout() {
fb.currentUser = null
const self = this
firebase
.auth()
.signOut()
.catch(err => {
self.$toast.show(err.message || err, {
icon: "error",
})
})
self.$toast.info(this.$t("logged_out"), {
icon: "vpn_key",
})
},
toggleSettings(s, v) { toggleSettings(s, v) {
fb.writeSettings(s, !v) fb.writeSettings(s, !v)
}, },