fix(console): refine profile page

xmlking · Jun 25, 2024 · 41607b4 · 41607b4
1 parent bc19262
commit 41607b4
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 94 deletions.
diff --git a/apps/console/src/routes/(app)/profile/+page.gql b/apps/console/src/routes/(app)/profile/+page.gql
@@ -1,5 +1,5 @@
-query GetUser($userId: uuid!) @cache(policy: CacheAndNetwork) {
-  # get all gragments needed for profile page.
+query GetUser($userId: uuid!) @cache(policy: NetworkOnly) {
+  # get all fragments needed for profile page.
   user(id: $userId) {
     id
     displayName
@@ -15,14 +15,9 @@ query GetUser($userId: uuid!) @cache(policy: CacheAndNetwork) {
       role
       isDefaultRole
     }
-    sks: securityKeys {
-      id
+    securityKeys(order_by: { nickname: asc }) {
       nickname
-    }
-    securityKeys(order_by: { nickname: asc })  @list(name: "SecurityKeys") {
-      ...SecurityKeyFields
-      # nickname
-      # id
+      id
     }
     personalAccessTokens: refreshTokens {
       id

diff --git a/apps/console/src/routes/(app)/profile/+page.svelte b/apps/console/src/routes/(app)/profile/+page.svelte
@@ -3,15 +3,20 @@ import { page } from '$app/stores';
 import { Meta } from '$lib/components';
 import { nhost, user } from '$lib/stores/user';
 import type { AuthErrorPayload } from '@nhost/nhost-js';
-import { Avatar } from '@skeletonlabs/skeleton';
 import { Debug } from '@spectacular/skeleton/components';
 import type { PageData } from './$houdini';
-import SecurityKeysCard from './security-keys.svelte';
+import PersonalAccessTokens from './personal-access-tokens.svelte';
+import Providers from './providers.svelte';
+import SecurityKeys from './security-keys.svelte';
+import UserOrgRoles from './user-org-roles.svelte';
 
 // https://github.com/nhost/nhost/blob/main/examples/react-apollo/src/profile/security-keys.tsx
 export let data: PageData;
 
 $: ({ GetUser } = data);
+$: userOrgRoles = $GetUser.data?.user?.userOrgRoles ?? [];
+$: userProviders = $GetUser.data?.user?.userProviders ?? [];
+$: personalAccessTokens = $GetUser.data?.user?.personalAccessTokens ?? [];
 $: securityKeys = $GetUser.data?.user?.securityKeys ?? [];
 
 // Variables
@@ -33,18 +38,17 @@ async function addSecurityKey() {
 }
 
 async function handleElevate() {
-  const email = $user?.email
+  const email = $user?.email;
   if (email) {
-        const { elevated, isError } = await nhost.auth.elevateEmailSecurityKey(email)
-      if (elevated) {
-          // notify
-          console.log({elevated})
-      }
-      if (isError) {
-        console.log({isError})
-      }
+    const { elevated, isError } = await nhost.auth.elevateEmailSecurityKey(email);
+    if (elevated) {
+      // notify
+      console.log({ elevated });
+    }
+    if (isError) {
+      console.log({ isError });
+    }
   }
-
 }
 
 // Reactivity
@@ -55,85 +59,86 @@ $: meta = {
 </script>
 
 <Meta {...meta} />
-
 <svelte:head>
   <title>Datablocks | Profile</title>
-  <meta name="description" content="Account Profile" />
+  <meta name="description" content="Edit Profile" />
 </svelte:head>
 
-
-
 <div class="page-container">
-
+  <section class="space-y-4">
+		<h1 class="h1">Profile</h1>
+		<p>Update your profile details</p>
+	</section>
+
+  {#if error}
+    <section class="space-y-4">
+      <h2 class="h2">Error</h2>
+      <pre>{JSON.stringify(error, null, 2)}</pre>
+    </section>
+  {/if}
 
   {#if $GetUser.fetching}
     <span>loading...</span>
   {:else}
 
-    <h3>Error:</h3>
-    <section class="rounded-lg bg-slate-50">
-      <pre>{JSON.stringify(error, null, 2)}</pre>
-    </section>
-
-
-    <section class="rounded-lg bg-slate-50">
-      <pre>{JSON.stringify($GetUser.data, null, 2)}</pre>
-    </section>
-
-    <section>
-      <span>done....</span>
-      <div class="relative inline-block">
-        <span class="badge-icon variant-filled-warning absolute -top-0 -right-0 z-10">2</span>
-        <Avatar />
-      </div>
-        <!-- {$GetUser.data....} -->
-    </section>
-
-    <section class="rounded-lg bg-slate-50">
-      <SecurityKeysCard {securityKeys} />
-    </section>
-  {/if}
-
-  <div class="page-section">
-    <h2 class="h2">Profile</h2>
-    <Debug data={$user} />
-  </div>
-  <section class="page-section">
-    <h3 class="h3">WebAuthn</h3>
-      <div class="card p-4">
+    <section class="space-y-4">
+		<h2 class="h2">Contact</h2>
+		<p>Update user contact details</p>
+    <div class="card p-4">
+      <pre>{JSON.stringify($GetUser.data?.user, null, 2)}</pre>
+    </div>
+	</section>
+
+  <section class="space-y-4">
+		<h2 class="h2">User Org Roles</h2>
+		<p>Add or delete user org roles</p>
+    <UserOrgRoles {userOrgRoles} ></UserOrgRoles>
+	</section>
+
+  <section class="space-y-4">
+		<h2 class="h2">Auth Providers</h2>
+		<p>Add or delete auth providers</p>
+    <Providers {userProviders} ></Providers>
+	</section>
+
+    <section class="space-y-4">
+		<h2 class="h2">Personal Access Tokens</h2>
+		<p>Add are delete your personal access tokens(PAT)</p>
+    <PersonalAccessTokens {personalAccessTokens} ></PersonalAccessTokens>
+	</section>
+
+  <section class="space-y-4">
+		<h2 class="h2">Security Keys</h2>
+		<p>Add are delete your security keys like TouchID, FaceID, YubiKeys etc</p>
+    <SecurityKeys {securityKeys} />
+	</section>
+
+
+  <section class="space-y-4">
+		<h2 class="h2">WebAuthn</h2>
+		<p>Add are delete your security keys</p>
+    <div class="card p-4">
       <title>Security keys</title>
-      <table >
-        <colgroup>
-          <col />
-          <col width="20%" />
-        </colgroup>
-        <!-- <tbody>
-          {list.map(({ id, nickname }) => (
-            <tr key={id}>
-              <td>{nickname || id}</td>
-              <td>
-                <button type="button" class="btn variant-filled" on:click={() => handleRemoveKey(id)} color="red">
-                  <Settings />
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody> -->
-      </table>
-        <form class="space-y-4" on:submit|preventDefault={addSecurityKey}>
-          <input
-            bind:value={nickname}
-            placeholder='Nickname for the device (optional)'
-            class="block w-full p-3 border rounded-md border-slate-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-          />
-          <button type="submit" class="btn variant-filled">Add a new device</button>
+      <form class="space-y-4" on:submit|preventDefault={addSecurityKey}>
+        <input
+          bind:value={nickname}
+          placeholder='Nickname for the device (optional)'
+          class="block w-full p-3 border rounded-md border-slate-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+        />
+        <button type="submit" class="btn variant-filled">Add a new device</button>
       </form>
     </div>
-  </section>
+	</section>
+
+  <section class="space-y-4">
+		<h2 class="h2">Elevate</h2>
+		<p>Add are delete your security keys</p>
+    <div class="card p-4">
+      <!-- <span>Elevated permissions: {String(elevated)}</span> -->
+      <button type="button" class="btn variant-filled" on:click={handleElevate} >Elevate</button>
+    </div>
+	</section>
 
-  <section>
-    <!-- <span>Elevated permissions: {String(elevated)}</span> -->
-    <button type="button" class="btn variant-filled" on:click={handleElevate} >Elevate</button>
-  </section>
+  {/if}
 </div>
 
diff --git a/apps/console/src/routes/(app)/profile/personal-access-tokens.svelte b/apps/console/src/routes/(app)/profile/personal-access-tokens.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+import type { GetUser$result } from '$houdini';
+
+export let personalAccessTokens: NonNullable<GetUser$result['user']>['personalAccessTokens'];
+</script>
+
+<div class="card p-4">
+  <pre>{JSON.stringify(personalAccessTokens, null, 2)}</pre>
+</div>
diff --git a/apps/console/src/routes/(app)/profile/providers.svelte b/apps/console/src/routes/(app)/profile/providers.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+import type { GetUser$result } from '$houdini';
+
+export let userProviders: NonNullable<GetUser$result['user']>['userProviders'];
+</script>
+
+<div class="card p-4">
+  <pre>{JSON.stringify(userProviders, null, 2)}</pre>
+</div>
+
diff --git a/apps/console/src/routes/(app)/profile/security-keys.svelte b/apps/console/src/routes/(app)/profile/security-keys.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-import { PendingValue, type SecurityKeyFields } from '$houdini';
+import type { GetUser$result } from '$houdini';
 import { flip } from 'svelte/animate';
 import { quintOut } from 'svelte/easing';
 import { fade } from 'svelte/transition';
-import SecurityKeyItem from './security-key.svelte';
+// import SecurityKeyItem from './security-key.svelte';
 
 export const defaultDE = {
   duration: 450,
   easing: quintOut,
 };
 
-export let securityKeys: SecurityKeyFields[];
+export let securityKeys: NonNullable<GetUser$result['user']>['securityKeys'];
 </script>
 
-<section class="rounded-lg bg-slate-50">
+<div class="card p-4">
   <pre>{JSON.stringify(securityKeys, null, 2)}</pre>
-</section>
+</div>
 
 <!-- fixme: opened issue-->
 <!-- <div class="divide-y divide-slate-200">
@@ -25,3 +25,7 @@ export let securityKeys: SecurityKeyFields[];
     </div>
   {/each}
 </div> -->
+<!--
+    <section class="rounded-lg bg-slate-50">
+      <pre>{JSON.stringify($GetUser.data, null, 2)}</pre>
+    </section> -->
diff --git a/apps/console/src/routes/(app)/profile/user-org-roles.svelte b/apps/console/src/routes/(app)/profile/user-org-roles.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+import type { GetUser$result } from '$houdini';
+
+export let userOrgRoles: NonNullable<GetUser$result['user']>['userOrgRoles'];
+</script>
+
+<div class="card p-4">
+  <pre>{JSON.stringify(userOrgRoles, null, 2)}</pre>
+</div>
diff --git a/nhost/nhost.toml b/nhost/nhost.toml
@@ -176,7 +176,7 @@ enabled = false
 enabled = true
 
 [auth.method.webauthn.relyingParty]
-id = 'Spectacular'
+# id = 'Spectacular'
 name = 'Spectacular Console App'
 origins = ['https://console.traefik.me:5173', 'https://console.traefik.me']
 

diff --git a/nhost/overlays/zyjloswljirxqtsdlnnf.json b/nhost/overlays/zyjloswljirxqtsdlnnf.json
@@ -6,7 +6,7 @@
   },
   {
     "op": "replace",
-    "path": "/auth/method/webauthn/relyingParty/origins/0",
+    "path": "/auth/method/webauthn/relyingParty/origins/1",
     "value": "https://spectacular-console.vercel.app"
   },
   {