Adds settings page to studio

thxprotocol · Sep 19, 2024 · 5c94bc6 · 5c94bc6
1 parent a0f5f66
commit 5c94bc6
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 26 deletions.
diff --git a/apps/api/src/app/models/Widget.ts b/apps/api/src/app/models/Widget.ts
@@ -6,6 +6,7 @@ export const Widget = mongoose.model<WidgetDocument>(
     'Widget',
     new mongoose.Schema(
         {
+            sub: String,
             uuid: String,
             poolId: String,
             iconImg: String,

diff --git a/apps/studio/components.d.ts b/apps/studio/components.d.ts
@@ -37,6 +37,7 @@ declare module 'vue' {
     BFormTextare: typeof import('bootstrap-vue-next')['BFormTextare']
     BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
     BImg: typeof import('bootstrap-vue-next')['BImg']
+    BInput: typeof import('bootstrap-vue-next')['BInput']
     BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
     BInputGroupAppend: typeof import('bootstrap-vue-next')['BInputGroupAppend']
     BInputGroupText: typeof import('bootstrap-vue-next')['BInputGroupText']

diff --git a/apps/studio/src/router/index.ts b/apps/studio/src/router/index.ts
@@ -43,6 +43,11 @@ const routes: Array<RouteRecordRaw> = [
                 name: 'account',
                 component: () => import(/* webpackChunkName: "signinredirect" */ '../views/studio/Account.vue'),
             },
+            {
+                path: '/settings',
+                name: 'settings',
+                component: () => import(/* webpackChunkName: "signinredirect" */ '../views/studio/Settings.vue'),
+            },
         ],
     },
     {

diff --git a/apps/studio/src/stores/Account.ts b/apps/studio/src/stores/Account.ts
@@ -4,6 +4,7 @@ import { useAuthStore } from './Auth';
 export const useAccountStore = defineStore('account', {
     state: () => ({
         account: null as null | TAccount,
+        profiles: [] as TWidget[],
     }),
     actions: {
         request(path: string, options?: TRequestOptions) {
@@ -12,5 +13,8 @@ export const useAccountStore = defineStore('account', {
         async get() {
             this.account = await this.request('/account');
         },
+        async getSettings() {
+            this.profiles = await this.request('/widgets');
+        },
     },
 });
diff --git a/apps/studio/src/views/Studio.vue b/apps/studio/src/views/Studio.vue
@@ -26,6 +26,7 @@
                         />
                     </template>
                     <b-dropdown-item to="/account">Account</b-dropdown-item>
+                    <b-dropdown-item to="/settings">Settings</b-dropdown-item>
                     <b-dropdown-item to="/logout">Logout</b-dropdown-item>
                 </b-nav-item-dropdown>
             </b-navbar>

diff --git a/apps/studio/src/views/studio/Account.vue b/apps/studio/src/views/studio/Account.vue
@@ -6,7 +6,7 @@
         </b-container>
         <div class="bg-dark py-5 flex-grow-1">
             <b-container>
-                <b-card variant="darker">
+                <b-card variant="darker" class="mb-5">
                     <BaseFormGroup label="Account ID">
                         {{ accountStore.account.sub }}
                     </BaseFormGroup>

diff --git a/apps/studio/src/views/studio/Settings.vue b/apps/studio/src/views/studio/Settings.vue
@@ -0,0 +1,42 @@
+<template>
+    <template v-if="accountStore.account">
+        <b-container class="py-5 text-white">
+            <h1>Settings</h1>
+            <p class="lead">Personalize your collectible wallet.</p>
+        </b-container>
+        <div class="bg-dark py-5 flex-grow-1">
+            <b-container>
+                <b-card v-for="profile of accountStore.profiles" variant="darker" class="mb-5">
+                    <h3>Domain</h3>
+                    <BaseFormGroup label="URL">
+                        <b-form-input v-model="profile.domain" />
+                    </BaseFormGroup>
+                    <h3>Theme</h3>
+                    {{ profile.theme }}
+                </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',
+    data() {
+        return {
+            domain: '',
+        };
+    },
+    computed: {
+        ...mapStores(useAccountStore),
+    },
+    async mounted() {
+        await this.accountStore.get();
+        await this.accountStore.getSettings();
+    },
+});
+</script>
diff --git a/apps/wallet/src/views/wallet/Account.vue b/apps/wallet/src/views/wallet/Account.vue
diff --git a/libs/common/src/lib/types/Widget.d.ts b/libs/common/src/lib/types/Widget.d.ts
@@ -1,4 +1,5 @@
 type TWidget = {
+    sub: string;
     uuid: string;
     poolId: string;
     iconImg: string;