Skip to content

Commit

Permalink
Fix logout and account pages
Browse files Browse the repository at this point in the history
  • Loading branch information
peterpolman committed Sep 19, 2024
1 parent f1b5984 commit 0d2de9e
Show file tree
Hide file tree
Showing 10 changed files with 139 additions and 138 deletions.
6 changes: 1 addition & 5 deletions apps/studio/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<template>
<div class="d-flex bg-primary h-100 overflow-auto flex-column gradient-bg-opacity">
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
<router-view />
</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion apps/studio/src/components/BaseFormGroup.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<b-form-group label-class="d-flex" class="mb-3">
<b-form-group label-class="d-flex text-opaque" class="mb-3">
<template #label>
<span v-if="label">{{ label }}</span>
<slot v-else name="label" />
Expand Down
11 changes: 5 additions & 6 deletions apps/studio/src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { useAuthStore } from '../stores/Auth';

async function beforeEnter(to: any, from: any, next: any) {
// Redirect to last match
if (to.hash && to.hash.startsWith('#access_token')) {
const path = to.path.split('#')[0];
return next({ path });
Expand Down Expand Up @@ -39,13 +38,13 @@ const routes: Array<RouteRecordRaw> = [
path: '/qr-codes',
component: () => import(/* webpackChunkName: "entries" */ '../views/studio/Entries.vue'),
},
{
path: '/account',
name: 'account',
component: () => import(/* webpackChunkName: "signinredirect" */ '../views/studio/Account.vue'),
},
],
},
{
path: '/account',
name: 'account',
component: () => import(/* webpackChunkName: "signinredirect" */ '../views/Account.vue'),
},
{
path: '/auth/redirect',
name: 'auth-redirect',
Expand Down
27 changes: 7 additions & 20 deletions apps/studio/src/stores/Auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,34 +97,21 @@ export const useAuthStore = defineStore('auth', {
const provider = accountVariantProviderKindMap[variant] as Provider;
if (!provider) throw new Error('Requested provider not available.');

const config = this._getOAuthConfig(provider, {
redirectTo: window.location.origin + '/auth/redirect',
scopes: OAuthScopes[provider],
});
const { data, error } = await supabase.auth.signInWithOAuth(config);
if (error) throw new Error(error.message);

popup.open(data.url);
},
_getOAuthConfig(
provider: Provider,
options: {
redirectTo: string;
scopes: TOAuthScope[];
},
) {
return {
const { data, error } = await supabase.auth.signInWithOAuth({
provider,
options: {
queryParams: {
access_type: 'offline',
prompt: 'consent',
},
...options,
redirectTo: window.location.origin + '/auth/redirect',
scopes: OAuthScopes[provider].join(' '),
skipBrowserRedirect: true,
scopes: options.scopes.join(' '),
},
};
});
if (error) throw new Error(error.message);

popup.open(data.url);
},
async logout() {
await supabase.auth.signOut();
Expand Down
17 changes: 0 additions & 17 deletions apps/studio/src/views/Account.vue

This file was deleted.

84 changes: 29 additions & 55 deletions apps/studio/src/views/Login.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,15 @@
<b-row class="h-100">
<b-col md="6" class="h-100 d-flex align-items-center justify-content-center flex-column bg-dark">
<div>
<b-img width="60" :src="imgLogo" fluid />
<b-img width="60" :src="imgLogo" fluid class="rounded" />
<div>
<strong class="my-3 d-block font-weight-normal" :style="{ fontSize: '1.5rem' }">
Sign in to studio
</strong>
</div>
<b-card footer-class="text-right small" body-class="p-5">
<b-alert show variant="primary">
<i class="fas fa-info-circle ml-0 mr-2" />
By continuing you accept TwinStory's
<b-link
class="font-weight-bold"
href="https://thx.network/general-terms-and-conditions.pdf"
target="_blank"
>
Terms &amp; Conditions
</b-link>
and
<b-link
class="font-weight-bold"
href="https://thx.network/privacy-policy.pdf"
target="_blank"
>
Privacy Policy
</b-link>
.
</b-alert>

<b-card footer-class="p-3 d-flex justify-content-end" body-class="p-5 pb-4">
<b-form v-if="!isEmailSent" @submit.prevent="onSubmitSigninWithOTP">
<BaseFormGroup label="Use your e-mail">
<BaseFormGroup label="Use your e-mail" label-class="text-opaque">
<b-form-input v-model="email" placeholder="yourname@example.com" />
</BaseFormGroup>
<b-button :disabled="!isEmailValid" variant="primary" type="submit" class="w-100">
Expand All @@ -60,40 +39,39 @@

<BaseHrOrSeparator />

<BaseFormGroup label="Use a trusted provider">
<b-button
v-for="(provider, key) of providers"
:key="key"
variant="primary"
:title="provider.title"
class="me-2 p-2 px-3"
@click="onClickSigninWithOAuth(provider.variant)"
>
<b-spinner v-if="provider.isLoading" small />
<BaseIcon
v-else
:icon="provider.kind"
type="fab"
class="m-0"
style="font-size: 1rem"
/>
</b-button>
<BaseFormGroup label="Use a trusted provider" label-class="text-opaque">
<div class="d-flex justify-content-between w-100 gap-2">
<b-button
v-for="provider of providers"
variant="dark"
:title="provider.title"
class="p-2 px-3 rounded"
@click="onClickSigninWithOAuth(provider.variant)"
>
<b-spinner v-if="isLoadingProvider == provider.kind" small />
<BaseIcon v-else :icon="provider.kind" type="fab" style="font-size: 1rem" />
</b-button>
</div>
</BaseFormGroup>

<template #footer>
<b-link
class="ms-1"
href="https://discord.com/invite/thx-network-836147176270856243"
class="ms-3 text-decoration-none text-opaque text-white"
href="https://twinstory.io/support"
target="_blank"
>
Help
</b-link>
<b-link class="ms-1" href="https://thx.network/privacy-policy.pdf" target="_blank">
<b-link
class="ms-3 text-decoration-none text-opaque text-white"
href="https://twinstory.io/privacy-policy.pdf"
target="_blank"
>
Privacy
</b-link>
<b-link
class="ms-1"
href="https://thx.network/general-terms-and-conditions.pdf"
class="ms-3 text-decoration-none text-opaque text-white"
href="https://twinstory.io/general-terms-and-conditions.pdf"
target="_blank"
>
Terms
Expand All @@ -103,7 +81,6 @@
</div>
</b-col>
<b-col
class="bg-primary"
:style="{
backgroundSize: 'cover',
backgroundPosition: 'center center',
Expand Down Expand Up @@ -162,6 +139,7 @@ export default defineComponent({
isLoading: false,
},
} as any,
isLoadingProvider: null as null | AccountVariant,
isLoadingOTP: false,
isLoadingOTPVerify: false,
isEmailSent: false,
Expand Down Expand Up @@ -200,16 +178,12 @@ export default defineComponent({
}
},
async onClickSigninWithOAuth(variant: AccountVariant) {
this.providers[variant].isLoading = true;
this.isLoadingProvider = this.providers[variant].kind;
try {
await this.authStore.signInWithOAuth({
variant,
});
if (!this.authStore.session) throw new Error('An issue occured while logging in. Please try again.');
await this.authStore.signInWithOAuth({ variant });
} catch (error) {
this.error = (error as Error).message;
} finally {
this.providers[variant].isLoading = false;
this.isLoadingProvider = null;
}
},
},
Expand Down
23 changes: 21 additions & 2 deletions apps/studio/src/views/Logout.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,36 @@
<template>logout</template>
<template>
<div class="d-flex align-items-center justify-content-center h-100">
<b-spinner v-if="isLoading" variant="light" small />
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useAuthStore } from '@thxnetwork/studio/stores';
import { toast } from '@thxnetwork/studio/utils/toast';
export default defineComponent({
name: 'Logout',
data() {
return {
isLoading: false,
};
},
computed: {
...mapStores(useAuthStore),
},
async mounted() {
await this.authStore.logout();
try {
await this.authStore.logout();
this.isLoading = false;
} catch (error: any) {
toast(error.message, 'light', 3000, () => {
return;
});
} finally {
this.isLoading = true;
}
},
});
</script>
4 changes: 2 additions & 2 deletions apps/studio/src/views/Studio.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@
<b-nav-item href="https://www.twinstory.io/faq" target="_blank">FAQ</b-nav-item>
<b-nav-item href="https://www.twinstory.io/support" target="_blank">Support</b-nav-item>
</b-navbar-nav>
<b-nav-item-dropdown right no-caret class="d-flex">
<b-nav-item-dropdown end no-caret class="d-flex">
<template #button-content>
<b-avatar
size="40"
variant="dark"
:src="accountStore.account ? accountStore.account.profileImg : undefined"
:src="accountStore.account ? accountStore.account.profileImg : ''"
:text="accountStore.account ? accountStore.account.username.substring(0, 2) : '..'"
/>
</template>
Expand Down
36 changes: 36 additions & 0 deletions apps/studio/src/views/studio/Account.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<template v-if="accountStore.account">
<b-container class="py-5 text-white">
<h1>{{ accountStore.account.username }}</h1>
<p class="lead">{{ accountStore.account.email }}</p>
</b-container>
<div class="bg-dark py-5 flex-grow-1">
<b-container>
<b-card variant="darker">
<BaseFormGroup label="Account ID">
{{ accountStore.account.sub }}
</BaseFormGroup>
<BaseFormGroup label="Created">
{{ accountStore.account.createdAt }}
</BaseFormGroup>
</b-card>
</b-container>
</div>
</template>
</template>

<script lang="ts">
import { mapStores } from 'pinia';
import { defineComponent } from 'vue';
import { useAccountStore } from '@thxnetwork/studio/stores';
export default defineComponent({
name: 'Account',
computed: {
...mapStores(useAccountStore),
},
async mounted() {
await this.accountStore.get();
},
});
</script>
Loading

0 comments on commit 0d2de9e

Please sign in to comment.