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

Merge branch 'newstate/firebase'

Browse Source
This commit is contained in:
liyasthomas
2021-06-20 19:09:59 +05:30
parent 96c23200f7 7c2becd3a4
commit a853c13bcd
50 changed files with 877 additions and 1262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -361,7 +361,6 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
- History
- Collections
- Environments
- Notes
✅ **Post-Request Tests β:** Write tests associated with a request that are executed after the request response.
@@ -378,10 +377,6 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
</details>
📝 **Notes** : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.
_Notes are only available for signed-in users_
🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
<details>

18
components/app/Header.vue
View File

@@ -68,7 +68,7 @@
</svg>
</button>
</a>
<v-popover v-if="fb.currentUser === null">
<v-popover v-if="currentUser === null">
<button v-tooltip="$t('login_with')" class="icon">
<i class="material-icons">login</i>
</button>
@@ -79,17 +79,17 @@
<v-popover v-else>
<button
v-tooltip="
(fb.currentUser.displayName ||
(currentUser.displayName ||
'<label><i>Name not found</i></label>') +
'<br>' +
(fb.currentUser.email || '<label><i>Email not found</i></label>')
(currentUser.email || '<label><i>Email not found</i></label>')
"
class="icon"
aria-label="Account"
>
<img
v-if="fb.currentUser.photoURL"
:src="fb.currentUser.photoURL"
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="w-6 h-6 rounded-full material-icons"
alt="Profile image"
/>
@@ -166,7 +166,7 @@
<script>
import intializePwa from "~/helpers/pwa"
import { fb } from "~/helpers/fb"
import { currentUser$ } from "~/helpers/fb/auth"
// import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
export default {
@@ -181,7 +181,11 @@ export default {
showSupport: false,
showEmail: false,
navigatorShare: navigator.share,
fb,
}
},
subscriptions() {
return {
currentUser: currentUser$,
}
},
async mounted() {

14
components/collections/ImportExport.vue
View File

@@ -34,9 +34,9 @@
</div>
<div
v-tooltip.bottom="{
content: !fb.currentUser
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
@@ -44,9 +44,9 @@
<button
v-close-popover
:disabled="
!fb.currentUser
!currentUser
? true
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? true
: false
"
@@ -166,7 +166,7 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { currentUser$ } from "~/helpers/fb/auth"
import * as teamUtils from "~/helpers/teams/utils"
import {
restCollections$,
@@ -185,12 +185,12 @@ export default {
mode: "import_export",
mySelectedCollectionID: undefined,
collectionJson: "",
fb,
}
},
subscriptions() {
return {
myCollections: restCollections$,
currentUser: currentUser$,
}
},
methods: {
@@ -208,7 +208,7 @@ export default {
},
{
headers: {
Authorization: `token ${fb.currentUser.accessToken}`,
Authorization: `token ${this.currentUser.accessToken}`,
Accept: "application/vnd.github.v3+json",
},
}

18
components/collections/graphql/ImportExport.vue
View File

@@ -21,9 +21,9 @@
</div>
<div
v-tooltip.bottom="{
content: !fb.currentUser
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
@@ -31,9 +31,9 @@
<button
v-close-popover
:disabled="
!fb.currentUser
!currentUser
? true
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? true
: false
"
@@ -100,7 +100,7 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { currentUser$ } from "~/helpers/fb/auth"
import {
graphqlCollections$,
setGraphqlCollections,
@@ -111,14 +111,10 @@ export default {
props: {
show: Boolean,
},
data() {
return {
fb,
}
},
subscriptions() {
return {
collections: graphqlCollections$,
currentUser: currentUser$,
}
},
computed: {
@@ -140,7 +136,7 @@ export default {
},
{
headers: {
Authorization: `token ${fb.currentUser.accessToken}`,
Authorization: `token ${this.currentUser.accessToken}`,
Accept: "application/vnd.github.v3+json",
},
}

5
components/collections/index.vue
View File

@@ -135,7 +135,7 @@
<script>
import gql from "graphql-tag"
import cloneDeep from "lodash/cloneDeep"
import { fb } from "~/helpers/fb"
import { currentUser$ } from "~/helpers/fb/auth"
import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
import * as teamUtils from "~/helpers/teams/utils"
import {
@@ -184,11 +184,12 @@ export default {
subscriptions() {
return {
collections: restCollections$,
currentUser: currentUser$,
}
},
computed: {
showTeamCollections() {
if (fb.currentUser == null) {
if (this.currentUser == null) {
return false
}
return true

18
components/environments/ImportExport.vue
View File

@@ -23,9 +23,9 @@
</div>
<div
v-tooltip.bottom="{
content: !fb.currentUser
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
@@ -33,9 +33,9 @@
<button
v-close-popover
:disabled="
!fb.currentUser
!currentUser
? true
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? true
: false
"
@@ -102,7 +102,7 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { currentUser$ } from "~/helpers/fb/auth"
import {
environments$,
replaceEnvironments,
@@ -113,14 +113,10 @@ export default {
props: {
show: Boolean,
},
data() {
return {
fb,
}
},
subscriptions() {
return {
environments: environments$,
currentUser: currentUser$,
}
},
computed: {
@@ -142,7 +138,7 @@ export default {
},
{
headers: {
Authorization: `token ${fb.currentUser.accessToken}`,
Authorization: `token ${this.currentUser.accessToken}`,
Accept: "application/vnd.github.v3+json",
},
}

8
components/firebase/Email.vue
View File

@@ -69,7 +69,7 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { currentUser$, signInWithEmail } from "~/helpers/fb/auth"
export default {
props: {
@@ -77,7 +77,6 @@ export default {
},
data() {
return {
fb,
form: {
email: "",
},
@@ -88,7 +87,7 @@ export default {
}
},
mounted() {
this.$subscribeTo(fb.currentUser$, (user) => {
this.$subscribeTo(currentUser$, (user) => {
if (user) this.hideModal()
})
},
@@ -99,8 +98,7 @@ export default {
url: `${process.env.BASE_URL}/enter`,
handleCodeInApp: true,
}
await fb
.signInWithEmail(this.form.email, actionCodeSettings)
await signInWithEmail(this.form.email, actionCodeSettings)
.then(() => {
this.mode = "email"
window.localStorage.setItem("emailForSignIn", this.form.email)

62
components/firebase/Feeds.vue
View File

@@ -1,62 +0,0 @@
<template>
<div
v-if="fb.currentFeeds.length !== 0"
class="divide-y virtual-list divide-dashed divide-divider"
>
<ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
<div data-test="list-item" class="show-on-large-screen">
<li class="info">
<label data-test="list-label" class="break-all">
{{ feed.label || $t("no_label") }}
</label>
</li>
<button class="icon" @click="deleteFeed(feed)">
<i class="material-icons">delete</i>
</button>
</div>
<div class="show-on-large-screen">
<li data-test="list-message" class="info clamb-3">
<label class="break-all">{{ feed.message || $t("empty") }}</label>
</li>
</div>
</ul>
</div>
<ul v-else class="flex-col">
<li>
<p class="info">{{ $t("empty") }}</p>
</li>
</ul>
</template>
<script>
import { fb } from "~/helpers/fb"
export default {
data() {
return {
fb,
}
},
methods: {
async deleteFeed({ id }) {
await fb.deleteFeed(id)
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
},
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
.clamb-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@apply overflow-hidden;
}
</style>

57
components/firebase/Inputform.vue
View File

@@ -1,57 +0,0 @@
<template>
<div class="flex-col">
<div class="show-on-large-screen">
<input
v-model="message"
:aria-label="$t('label')"
type="text"
autofocus
:placeholder="$t('paste_a_note')"
class="rounded-t-lg"
@keyup.enter="formPost"
/>
</div>
<div class="border-b show-on-large-screen border-divider">
<input
v-model="label"
:aria-label="$t('label')"
type="text"
autofocus
:placeholder="$t('label')"
@keyup.enter="formPost"
/>
<button
class="icon"
:disabled="!(message || label)"
value="Save"
@click="formPost"
>
<i class="material-icons">add</i>
<span>Add</span>
</button>
</div>
</div>
</template>
<script>
import { fb } from "~/helpers/fb"
export default {
data() {
return {
message: null,
label: null,
}
},
methods: {
formPost() {
if (!(this.message || this.label)) {
return
}
fb.writeFeeds(this.message, this.label)
this.message = null
this.label = null
},
},
}
</script>

48
components/firebase/Login.vue
View File

@@ -40,14 +40,16 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { applySetting } from "~/newstore/settings"
import {
signInUserWithGoogle,
getSignInMethodsForEmail,
signInWithEmailAndPassword,
signInUserWithGithub,
setProviderInfo,
} from "~/helpers/fb/auth"
export default {
data() {
return {
fb,
}
},
methods: {
showLoginSuccess() {
this.$toast.info(this.$t("login_success"), {
@@ -56,7 +58,7 @@ export default {
},
async signInWithGoogle() {
try {
const { additionalUserInfo } = await fb.signInUserWithGoogle()
const { additionalUserInfo } = await signInUserWithGoogle()
if (additionalUserInfo.isNewUser) {
this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
@@ -66,10 +68,9 @@ export default {
action: {
text: this.$t("yes"),
onClick: (_, toastObject) => {
fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true)
this.$router.push({ path: "/settings" })
applySetting("syncHistory", true)
applySetting("syncCollections", true)
applySetting("syncEnvironments", true)
toastObject.remove()
},
},
@@ -88,7 +89,7 @@ export default {
// The provider account's email address.
const email = err.email
// Get sign-in methods for this email.
const methods = await fb.getSignInMethodsForEmail(email)
const methods = await getSignInMethodsForEmail(email)
// Step 3.
// If the user has several sign-in methods,
@@ -98,7 +99,7 @@ export default {
// In real scenario, you should handle this asynchronously.
const password = promptUserForPassword() // TODO: implement promptUserForPassword.
const user = await fb.signInWithEmailAndPassword(email, password)
const user = await signInWithEmailAndPassword(email, password)
await user.linkWithCredential(pendingCred)
this.showLoginSuccess()
@@ -113,7 +114,7 @@ export default {
action: {
text: this.$t("yes"),
onClick: async (_, toastObject) => {
const { user } = await fb.signInWithGithub()
const { user } = await signInWithGithub()
await user.linkAndRetrieveDataWithCredential(pendingCred)
this.showLoginSuccess()
@@ -127,10 +128,9 @@ export default {
},
async signInWithGithub() {
try {
const { credential, additionalUserInfo } =
await fb.signInUserWithGithub()
const { credential, additionalUserInfo } = await signInUserWithGithub()
fb.setProviderInfo(credential.providerId, credential.accessToken)
setProviderInfo(credential.providerId, credential.accessToken)
if (additionalUserInfo.isNewUser) {
this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
@@ -140,10 +140,9 @@ export default {
action: {
text: this.$t("yes"),
onClick: (_, toastObject) => {
fb.writeSettings("syncHistory", true)
fb.writeSettings("syncCollections", true)
fb.writeSettings("syncEnvironments", true)
this.$router.push({ path: "/settings" })
applySetting("syncHistory", true)
applySetting("syncCollections", true)
applySetting("syncEnvironments", true)
toastObject.remove()
},
},
@@ -162,7 +161,7 @@ export default {
// The provider account's email address.
const email = err.email
// Get sign-in methods for this email.
const methods = await fb.getSignInMethodsForEmail(email)
const methods = await getSignInMethodsForEmail(email)
// Step 3.
// If the user has several sign-in methods,
@@ -172,7 +171,7 @@ export default {
// In real scenario, you should handle this asynchronously.
const password = promptUserForPassword() // TODO: implement promptUserForPassword.
const user = await fb.signInWithEmailAndPassword(email, password)
const user = await signInWithEmailAndPassword(email, password)
await user.linkWithCredential(pendingCred)
this.showLoginSuccess()
@@ -187,7 +186,8 @@ export default {
action: {
text: this.$t("yes"),
onClick: async (_, toastObject) => {
const { user } = await fb.signInUserWithGoogle()
const { user } = await signInUserWithGoogle()
// TODO: handle deprecation
await user.linkAndRetrieveDataWithCredential(pendingCred)
this.showLoginSuccess()

18
components/firebase/Logout.vue
View File

@@ -7,21 +7,17 @@
</div>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { signOutUser } from "~/helpers/fb/auth"
export default {
data() {
return {
fb,
}
},
export default Vue.extend({
methods: {
async logout() {
try {
await fb.signOutUser()
await signOutUser()
this.$toast.info(this.$t("logged_out"), {
this.$toast.info(this.$t("logged_out").toString(), {
icon: "vpn_key",
})
} catch (err) {
@@ -31,5 +27,5 @@ export default {
}
},
},
}
})
</script>

132
components/firebase/__tests__/Feeds.spec.js
View File

@@ -1,132 +0,0 @@
import { shallowMount } from "@vue/test-utils"
import feeds from "../Feeds"
import { fb } from "~/helpers/fb"
jest.mock("~/helpers/fb", () => ({
__esModule: true,
fb: {
currentFeeds: [
{
id: "test1",
label: "First",
message: "First Message",
},
{
id: "test2",
label: "Second",
},
{
id: "test3",
message: "Third Message",
},
{
id: "test4",
},
],
deleteFeed: jest.fn(() => Promise.resolve()),
},
}))
const factory = () =>
shallowMount(feeds, {
mocks: {
$t: (text) => text,
$toast: {
error: jest.fn(),
},
},
})
beforeEach(() => {
fb.deleteFeed.mockClear()
})
describe("feeds", () => {
test("mounts properly when proper components are given", () => {
const wrapper = factory()
expect(wrapper).toBeTruthy()
})
test("renders all the current feeds", () => {
const wrapper = factory()
expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(
4
)
})
test("feeds with no label displays the 'no_label' message", () => {
const wrapper = factory()
expect(
wrapper
.findAll("label[data-test='list-label']")
.wrappers.map((e) => e.text())
.filter((text) => text === "no_label")
).toHaveLength(2)
})
test("feeds with no message displays the 'empty' message", () => {
const wrapper = factory()
expect(
wrapper
.findAll("li[data-test='list-message']")
.wrappers.map((e) => e.text())
.filter((text) => text === "empty")
).toHaveLength(2)
})
test("labels in the list are proper", () => {
const wrapper = factory()
expect(
wrapper
.findAll("label[data-test='list-label']")
.wrappers.map((e) => e.text())
).toEqual(["First", "Second", "no_label", "no_label"])
})
test("messages in the list are proper", () => {
const wrapper = factory()
expect(
wrapper
.findAll("li[data-test='list-message']")
.wrappers.map((e) => e.text())
).toEqual(["First Message", "empty", "Third Message", "empty"])
})
test("clicking on the delete button deletes the feed", async () => {
const wrapper = factory()
const deleteButton = wrapper.find("button")
await deleteButton.trigger("click")
expect(fb.deleteFeed).toHaveBeenCalledTimes(1)
})
test("correct feed is passed to from the list for deletion", async () => {
const wrapper = factory()
const deleteButton = wrapper.find("button")
await deleteButton.trigger("click")
expect(fb.deleteFeed).toHaveBeenCalledWith("test1")
})
test("renders the 'empty' label if no elements in the current feeds", () => {
jest.spyOn(fb, "currentFeeds", "get").mockReturnValueOnce([])
const wrapper = factory()
expect(wrapper.findAll("li").wrappers).toHaveLength(1)
expect(wrapper.find("li").text()).toEqual("empty")
})
})

92
components/firebase/__tests__/Inputform.spec.js
View File

@@ -1,92 +0,0 @@
import { shallowMount } from "@vue/test-utils"
import inputform from "../Inputform"
import { fb } from "~/helpers/fb"
jest.mock("~/helpers/fb", () => ({
__esModule: true,
fb: {
writeFeeds: jest.fn(() => Promise.resolve()),
},
}))
const factory = () =>
shallowMount(inputform, {
mocks: {
$t: (text) => text,
},
})
beforeEach(() => {
fb.writeFeeds.mockClear()
})
describe("inputform", () => {
test("mounts properly", () => {
const wrapper = factory()
expect(wrapper).toBeTruthy()
})
test("calls writeFeeds when submitted properly", async () => {
const wrapper = factory()
const addButton = wrapper.find("button")
const [messageInput, labelInput] = wrapper.findAll("input").wrappers
await messageInput.setValue("test message")
await labelInput.setValue("test label")
await addButton.trigger("click")
expect(fb.writeFeeds).toHaveBeenCalledTimes(1)
})
test("doesn't call writeFeeds when submitted without a data", async () => {
const wrapper = factory()
const addButton = wrapper.find("button")
await addButton.trigger("click")
expect(fb.writeFeeds).not.toHaveBeenCalled()
})
test("doesn't call writeFeeds when message or label is null", async () => {
const wrapper = factory()
const addButton = wrapper.find("button")
const [messageInput, labelInput] = wrapper.findAll("input").wrappers
await messageInput.setValue(null)
await labelInput.setValue(null)
await addButton.trigger("click")
expect(fb.writeFeeds).not.toHaveBeenCalled()
})
test("doesn't call writeFeeds when message or label is empty", async () => {
const wrapper = factory()
const addButton = wrapper.find("button")
const [messageInput, labelInput] = wrapper.findAll("input").wrappers
await messageInput.setValue("")
await labelInput.setValue("")
await addButton.trigger("click")
expect(fb.writeFeeds).not.toHaveBeenCalled()
})
test("calls writeFeeds with correct values", async () => {
const wrapper = factory()
const addButton = wrapper.find("button")
const [messageInput, labelInput] = wrapper.findAll("input").wrappers
await messageInput.setValue("test message")
await labelInput.setValue("test label")
await addButton.trigger("click")
expect(fb.writeFeeds).toHaveBeenCalledWith("test message", "test label")
})
})

67
components/firebase/__tests__/Logout.spec.js
View File

@@ -1,67 +0,0 @@
import { shallowMount, createLocalVue } from "@vue/test-utils"
import logout from "../Logout"
import { fb } from "~/helpers/fb"
jest.mock("~/helpers/fb", () => ({
__esModule: true,
fb: {
signOutUser: jest.fn(() => Promise.resolve()),
},
}))
const $toast = {
info: jest.fn(),
show: jest.fn(),
}
const localVue = createLocalVue()
localVue.directive("close-popover", {})
const factory = () =>
shallowMount(logout, {
mocks: {
$t: (text) => text,
$toast,
},
localVue,
})
beforeEach(() => {
fb.signOutUser.mockClear()
$toast.info.mockClear()
$toast.show.mockClear()
})
describe("logout", () => {
test("mounts properly", () => {
const wrapper = factory()
expect(wrapper).toBeTruthy()
})
test("clicking the logout button fires the logout firebase function", async () => {
const wrapper = factory()
const button = wrapper.find("button")
await button.trigger("click")
expect(fb.signOutUser).toHaveBeenCalledTimes(1)
})
test("failed signout request fires a error toast", async () => {
fb.signOutUser.mockImplementationOnce(() =>
Promise.reject(new Error("test reject"))
)
const wrapper = factory()
const button = wrapper.find("button")
await button.trigger("click")
expect($toast.show).toHaveBeenCalledTimes(1)
expect($toast.show).toHaveBeenCalledWith("test reject", expect.anything())
})
})

26
components/http/Notes.vue
View File

@@ -1,26 +0,0 @@
<template>
<AppSection ref="sync" :label="$t('notes')">
<div v-if="fb.currentUser">
<FirebaseInputform />
<FirebaseFeeds />
</div>
<div v-else>
<p class="info">{{ $t("login_first") }}</p>
<FirebaseLogin @show-email="showEmail = true" />
</div>
<FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
</AppSection>
</template>
<script>
import { fb } from "~/helpers/fb"
export default {
data() {
return {
fb,
showEmail: false,
}
},
}
</script>

10
components/teams/index.vue
View File

@@ -2,7 +2,7 @@
<AppSection ref="teams" :label="$t('teams')">
<div class="flex flex-col">
<label>{{ $t("teams") }}</label>
<div v-if="fb.currentUser"></div>
<div v-if="currentUser"></div>
<div v-else>
<label>{{ $t("login_with") }}</label>
<p>
@@ -50,7 +50,7 @@
<script>
import gql from "graphql-tag"
import { fb } from "~/helpers/fb"
import { currentUser$ } from "~/helpers/fb/auth"
export default {
data() {
@@ -61,10 +61,14 @@ export default {
editingteamID: "",
me: {},
myTeams: [],
fb,
showEmail: false,
}
},
subscriptions() {
return {
currentUser: currentUser$,
}
},
apollo: {
me: {
query: gql`

4
helpers/apollo.ts
View File

@@ -7,12 +7,12 @@ import {
import { WebSocketLink } from "@apollo/client/link/ws"
import { setContext } from "@apollo/client/link/context"
import { getMainDefinition } from "@apollo/client/utilities"
import { fb } from "./fb"
import { authIdToken$ } from "./fb/auth"
let authToken: String | null = null
export function registerApolloAuthUpdate() {
fb.idToken$.subscribe((token: String | null) => {
authIdToken$.subscribe((token) => {
authToken = token
})
}

572
helpers/fb.js
View File

@@ -1,572 +0,0 @@
import firebase from "firebase/app"
import "firebase/firestore"
import "firebase/auth"
import { ReplaySubject } from "rxjs"
import { applySettingFB, settingsStore } from "~/newstore/settings"
import {
restHistoryStore,
setRESTHistoryEntries,
graphqlHistoryStore,
setGraphqlHistoryEntries,
HISTORY_LIMIT,
} from "~/newstore/history"
import {
restCollectionStore,
setRESTCollections,
graphqlCollectionStore,
setGraphqlCollections,
} from "~/newstore/collections"
import { environments$, replaceEnvironments } from "~/newstore/environments"
// Initialize Firebase, copied from cloud console
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DATABASE_URL,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
}
export const authProviders = {
google: () => new firebase.auth.GoogleAuthProvider(),
github: () => new firebase.auth.GithubAuthProvider(),
}
export class FirebaseInstance {
constructor(fbapp, authProviders) {
this.app = fbapp
this.authProviders = authProviders
this.usersCollection = this.app.firestore().collection("users")
this.currentUser = null
this.idToken = null
this.currentFeeds = []
this.currentSettings = []
this.currentUser$ = new ReplaySubject(1)
this.idToken$ = new ReplaySubject(1)
let loadedSettings = false
let loadedRESTHistory = false
let loadedGraphqlHistory = false
let loadedRESTCollections = false
let loadedGraphqlCollections = false
let loadedEnvironments = false
graphqlCollectionStore.subject$.subscribe(({ state }) => {
if (
loadedGraphqlCollections &&
this.currentUser &&
settingsStore.value.syncCollections
) {
this.writeCollections(state, "collectionsGraphql")
}
})
restCollectionStore.subject$.subscribe(({ state }) => {
if (
loadedRESTCollections &&
this.currentUser &&
settingsStore.value.syncCollections
) {
this.writeCollections(state, "collections")
}
})
restHistoryStore.dispatches$.subscribe((dispatch) => {
if (
loadedRESTHistory &&
this.currentUser &&
settingsStore.value.syncHistory
) {
if (dispatch.dispatcher === "addEntry") {
this.writeHistory(dispatch.payload.entry)
} else if (dispatch.dispatcher === "deleteEntry") {
this.deleteHistory(dispatch.payload.entry)
} else if (dispatch.dispatcher === "clearHistory") {
this.clearHistory()
} else if (dispatch.dispatcher === "toggleStar") {
this.toggleStar(dispatch.payload.entry)
}
}
})
graphqlHistoryStore.dispatches$.subscribe((dispatch) => {
if (
loadedGraphqlHistory &&
this.currentUser &&
settingsStore.value.syncHistory
) {
if (dispatch.dispatcher === "addEntry") {
this.writeGraphqlHistory(dispatch.payload.entry)
} else if (dispatch.dispatcher === "deleteEntry") {
this.deleteGraphqlHistory(dispatch.payload.entry)
} else if (dispatch.dispatcher === "clearHistory") {
this.clearGraphqlHistory()
} else if (dispatch.dispatcher === "toggleStar") {
this.toggleGraphqlHistoryStar(dispatch.payload.entry)
}
}
})
settingsStore.dispatches$.subscribe((dispatch) => {
if (this.currentUser && loadedSettings) {
if (dispatch.dispatcher === "bulkApplySettings") {
Object.keys(dispatch.payload).forEach((key) => {
this.writeSettings(key, dispatch.payload[key])
})
} else if (dispatch.dispatcher !== "applySettingFB") {
this.writeSettings(
dispatch.payload.settingKey,
settingsStore.value[dispatch.payload.settingKey]
)
}
}
})
environments$.subscribe((envs) => {
if (this.currentUser && loadedEnvironments) {
this.writeEnvironments(envs)
}
})
this.app.auth().onIdTokenChanged((user) => {
if (user) {
user.getIdToken().then((token) => {
this.idToken = token
this.idToken$.next(token)
})
} else {
this.idToken = null
this.idToken$.next(null)
}
})
this.app.auth().onAuthStateChanged((user) => {
this.currentUser$.next(user)
if (user) {
this.currentUser = user
this.currentUser.providerData.forEach((profile) => {
const us = {
updatedOn: new Date(),
provider: profile.providerId,
name: profile.displayName,
email: profile.email,
photoUrl: profile.photoURL,
uid: profile.uid,
}
this.usersCollection
.doc(this.currentUser.uid)
.set(us, { merge: true })
.catch((e) => console.error("error updating", us, e))
})
this.usersCollection.doc(this.currentUser.uid).onSnapshot((doc) => {
this.currentUser.provider = doc.data().provider
this.currentUser.accessToken = doc.data().accessToken
})
this.usersCollection
.doc(this.currentUser.uid)
.collection("feeds")
.orderBy("createdOn", "desc")
.onSnapshot((feedsRef) => {
const feeds = []
feedsRef.forEach((doc) => {
const feed = doc.data()
feed.id = doc.id
feeds.push(feed)
})
this.currentFeeds = feeds
})
this.usersCollection
.doc(this.currentUser.uid)
.collection("settings")
.onSnapshot((settingsRef) => {
const settings = []
settingsRef.forEach((doc) => {
const setting = doc.data()
setting.id = doc.id
settings.push(setting)
})
this.currentSettings = settings
settings.forEach((e) => {
if (e && e.name && e.value != null) {
applySettingFB(e.name, e.value)
}
})
loadedSettings = true
})
this.usersCollection
.doc(this.currentUser.uid)
.collection("history")
.orderBy("updatedOn", "desc")
.limit(HISTORY_LIMIT)
.onSnapshot((historyRef) => {
const history = []
historyRef.forEach((doc) => {
const entry = doc.data()
entry.id = doc.id
history.push(entry)
})
setRESTHistoryEntries(history)
loadedRESTHistory = true
})
this.usersCollection
.doc(this.currentUser.uid)
.collection("graphqlHistory")
.orderBy("updatedOn", "desc")
.limit(HISTORY_LIMIT)
.onSnapshot((historyRef) => {
const history = []
historyRef.forEach((doc) => {
const entry = doc.data()
entry.id = doc.id
history.push(entry)
})
setGraphqlHistoryEntries(history)
loadedGraphqlHistory = true
})
this.usersCollection
.doc(this.currentUser.uid)
.collection("collections")
.onSnapshot((collectionsRef) => {
const collections = []
collectionsRef.forEach((doc) => {
const collection = doc.data()
collection.id = doc.id
collections.push(collection)
})
// Prevent infinite ping-pong of updates
loadedRESTCollections = false
// TODO: Wth is with collections[0]
if (collections.length > 0) {
setRESTCollections(collections[0].collection)
}
loadedRESTCollections = true
})
this.usersCollection
.doc(this.currentUser.uid)
.collection("collectionsGraphql")
.onSnapshot((collectionsRef) => {
const collections = []
collectionsRef.forEach((doc) => {
const collection = doc.data()
collection.id = doc.id
collections.push(collection)
})
// Prevent infinite ping-pong of updates
loadedGraphqlCollections = false
// TODO: Wth is with collections[0]
if (collections.length > 0) {
setGraphqlCollections(collections[0].collection)
}
loadedGraphqlCollections = true
})
this.usersCollection
.doc(this.currentUser.uid)
.collection("environments")
.onSnapshot((environmentsRef) => {
const environments = []
environmentsRef.forEach((doc) => {
const environment = doc.data()
environment.id = doc.id
environments.push(environment)
})
loadedEnvironments = false
replaceEnvironments(environments[0].environment)
loadedEnvironments = true
})
} else {
this.currentUser = null
}
})
}
async signInUserWithGoogle() {
return await this.app.auth().signInWithPopup(this.authProviders.google())
}
async signInUserWithGithub() {
return await this.app
.auth()
.signInWithPopup(this.authProviders.github().addScope("gist"))
}
async signInWithEmailAndPassword(email, password) {
return await this.app.auth().signInWithEmailAndPassword(email, password)
}
async getSignInMethodsForEmail(email) {
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")
await this.app.auth().signOut()
this.currentUser = null
}
async writeFeeds(message, label) {
const dt = {
createdOn: new Date(),
author: this.currentUser.uid,
author_name: this.currentUser.displayName,
author_image: this.currentUser.photoURL,
message,
label,
}
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("feeds")
.add(dt)
} catch (e) {
console.error("error inserting", dt, e)
throw e
}
}
async deleteFeed(id) {
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("feeds")
.doc(id)
.delete()
} catch (e) {
console.error("error deleting", id, e)
throw e
}
}
async writeSettings(setting, value) {
const st = {
updatedOn: new Date(),
author: this.currentUser.uid,
author_name: this.currentUser.displayName,
author_image: this.currentUser.photoURL,
name: setting,
value,
}
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("settings")
.doc(setting)
.set(st)
} catch (e) {
console.error("error updating", st, e)
throw e
}
}
async writeHistory(entry) {
const hs = entry
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("history")
.add(hs)
} catch (e) {
console.error("error inserting", hs, e)
throw e
}
}
async writeGraphqlHistory(entry) {
const hs = entry
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("graphqlHistory")
.add(hs)
} catch (e) {
console.error("error inserting", hs, e)
throw e
}
}
async deleteHistory(entry) {
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("history")
.doc(entry.id)
.delete()
} catch (e) {
console.error("error deleting", entry, e)
throw e
}
}
async deleteGraphqlHistory(entry) {
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("graphqlHistory")
.doc(entry.id)
.delete()
} catch (e) {
console.error("error deleting", entry, e)
throw e
}
}
async clearHistory() {
const { docs } = await this.usersCollection
.doc(this.currentUser.uid)
.collection("history")
.get()
await Promise.all(docs.map((e) => this.deleteHistory(e)))
}
async clearGraphqlHistory() {
const { docs } = await this.usersCollection
.doc(this.currentUser.uid)
.collection("graphqlHistory")
.get()
await Promise.all(docs.map((e) => this.deleteGraphqlHistory(e)))
}
async toggleStar(entry) {
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("history")
.doc(entry.id)
.update({ star: !entry.star })
} catch (e) {
console.error("error deleting", entry, e)
throw e
}
}
async toggleGraphqlHistoryStar(entry) {
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("graphqlHistory")
.doc(entry.id)
.update({ star: !entry.star })
} catch (e) {
console.error("error deleting", entry, e)
throw e
}
}
async writeCollections(collection, flag) {
const cl = {
updatedOn: new Date(),
author: this.currentUser.uid,
author_name: this.currentUser.displayName,
author_image: this.currentUser.photoURL,
collection,
}
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection(flag)
.doc("sync")
.set(cl)
} catch (e) {
console.error("error updating", cl, e)
throw e
}
}
async writeEnvironments(environment) {
const ev = {
updatedOn: new Date(),
author: this.currentUser.uid,
author_name: this.currentUser.displayName,
author_image: this.currentUser.photoURL,
environment,
}
try {
await this.usersCollection
.doc(this.currentUser.uid)
.collection("environments")
.doc("sync")
.set(ev)
} catch (e) {
console.error("error updating", ev, e)
throw e
}
}
async setProviderInfo(id, token) {
const us = {
updatedOn: new Date(),
provider: id,
accessToken: token,
}
try {
await this.usersCollection
.doc(this.currentUser.uid)
.update(us)
.catch((e) => console.error("error updating", us, e))
} catch (e) {
console.error("error updating", e)
throw e
}
}
}
export const fb = new FirebaseInstance(
firebase.initializeApp(firebaseConfig),
authProviders
)

186
helpers/fb/auth.ts Normal file
View File

@@ -0,0 +1,186 @@
import firebase from "firebase"
import { BehaviorSubject } from "rxjs"
export type HoppUser = firebase.User & {
provider?: string
accessToken?: string
}
/**
* A BehaviorSubject emitting the currently logged in user (or null if not logged in)
*/
export const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
/**
* A BehaviorSubject emitting the current idToken
*/
export const authIdToken$ = new BehaviorSubject<string | null>(null)
/**
* Initializes the firebase authentication related subjects
*/
export function initAuth() {
let extraSnapshotStop: (() => void) | null = null
firebase.auth().onAuthStateChanged((user) => {
if (!user && extraSnapshotStop) {
extraSnapshotStop()
extraSnapshotStop = null
} else if (user) {
// Merge all the user info from all the authenticated providers
user.providerData.forEach((profile) => {
if (!profile) return
const us = {
updatedOn: new Date(),
provider: profile.providerId,
name: profile.displayName,
email: profile.email,
photoUrl: profile.photoURL,
uid: profile.uid,
}
firebase
.firestore()
.collection("users")
.doc(user.uid)
.set(us, { merge: true })
.catch((e) => console.error("error updating", us, e))
})
extraSnapshotStop = firebase
.firestore()
.collection("users")
.doc(user.uid)
.onSnapshot((doc) => {
const data = doc.data()
const userUpdate: HoppUser = user
if (data) {
// Write extra provider data
userUpdate.provider = data.provider
userUpdate.accessToken = data.accessToken
}
})
}
currentUser$.next(user)
})
firebase.auth().onIdTokenChanged(async (user) => {
if (user) {
authIdToken$.next(await user.getIdToken())
} else {
authIdToken$.next(null)
}
})
}
/**
* Sign user in with a popup using Google
*/
export async function signInUserWithGoogle() {
return await firebase
.auth()
.signInWithPopup(new firebase.auth.GoogleAuthProvider())
}
/**
* Sign user in with a popup using Github
*/
export async function signInUserWithGithub() {
return await firebase
.auth()
.signInWithPopup(new firebase.auth.GithubAuthProvider().addScope("gist"))
}
/**
* Sign user in with email and password
*/
export async function signInWithEmailAndPassword(
email: string,
password: string
) {
return await firebase.auth().signInWithEmailAndPassword(email, password)
}
/**
* Gets the sign in methods for a given email address
*
* @param email - Email to get the methods of
*
* @returns Promise for string array of the auth provider methods accessible
*/
export async function getSignInMethodsForEmail(email: string) {
return await firebase.auth().fetchSignInMethodsForEmail(email)
}
/**
* Sends an email with the signin link to the user
*
* @param email - Email to send the email to
* @param actionCodeSettings - The settings to apply to the link
*/
export async function signInWithEmail(
email: string,
actionCodeSettings: firebase.auth.ActionCodeSettings
) {
return await firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
}
/**
* Checks and returns whether the sign in link is an email link
*
* @param url - The URL to look in
*/
export function isSignInWithEmailLink(url: string) {
return firebase.auth().isSignInWithEmailLink(url)
}
/**
* Sends an email with sign in with email link
*
* @param email - Email to log in to
* @param url - The action URL which is used to validate login
*/
export async function signInWithEmailLink(email: string, url: string) {
return await firebase.auth().signInWithEmailLink(email, url)
}
/**
* Signs out the user
*/
export async function signOutUser() {
if (!currentUser$.value) throw new Error("No user has logged in")
await firebase.auth().signOut()
}
/**
* Sets the provider id and relevant provider auth token
* as user metadata
*
* @param id - The provider ID
* @param token - The relevant auth token for the given provider
*/
export async function setProviderInfo(id: string, token: string) {
if (!currentUser$.value) throw new Error("No user has logged in")
const us = {
updatedOn: new Date(),
provider: id,
accessToken: token,
}
try {
await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.update(us)
.catch((e) => console.error("error updating", us, e))
} catch (e) {
console.error("error updating", e)
throw e
}
}

147
helpers/fb/collections.ts Normal file
View File

@@ -0,0 +1,147 @@
import firebase from "firebase"
import { currentUser$ } from "./auth"
import {
restCollections$,
graphqlCollections$,
setRESTCollections,
setGraphqlCollections,
} from "~/newstore/collections"
import { settingsStore } from "~/newstore/settings"
type CollectionFlags = "collectionsGraphql" | "collections"
/**
* Whether the collections are loaded. If this is set to true
* Updates to the collections store are written into firebase.
*
* If you have want to update the store and not fire the store update
* subscription, set this variable to false, do the update and then
* set it to true
*/
let loadedRESTCollections = false
/**
* Whether the collections are loaded. If this is set to true
* Updates to the collections store are written into firebase.
*
* If you have want to update the store and not fire the store update
* subscription, set this variable to false, do the update and then
* set it to true
*/
let loadedGraphqlCollections = false
export async function writeCollections(
collection: any[],
flag: CollectionFlags
) {
if (currentUser$.value === null)
throw new Error("User not logged in to write collections")
const cl = {
updatedOn: new Date(),
author: currentUser$.value.uid,
author_name: currentUser$.value.displayName,
author_image: currentUser$.value.photoURL,
collection,
}
try {
await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.collection(flag)
.doc("sync")
.set(cl)
} catch (e) {
console.error("error updating", cl, e)
throw e
}
}
export function initCollections() {
restCollections$.subscribe((collections) => {
if (
loadedRESTCollections &&
currentUser$.value &&
settingsStore.value.syncCollections
) {
writeCollections(collections, "collections")
}
})
graphqlCollections$.subscribe((collections) => {
if (
loadedGraphqlCollections &&
currentUser$.value &&
settingsStore.value.syncCollections
) {
writeCollections(collections, "collectionsGraphql")
}
})
let restSnapshotStop: (() => void) | null = null
let graphqlSnapshotStop: (() => void) | null = null
currentUser$.subscribe((user) => {
if (!user) {
if (restSnapshotStop) {
restSnapshotStop()
restSnapshotStop = null
}
if (graphqlSnapshotStop) {
graphqlSnapshotStop()
graphqlSnapshotStop = null
}
} else {
restSnapshotStop = firebase
.firestore()
.collection("users")
.doc(user.uid)
.collection("collections")
.onSnapshot((collectionsRef) => {
const collections: any[] = []
collectionsRef.forEach((doc) => {
const collection = doc.data()
collection.id = doc.id
collections.push(collection)
})
// Prevent infinite ping-pong of updates
loadedRESTCollections = false
// TODO: Wth is with collections[0]
if (collections.length > 0) {
setRESTCollections(collections[0].collection)
}
loadedRESTCollections = true
})
graphqlSnapshotStop = firebase
.firestore()
.collection("users")
.doc(user.uid)
.collection("collectionsGraphql")
.onSnapshot((collectionsRef) => {
const collections: any[] = []
collectionsRef.forEach((doc) => {
const collection = doc.data()
collection.id = doc.id
collections.push(collection)
})
// Prevent infinite ping-pong of updates
loadedGraphqlCollections = false
// TODO: Wth is with collections[0]
if (collections.length > 0) {
setGraphqlCollections(collections[0].collection)
}
loadedGraphqlCollections = true
})
}
})
}

84
helpers/fb/environments.ts Normal file
View File

@@ -0,0 +1,84 @@
import firebase from "firebase"
import { currentUser$ } from "./auth"
import {
Environment,
environments$,
replaceEnvironments,
} from "~/newstore/environments"
import { settingsStore } from "~/newstore/settings"
/**
* Used locally to prevent infinite loop when environment sync update
* is applied to the store which then fires the store sync listener.
* When you want to update environments and not want to fire the update listener,
* set this to true and then set it back to false once it is done
*/
let loadedEnvironments = false
async function writeEnvironments(environment: Environment[]) {
if (currentUser$.value == null)
throw new Error("Cannot write environments when signed out")
const ev = {
updatedOn: new Date(),
author: currentUser$.value.uid,
author_name: currentUser$.value.displayName,
author_image: currentUser$.value.photoURL,
environment,
}
try {
await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.collection("environments")
.doc("sync")
.set(ev)
} catch (e) {
console.error("error updating", ev, e)
throw e
}
}
export function initEnvironments() {
environments$.subscribe((envs) => {
if (
currentUser$.value &&
settingsStore.value.syncEnvironments &&
loadedEnvironments
) {
writeEnvironments(envs)
}
})
let snapshotStop: (() => void) | null = null
currentUser$.subscribe((user) => {
if (!user && snapshotStop) {
// User logged out, clean up snapshot listener
snapshotStop()
snapshotStop = null
} else if (user) {
snapshotStop = firebase
.firestore()
.collection("users")
.doc(user.uid)
.collection("environments")
.onSnapshot((environmentsRef) => {
const environments: any[] = []
environmentsRef.forEach((doc) => {
const environment = doc.data()
environment.id = doc.id
environments.push(environment)
})
loadedEnvironments = false
replaceEnvironments(environments[0].environment)
loadedEnvironments = true
})
}
})
}

201
helpers/fb/history.ts Normal file
View File

@@ -0,0 +1,201 @@
import firebase from "firebase"
import { currentUser$ } from "./auth"
import { settingsStore } from "~/newstore/settings"
import {
graphqlHistoryStore,
HISTORY_LIMIT,
restHistoryStore,
setGraphqlHistoryEntries,
setRESTHistoryEntries,
} from "~/newstore/history"
type HistoryFBCollections = "history" | "graphqlHistory"
/**
* Whether the history are loaded. If this is set to true
* Updates to the history store are written into firebase.
*
* If you have want to update the store and not fire the store update
* subscription, set this variable to false, do the update and then
* set it to true
*/
let loadedRESTHistory = false
/**
* Whether the history are loaded. If this is set to true
* Updates to the history store are written into firebase.
*
* If you have want to update the store and not fire the store update
* subscription, set this variable to false, do the update and then
* set it to true
*/
let loadedGraphqlHistory = false
async function writeHistory(entry: any, col: HistoryFBCollections) {
if (currentUser$.value == null)
throw new Error("User not logged in to sync history")
const hs = entry
try {
await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.collection(col)
.add(hs)
} catch (e) {
console.error("error writing to history", hs, e)
throw e
}
}
async function deleteHistory(entry: any, col: HistoryFBCollections) {
if (currentUser$.value == null)
throw new Error("User not logged in to delete history")
try {
await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.collection(col)
.doc(entry.id)
.delete()
} catch (e) {
console.error("error deleting history", entry, e)
throw e
}
}
async function clearHistory(col: HistoryFBCollections) {
if (currentUser$.value == null)
throw new Error("User not logged in to clear history")
const { docs } = await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.collection(col)
.get()
await Promise.all(docs.map((e) => deleteHistory(e, col)))
}
async function toggleStar(entry: any, col: HistoryFBCollections) {
if (currentUser$.value == null)
throw new Error("User not logged in to toggle star")
console.log(entry)
try {
await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.collection(col)
.doc(entry.id)
.update({ star: !entry.star })
} catch (e) {
console.error("error toggling star", entry, e)
throw e
}
}
export function initHistory() {
restHistoryStore.dispatches$.subscribe((dispatch) => {
if (
loadedRESTHistory &&
currentUser$.value &&
settingsStore.value.syncHistory
) {
if (dispatch.dispatcher === "addEntry") {
writeHistory(dispatch.payload.entry, "history")
} else if (dispatch.dispatcher === "deleteEntry") {
deleteHistory(dispatch.payload.entry, "history")
} else if (dispatch.dispatcher === "clearHistory") {
clearHistory("history")
} else if (dispatch.dispatcher === "toggleStar") {
toggleStar(dispatch.payload.entry, "history")
}
}
})
graphqlHistoryStore.dispatches$.subscribe((dispatch) => {
if (
loadedGraphqlHistory &&
currentUser$.value &&
settingsStore.value.syncHistory
) {
if (dispatch.dispatcher === "addEntry") {
writeHistory(dispatch.payload.entry, "graphqlHistory")
} else if (dispatch.dispatcher === "deleteEntry") {
deleteHistory(dispatch.payload.entry, "graphqlHistory")
} else if (dispatch.dispatcher === "clearHistory") {
clearHistory("graphqlHistory")
} else if (dispatch.dispatcher === "toggleStar") {
toggleStar(dispatch.payload.entry, "graphqlHistory")
}
}
})
let restSnapshotStop: (() => void) | null = null
let graphqlSnapshotStop: (() => void) | null = null
currentUser$.subscribe((user) => {
if (!user) {
// Clear the snapshot listeners when the user logs out
if (restSnapshotStop) {
restSnapshotStop()
restSnapshotStop = null
}
if (graphqlSnapshotStop) {
graphqlSnapshotStop()
graphqlSnapshotStop = null
}
} else {
restSnapshotStop = firebase
.firestore()
.collection("users")
.doc(user.uid)
.collection("history")
.orderBy("updatedOn", "desc")
.limit(HISTORY_LIMIT)
.onSnapshot((historyRef) => {
const history: any[] = []
historyRef.forEach((doc) => {
const entry = doc.data()
entry.id = doc.id
history.push(entry)
})
loadedRESTHistory = false
setRESTHistoryEntries(history)
loadedRESTHistory = true
})
graphqlSnapshotStop = firebase
.firestore()
.collection("users")
.doc(user.uid)
.collection("graphqlHistory")
.orderBy("updatedOn", "desc")
.limit(HISTORY_LIMIT)
.onSnapshot((historyRef) => {
const history: any[] = []
historyRef.forEach((doc) => {
const entry = doc.data()
entry.id = doc.id
history.push(entry)
})
loadedGraphqlHistory = false
setGraphqlHistoryEntries(history)
loadedGraphqlHistory = true
})
}
})
}

33
helpers/fb/index.ts Normal file
View File

@@ -0,0 +1,33 @@
import firebase from "firebase"
import { initAuth } from "./auth"
import { initCollections } from "./collections"
import { initEnvironments } from "./environments"
import { initHistory } from "./history"
import { initSettings } from "./settings"
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DATABASE_URL,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
}
let initialized = false
export function initializeFirebase() {
if (!initialized) {
firebase.initializeApp(firebaseConfig)
initAuth()
initSettings()
initCollections()
initHistory()
initEnvironments()
initialized = true
}
}

92
helpers/fb/settings.ts Normal file
View File

@@ -0,0 +1,92 @@
import firebase from "firebase"
import { currentUser$ } from "./auth"
import { applySetting, settingsStore, SettingsType } from "~/newstore/settings"
/**
* Used locally to prevent infinite loop when settings sync update
* is applied to the store which then fires the store sync listener.
* When you want to update settings and not want to fire the update listener,
* set this to true and then set it back to false once it is done
*/
let loadedSettings = false
/**
* Write Transform
*/
async function writeSettings(setting: string, value: any) {
if (currentUser$.value === null)
throw new Error("Cannot write setting, user not signed in")
const st = {
updatedOn: new Date(),
author: currentUser$.value.uid,
author_name: currentUser$.value.displayName,
author_image: currentUser$.value.photoURL,
name: setting,
value,
}
try {
await firebase
.firestore()
.collection("users")
.doc(currentUser$.value.uid)
.collection("settings")
.doc(setting)
.set(st)
} catch (e) {
console.error("error updating", st, e)
throw e
}
}
export function initSettings() {
settingsStore.dispatches$.subscribe((dispatch) => {
if (currentUser$.value && loadedSettings) {
if (dispatch.dispatcher === "bulkApplySettings") {
Object.keys(dispatch.payload).forEach((key) => {
writeSettings(key, dispatch.payload[key])
})
} else {
writeSettings(
dispatch.payload.settingKey,
settingsStore.value[dispatch.payload.settingKey as keyof SettingsType]
)
}
}
})
let snapshotStop: (() => void) | null = null
// Subscribe and unsubscribe event listeners
currentUser$.subscribe((user) => {
if (!user && snapshotStop) {
// User logged out
snapshotStop()
snapshotStop = null
} else if (user) {
snapshotStop = firebase
.firestore()
.collection("users")
.doc(user.uid)
.collection("settings")
.onSnapshot((settingsRef) => {
const settings: any[] = []
settingsRef.forEach((doc) => {
const setting = doc.data()
setting.id = doc.id
settings.push(setting)
})
loadedSettings = false
settings.forEach((e) => {
if (e && e.name && e.value != null) {
applySetting(e.name, e.value)
}
})
loadedSettings = true
})
}
})
}

10
helpers/teams/BackendUserInfo.ts
View File

@@ -1,6 +1,6 @@
import { BehaviorSubject } from "rxjs"
import gql from "graphql-tag"
import { fb } from "../fb"
import { authIdToken$ } from "../fb/auth"
import { apolloClient } from "../apollo"
/*
@@ -11,7 +11,7 @@ import { apolloClient } from "../apollo"
/**
* Defines the information provided about a user
*/
interface UserInfo {
export interface UserInfo {
/**
* UID of the user
*/
@@ -42,10 +42,8 @@ export const currentUserInfo$ = new BehaviorSubject<UserInfo | null>(null)
/**
* Initializes the currenUserInfo$ view and sets up its update mechanism
*/
export async function initUserInfo() {
if (fb.idToken) await updateUserInfo()
fb.idToken$.subscribe((token) => {
export function initUserInfo() {
authIdToken$.subscribe((token) => {
if (token) {
updateUserInfo()
} else {

3
lang/bn-BD.json
View File

@@ -263,10 +263,7 @@
"syncCollections": "সংগ্রহ",
"syncEnvironments": "এনভায়রনমেন্টসমূহ",
"turn_on": "চালু করুন",
"login_first": "প্রথমে লগিন করুন",
"paste_a_note": "একটি মন্তব্য লিপিবদ্ধ করুন",
"import_from_sync": "সিঙ্ক থেকে ইমপোর্ট করুন",
"notes": "মন্তব্য",
"socketio": "সকেট ইনপুট/আউটপুট",
"event_name": "ইভেন্টের নাম",
"mqtt": "এম.কিউ.টি.টি",

3
lang/de-DE.json
View File

@@ -90,10 +90,7 @@
"syncEnvironments": "Environments",
"turn_on": "Anschalten",
"turn_off": "Ausschalten",
"login_first": "Logge dich zuerst ein",
"paste_a_note": "Füge eine Notiz hinzu",
"import_from_sync": "Von Sync importieren",
"notes": "Notizen",
"socketio": "Socket.IO",
"event_name": "Event Name",
"mqtt": "MQTT",

3
lang/en-US.json
View File

@@ -266,10 +266,7 @@
"syncEnvironments": "Environments",
"turn_on": "Turn on",
"turn_off": "Turn off",
"login_first": "Login first",
"paste_a_note": "Paste a note",
"import_from_sync": "Import from Sync",
"notes": "Notes",
"socketio": "Socket.IO",
"event_name": "Event Name",
"mqtt": "MQTT",

3
lang/es-ES.json
View File

@@ -240,7 +240,6 @@
"syncCollections": "Colecciones",
"syncEnvironments": "Entornos",
"turn_on": "Encender",
"login_first": "Inicie sesión primero",
"import_from_sync": "Importar desde Sync",
"add_one_variable": "(añade al menos una variable)",
"check_graphql_valid": "Compruebe la URL para ver si es un endpoint GraphQL válido",
@@ -262,8 +261,6 @@
"scrollInto_use_toggle": "Auto scroll",
"prettify_query": "Formatear query",
"prettify_body": "Formatear cuerpo",
"paste_a_note": "Pegar una nota",
"notes": "Notas",
"new_environment": "Nuevo entorno",
"my_new_environment": "Mi nuevo entorno",
"mqtt_unsubscribe": "Desuscribirse",

1
lang/fr-FR.json
View File

@@ -241,7 +241,6 @@
"syncCollections": "Collections",
"syncEnvironments": "Environments",
"turn_on": "Activer",
"login_first": "Se connecter d'abord",
"paste_a_collection": "Coller une collection",
"import_from_sync": "Importer depuis la synchronisation",
"create_new_collection": "Créer une nouvelle collection",

3
lang/id-ID.json
View File

@@ -263,10 +263,7 @@
"syncEnvironments": "Lingkungan",
"turn_on": "Nyalakan",
"turn_off": "Matikan",
"login_first": "Masuk dahulu",
"paste_a_note": "Tempel catatan",
"import_from_sync": "Impor dari Sinkronasi",
"notes": "Catatan",
"socketio": "Socket.IO",
"event_name": "Nama Kejadian",
"mqtt": "MQTT",

3
lang/in-IN.json
View File

@@ -266,10 +266,7 @@
"syncEnvironments": "वातावरण",
"turn_on": "चालू करो",
"turn_off": "बंद करें",
"login_first": "पहले प्रवेश करो",
"paste_a_note": "एक नोट चिपकाएं",
"import_from_sync": "सिंक से आयात करें",
"notes": "टिप्पणियाँ",
"socketio": "सॉकेट.आईओ",
"event_name": "घटना नाम",
"mqtt": "एमक्यूटीटी",

3
lang/ko-KR.json
View File

@@ -263,10 +263,7 @@
"syncCollections": "컬렉션",
"syncEnvironments": "환경변수",
"turn_on": "Turn on",
"login_first": "먼저 로그인해주세요.",
"paste_a_note": "노트 붙여넣기",
"import_from_sync": "동기화에서 가져오기",
"notes": "노트",
"socketio": "Socket.IO",
"event_name": "이",
"mqtt": "MQTT",

3
lang/ml-ML.json
View File

@@ -263,10 +263,7 @@
"syncCollections": "ശേഖരങ്ങൾ",
"syncEnvironments": "പരിതസ്ഥിതികൾ",
"turn_on": "ഓൺ ചെയ്യുക",
"login_first": "ആദ്യം പ്രവേശിക്കുക",
"paste_a_note": "ഒരു കുറിപ്പ് ഒട്ടിക്കുക",
"import_from_sync": "Sync-ൽ നിന്ന് ഇറക്കുമതി ചെയ്യുക",
"notes": "കുറിപ്പുകൾ",
"socketio": "Socket.IO",
"event_name": "ഇവന്റിന്റെ പേര്",
"mqtt": "MQTT",

3
lang/nb-NO.json
View File

@@ -266,10 +266,7 @@
"syncEnvironments": "Miljøer",
"turn_on": "Slå på",
"turn_off": "Slå av",
"login_first": "Logg inn først",
"paste_a_note": "Lim inn et notat",
"import_from_sync": "Importer fra synkronisering",
"notes": "Notater",
"socketio": "Socket.IO",
"event_name": "Hendelsesnavn",
"mqtt": "MQTT",

3
lang/nl-BE.json
View File

@@ -263,10 +263,7 @@
"syncCollections": "Collecties",
"syncEnvironments": "Omgevingen",
"turn_on": "Inschakelen",
"login_first": "Meld u eerst aan",
"paste_a_note": "Notitie plakken",
"import_from_sync": "Importeren van Sync",
"notes": "Notities",
"socketio": "Socket.IO",
"event_name": "Event-naam",
"mqtt": "MQTT",

3
lang/pt-BR.json
View File

@@ -271,10 +271,7 @@
"scrollInto_use_toggle": "Auto rolagem",
"sync": "Sincronizar",
"turn_on": "Ligar",
"login_first": "Realize o login primeiro",
"paste_a_note": "Cole uma nota",
"import_from_sync": "Importar de Sincronização",
"notes": "Notas",
"socketio": "Socket.IO",
"event_name": "Nome do Evento",
"mqtt": "MQTT",

3
lang/pt-PT.json
View File

@@ -260,10 +260,7 @@
"syncCollections": "Coleções",
"syncEnvironments": "Ambientes",
"turn_on": "Ativar",
"login_first": "Entre primeiro",
"paste_a_note": "Cole uma nota",
"import_from_sync": "Importar from Sync",
"notes": "Notas",
"socketio": "Socket.IO",
"event_name": "Nome do evento",
"mqtt": "MQTT",

3
lang/tr-TR.json
View File

@@ -261,10 +261,7 @@
"syncCollections": "Koleksiyonlar",
"syncEnvironments": "Ortamlar",
"turn_on": "Aç",
"login_first": "Önce Giriş Yap",
"paste_a_note": "Bir not yapıştır",
"import_from_sync": "Senkronizasyondan İçeri Aktar",
"notes": "Notlar",
"socketio": "Socket.IO",
"event_name": "Olay Adı",
"mqtt": "MQTT",

3
lang/vi-VN.json
View File

@@ -263,10 +263,7 @@
"syncCollections": "Bộ sưu tập",
"syncEnvironments": "Môi trường",
"turn_on": "Bật",
"login_first": "Đăng nhập trước",
"paste_a_note": "Dán ghi chú",
"import_from_sync": "Nhập từ đồng bồ",
"notes": "Ghi chú",
"socketio": "Socket.IO",
"event_name": "Tên Event",
"mqtt": "MQTT",

3
lang/zh-CN.json
View File

@@ -268,10 +268,7 @@
"syncEnvironments": "环境",
"turn_on": "点击开启",
"turn_off": "点击关闭",
"login_first": "请先登录：",
"paste_a_note": "输入新便笺",
"import_from_sync": "从云存储导入",
"notes": "便笺",
"socketio": "Socket.IO",
"event_name": "事件名称",
"mqtt": "MQTT",

3
lang/zh-TW.json
View File

@@ -258,10 +258,7 @@
"syncCollections": "收藏庫",
"syncEnvironments": "環境",
"turn_on": "打開",
"login_first": "請先登入",
"paste_a_note": "Paste a note",
"import_from_sync": "Import from Sync",
"notes": "Notes",
"socketio": "Socket.IO",
"event_name": "Event Name",
"mqtt": "MQTT",

2
layouts/default.vue
View File

@@ -18,6 +18,7 @@ import { setupLocalPersistence } from "~/newstore/localpersistence"
import { performMigrations } from "~/helpers/migrations"
import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
import { registerApolloAuthUpdate } from "~/helpers/apollo"
import { initializeFirebase } from "~/helpers/fb"
export default {
beforeMount() {
@@ -62,6 +63,7 @@ export default {
setupLocalPersistence()
initializeFirebase()
initUserInfo()
},
beforeDestroy() {

6
layouts/error.vue
View File

@@ -22,6 +22,8 @@
</template>
<script>
import { initializeFirebase } from "~/helpers/fb"
export default {
props: {
error: {
@@ -37,7 +39,9 @@ export default {
},
}
},
beforeMount() {
initializeFirebase()
},
computed: {
statusCode() {
return (this.error && this.error.statusCode) || 500

34
newstore/settings.ts
View File

@@ -64,28 +64,17 @@ const dispatchers = defineDispatchers({
const result: Partial<SettingsType> = {}
result[settingKey] = value
return result
},
applySettingFB<K extends keyof SettingsType>(
_currentState: SettingsType,
{ settingKey, value }: { settingKey: K; value: SettingsType[K] }
) {
if (!validKeys.includes(settingKey)) {
console.log(
`Ignoring non-existent setting key '${settingKey}' assignment by firebase`
)
return {}
}
const result: Partial<SettingsType> = {}
result[settingKey] = value
return result
},
})
export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
/**
* An observable value to make avail all the state information at once
*/
export const settings$ = settingsStore.subject$.asObservable()
export function getSettingSubject<K extends keyof SettingsType>(
settingKey: K
): Observable<SettingsType[K]> {
@@ -120,16 +109,3 @@ export function applySetting<K extends keyof SettingsType>(
},
})
}
export function applySettingFB<K extends keyof SettingsType>(
settingKey: K,
value: SettingsType[K]
) {
settingsStore.dispatch({
dispatcher: "applySettingFB",
payload: {
settingKey,
value,
},
})
}

18
pages/doc.vue
View File

@@ -64,18 +64,18 @@
<div v-else class="row-wrapper">
<div
v-tooltip.bottom="{
content: !fb.currentUser
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
:disabled="
!fb.currentUser
!currentUser
? true
: fb.currentUser.provider !== 'github.com'
: currentUser.provider !== 'github.com'
? true
: false
"
@@ -113,7 +113,7 @@
<script>
import Mustache from "mustache"
import { fb } from "~/helpers/fb"
import { currentUser$ } from "~/helpers/fb/auth"
import DocsTemplate from "~/assets/md/docs.md"
import folderContents from "~/assets/md/folderContents.md"
import folderBody from "~/assets/md/folderBody.md"
@@ -121,13 +121,17 @@ import folderBody from "~/assets/md/folderBody.md"
export default {
data() {
return {
fb,
collectionJSON: "[]",
items: [],
docsMarkdown: "",
selected: [],
}
},
subscriptions() {
return {
currentUser: currentUser$,
}
},
head() {
return {
title: `Documentation • Hoppscotch`,
@@ -147,7 +151,7 @@ export default {
},
{
headers: {
Authorization: `token ${fb.currentUser.accessToken}`,
Authorization: `token ${this.currentUser.accessToken}`,
Accept: "application/vnd.github.v3+json",
},
}

25
pages/enter.vue
View File

@@ -6,25 +6,34 @@
</div>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { initializeFirebase } from "~/helpers/fb"
import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
export default {
export default Vue.extend({
data() {
return {
signingInWithEmail: false,
error: null,
}
},
beforeMount() {
initializeFirebase()
},
async mounted() {
if (fb.isSignInWithEmailLink(window.location.href)) {
if (isSignInWithEmailLink(window.location.href)) {
this.signingInWithEmail = true
let email = window.localStorage.getItem("emailForSignIn")
if (!email) {
email = window.prompt("Please provide your email for confirmation")
email = window.prompt(
"Please provide your email for confirmation"
) as string
}
await fb
.signInWithEmailLink(email, window.location.href)
await signInWithEmailLink(email, window.location.href)
.then(() => {
window.localStorage.removeItem("emailForSignIn")
this.$router.push({ path: "/" })
@@ -38,5 +47,5 @@ export default {
})
}
},
}
})
</script>

8
pages/graphql.vue
View File

@@ -457,14 +457,6 @@
<SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql />
</SmartTab>
<!-- <SmartTab :id="'env'" :label="$t('environments')">
<Environments @use-environment="useSelectedEnvironment($event)" />
</SmartTab>
<SmartTab :id="'notes'" :label="$t('notes')">
<HttpNotes />
</SmartTab> -->
</SmartTabs>
</aside>
</TranslateSlideLeft>

6
pages/index.vue
View File

@@ -628,10 +628,6 @@
<SmartTab :id="'env'" :label="$t('environments')">
<Environments />
</SmartTab>
<SmartTab :id="'notes'" :label="$t('notes')">
<HttpNotes />
</SmartTab>
</SmartTabs>
</section>
</aside>
@@ -766,7 +762,6 @@ import runTestScriptWithVariables from "~/helpers/postwomanTesting"
import parseTemplateString from "~/helpers/templating"
import { tokenRequest, oauthRedirect } from "~/helpers/oauth"
import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
import { fb } from "~/helpers/fb"
import {
hasPathParams,
addPathParamsToVariables,
@@ -811,7 +806,6 @@ export default {
showSaveRequestModal: false,
editRequest: {},
activeSidebar: true,
fb,
customMethod: false,
files: [],
filenames: "",

64
pages/settings.vue
View File

@@ -1,29 +1,29 @@
<template>
<div class="page">
<div v-if="currentUser && currentUser.eaInvited">
<div v-if="currentBackendUser && currentBackendUser.eaInvited">
<Teams />
</div>
<AppSection ref="account" :label="$t('account')">
<div class="flex flex-col">
<label>{{ $t("account") }}</label>
<div v-if="fb.currentUser">
<div v-if="currentUser">
<button class="icon">
<img
v-if="fb.currentUser.photoURL"
:src="fb.currentUser.photoURL"
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="w-6 h-6 rounded-full material-icons"
/>
<i v-else class="material-icons">account_circle</i>
<span>
{{ fb.currentUser.displayName || $t("nothing_found") }}
{{ currentUser.displayName || $t("nothing_found") }}
</span>
</button>
<br />
<button class="icon">
<i class="material-icons">email</i>
<span>
{{ fb.currentUser.email || $t("nothing_found") }}
{{ currentUser.email || $t("nothing_found") }}
</span>
</button>
<br />
@@ -57,13 +57,6 @@
{{ SYNC_HISTORY ? $t("enabled") : $t("disabled") }}
</SmartToggle>
</p>
<p v-if="fb.currentSettings.length !== 3">
<button @click="initSettings">
<i class="material-icons">sync</i>
<span>{{ $t("turn_on") + " " + $t("sync") }}</span>
</button>
</p>
</div>
<div v-else>
<label>{{ $t("login_with") }}</label>
@@ -214,7 +207,6 @@
<script lang="ts">
import Vue from "vue"
import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
import { fb } from "~/helpers/fb"
import {
getSettingSubject,
applySetting,
@@ -223,6 +215,7 @@ import {
} from "~/newstore/settings"
import type { KeysMatching } from "~/types/ts-utils"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
import { currentUser$ } from "~/helpers/fb/auth"
type SettingsType = typeof defaultSettings
@@ -234,7 +227,6 @@ export default Vue.extend({
: null,
doneButton: '<i class="material-icons">done</i>',
fb,
SYNC_COLLECTIONS: true,
SYNC_ENVIRONMENTS: true,
@@ -247,6 +239,9 @@ export default Vue.extend({
PROXY_ENABLED: true,
showEmail: false,
currentBackendUser: null,
currentUser: null,
}
},
subscriptions() {
@@ -268,7 +263,8 @@ export default Vue.extend({
SYNC_HISTORY: getSettingSubject("syncHistory"),
// Teams feature flag
currentUser: currentUserInfo$,
currentBackendUser: currentUserInfo$,
currentUser: currentUser$,
}
},
head() {
@@ -311,18 +307,6 @@ export default Vue.extend({
value: SettingsType[K]
) {
this.applySetting(name, value)
if (name === "syncCollections" && value) {
this.syncCollections()
}
if (name === "syncEnvironments" && value) {
this.syncEnvironments()
}
},
initSettings() {
applySetting("syncHistory", true)
applySetting("syncCollections", true)
applySetting("syncEnvironments", true)
},
resetProxy({ target }: { target: HTMLElement }) {
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
@@ -336,30 +320,6 @@ export default Vue.extend({
1000
)
},
// TODO: Use the new collection store
syncCollections(): void {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
if (this.$store.state.postwoman.collections)
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
"collections"
)
if (this.$store.state.postwoman.collectionsGraphql)
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
},
syncEnvironments(): void {
if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
fb.writeEnvironments(
JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
)
}
},
},
})
</script>