feat: init profile page
This commit is contained in:
liyasthomas
138
packages/hoppscotch-app/pages/profile.vue
Normal file
138
packages/hoppscotch-app/pages/profile.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="py-8 px-4">
|
||||
<div v-if="currentUser === null">
|
||||
<ButtonPrimary
|
||||
:label="$t('auth.login')"
|
||||
@click.native="showLogin = true"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<div class="flex px-4 items-center">
|
||||
<img
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="rounded-full h-16 w-16"
|
||||
/>
|
||||
<SmartIcon v-else name="user" class="svg-icons" />
|
||||
<div class="ml-4">
|
||||
<label class="heading">
|
||||
{{ currentUser.displayName || $t("state.nothing_found") }}
|
||||
</label>
|
||||
<p class="flex text-secondaryLight items-center">
|
||||
{{ currentUser.email || $t("state.nothing_found") }}
|
||||
<SmartIcon
|
||||
name="verified"
|
||||
v-if="currentUser.emailVerified"
|
||||
class="ml-2 text-green-500 svg-icons"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<SmartTabs styles="sticky bg-primary z-10 top-0">
|
||||
<SmartTab
|
||||
:id="'sync'"
|
||||
:label="$t('settings.account')"
|
||||
:selected="true"
|
||||
>
|
||||
<section class="p-4">
|
||||
<h4 class="font-semibold text-secondaryDark">
|
||||
{{ $t("settings.sync") }}
|
||||
</h4>
|
||||
<div class="mt-1 text-secondaryLight">
|
||||
{{ $t("settings.sync_description") }}
|
||||
</div>
|
||||
<div class="space-y-4 py-4">
|
||||
<div class="flex items-center">
|
||||
<SmartToggle
|
||||
:on="SYNC_COLLECTIONS"
|
||||
@change="
|
||||
toggleSettings('syncCollections', !SYNC_COLLECTIONS)
|
||||
"
|
||||
>
|
||||
{{ $t("settings.sync_collections") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SmartToggle
|
||||
:on="SYNC_ENVIRONMENTS"
|
||||
@change="
|
||||
toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
|
||||
"
|
||||
>
|
||||
{{ $t("settings.sync_environments") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SmartToggle
|
||||
:on="SYNC_HISTORY"
|
||||
@change="toggleSettings('syncHistory', !SYNC_HISTORY)"
|
||||
>
|
||||
{{ $t("settings.sync_history") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</SmartTab>
|
||||
<SmartTab
|
||||
v-if="currentBackendUser && currentBackendUser.eaInvited"
|
||||
:id="'teams'"
|
||||
:label="$t('team.title')"
|
||||
>
|
||||
<AppSection label="teams">
|
||||
<Teams />
|
||||
</AppSection>
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</div>
|
||||
</div>
|
||||
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
|
||||
import { currentUser$ } from "~/helpers/fb/auth"
|
||||
import { useReadonlyStream } from "~/helpers/utils/composables"
|
||||
import { applySetting, SettingsType, useSetting } from "~/newstore/settings"
|
||||
import { KeysMatching } from "~/types/ts-utils"
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
SYNC_COLLECTIONS: useSetting("syncCollections"),
|
||||
SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
|
||||
SYNC_HISTORY: useSetting("syncHistory"),
|
||||
currentUser: useReadonlyStream(currentUser$, currentUser$.value),
|
||||
currentBackendUser: useReadonlyStream(
|
||||
currentUserInfo$,
|
||||
currentUserInfo$.value
|
||||
),
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showLogin: false,
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: `${this.$t("navigation.profile")} • Hoppscotch`,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
|
||||
applySetting(key, value)
|
||||
},
|
||||
toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
|
||||
name: K,
|
||||
value: SettingsType[K]
|
||||
) {
|
||||
this.applySetting(name, value)
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,104 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="divide-y divide-dividerLight space-y-8">
|
||||
<div class="md:grid md:gap-4 md:grid-cols-3">
|
||||
<div class="p-8 md:col-span-1">
|
||||
<h3 class="heading">
|
||||
{{ $t("settings.account") }}
|
||||
</h3>
|
||||
<p class="mt-1 text-secondaryLight">
|
||||
{{ $t("settings.account_description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-8 md:col-span-2">
|
||||
<div v-if="currentUser === null">
|
||||
<ButtonPrimary
|
||||
:label="`${$t('auth.login')}`"
|
||||
@click.native="showLogin = true"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="space-y-8">
|
||||
<section>
|
||||
<h4 class="font-semibold text-secondaryDark">
|
||||
{{ $t("settings.user") }}
|
||||
</h4>
|
||||
<div class="space-y-4 py-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="rounded-full h-5 w-5"
|
||||
/>
|
||||
<SmartIcon v-else name="user" class="svg-icons" />
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<label>
|
||||
{{ currentUser.displayName || $t("state.nothing_found") }}
|
||||
</label>
|
||||
<p class="mt-1 text-secondaryLight">
|
||||
{{ $t("settings.account_name_description") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center">
|
||||
<SmartIcon name="at-sign" class="svg-icons" />
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<label>
|
||||
{{ currentUser.email || $t("state.nothing_found") }}
|
||||
</label>
|
||||
<p class="mt-1 text-secondaryLight">
|
||||
{{ $t("settings.account_email_description") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Teams v-if="currentBackendUser && currentBackendUser.eaInvited" />
|
||||
<section>
|
||||
<h4 class="font-semibold text-secondaryDark">
|
||||
{{ $t("settings.sync") }}
|
||||
</h4>
|
||||
<div class="mt-1 text-secondaryLight">
|
||||
{{ $t("settings.sync_description") }}
|
||||
</div>
|
||||
<div class="space-y-4 py-4">
|
||||
<div class="flex items-center">
|
||||
<SmartToggle
|
||||
:on="SYNC_COLLECTIONS"
|
||||
@change="
|
||||
toggleSettings('syncCollections', !SYNC_COLLECTIONS)
|
||||
"
|
||||
>
|
||||
{{ $t("settings.sync_collections") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SmartToggle
|
||||
:on="SYNC_ENVIRONMENTS"
|
||||
@change="
|
||||
toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
|
||||
"
|
||||
>
|
||||
{{ $t("settings.sync_environments") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SmartToggle
|
||||
:on="SYNC_HISTORY"
|
||||
@change="toggleSettings('syncHistory', !SYNC_HISTORY)"
|
||||
>
|
||||
{{ $t("settings.sync_history") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:grid md:gap-4 md:grid-cols-3">
|
||||
<div class="p-8 md:col-span-1">
|
||||
<h3 class="heading">
|
||||
@@ -325,7 +227,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
|
||||
<SmartConfirmModal
|
||||
:show="confirmRemove"
|
||||
:title="`${$t('confirm.remove_telemetry')} ${$t(
|
||||
@@ -344,7 +245,6 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
|
||||
import {
|
||||
hasExtensionInstalled,
|
||||
hasChromeExtensionInstalled,
|
||||
@@ -357,9 +257,7 @@ import {
|
||||
useSetting,
|
||||
} from "~/newstore/settings"
|
||||
import type { KeysMatching } from "~/types/ts-utils"
|
||||
import { currentUser$ } from "~/helpers/fb/auth"
|
||||
import { getLocalConfig } from "~/newstore/localpersistence"
|
||||
import { useReadonlyStream } from "~/helpers/utils/composables"
|
||||
|
||||
type SettingsType = typeof defaultSettings
|
||||
|
||||
@@ -371,17 +269,9 @@ export default defineComponent({
|
||||
PROXY_KEY: useSetting("PROXY_KEY"),
|
||||
EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
|
||||
EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
|
||||
SYNC_COLLECTIONS: useSetting("syncCollections"),
|
||||
SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
|
||||
SYNC_HISTORY: useSetting("syncHistory"),
|
||||
TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
|
||||
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
|
||||
ZEN_MODE: useSetting("ZEN_MODE"),
|
||||
currentUser: useReadonlyStream(currentUser$, currentUser$.value),
|
||||
currentBackendUser: useReadonlyStream(
|
||||
currentUserInfo$,
|
||||
currentUserInfo$.value
|
||||
),
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -395,9 +285,7 @@ export default defineComponent({
|
||||
|
||||
clearIcon: "rotate-ccw",
|
||||
|
||||
showLogin: false,
|
||||
|
||||
active: getLocalConfig("THEME_COLOR") || "indigo",
|
||||
active: getLocalConfig("THEME_COLOR") || "blue",
|
||||
confirmRemove: false,
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user