💄 Optimize the account profile webpage

DysonNetwork.Pass/Client/src/views/accounts/info.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container mx-auto">
-    <div class="flex items-center gap-6 mb-8">
+  <div class="container mx-auto px-8">
+    <div class="flex items-center gap-6 mb-8 mt-4">
       <n-avatar round :size="100" :alt="userStore.user.name" :src="userPicture">
         <n-icon size="48" v-if="!userPicture">
           <person-round />
@@ -14,23 +14,12 @@
       </div>
     </div>
 
-    <div class="mb-8">
-      <div class="flex justify-between mb-2">
-        <n-text>Level {{ userStore.user.profile.level }}</n-text>
-        <n-text>{{ userStore.user.profile.experience }} XP</n-text>
-      </div>
-      <n-progress
-        type="line"
-        :percentage="userStore.user.profile.leveling_progress"
-        :height="8"
-        status="success"
-        :show-indicator="false"
-      />
-    </div>
-
-    <div v-if="userStore.user.profile.bio" class="mt-8">
-      <n-h3>About</n-h3>
-      <n-p>{{ userStore.user.profile.bio }}</n-p>
+    <div class="mt-8">
+      <n-h3>Update Profile</n-h3>
+      <n-alert type="info" title="Under Construction">
+        Update profile directly on the Solar Network ID site is not available, yet. You can still do
+        it inside the Solian app or web app.
+      </n-alert>
     </div>
 
     <div class="mt-8">
@@ -47,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { NAvatar, NText, NProgress, NH3, NP, NButton, NIcon } from 'naive-ui'
+import { NAvatar, NText, NAlert, NH3, NButton, NIcon } from 'naive-ui'
 import { PersonRound, LaunchOutlined } from '@vicons/material'
 import { useUserStore } from '@/stores/user'
 import { computed } from 'vue'

DysonNetwork.Pass/Client/src/views/accounts/security.vue

@@ -1,3 +1,69 @@
 <template>
-<p>Security</p>
+  <div class="container mx-auto px-8">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">
+      <div class="flex flex-col gap-4">
+        <n-card title="Connections">
+          <n-card content-style="padding: 0" class="mb-4">
+            <n-list size="small" hoverable>
+              <n-list-item v-for="connection in connections" :key="connection.id">
+                <n-thing>
+                  <template #header>
+                    <span class="capitalize">{{ connection.provider }}</span>
+                  </template>
+                  <template #description>
+                    <span>{{ connection.provided_identifier }}</span>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </n-card>
+          <n-card content-style="padding: 0" class="mb-4">
+            <n-list size="small" hoverable clickable>
+              <n-list-item
+                v-for="addable in connectionsAddable"
+                :key="addable"
+                @click="connectionAdd(addable)"
+              >
+                <n-thing>
+                  <template #header>
+                    <span class="capitalize">{{ addable }}</span>
+                  </template>
+                  <template #description>
+                    <span>Unconnected</span>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </n-card>
+          <n-alert type="info" title="More actions available">
+            You can open Solian and head to Account Settings to explore more actions about the
+            account connections.
+          </n-alert>
+        </n-card>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { NCard, NList, NListItem, NThing, NAlert } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+
+const connectionsProviders = ['apple', 'google', 'microsoft', 'discord']
+const connections = ref<any[]>([])
+
+const connectionsAddable = computed(() =>
+  connectionsProviders.filter((x) => connections.value.filter((e) => e.provider == x).length == 0),
+)
+
+function connectionAdd(provider: string) {
+  window.open(`/api/auth/login/${provider}`, '_blank')
+}
+
+async function fetchConnections() {
+  const resp = await fetch('/api/accounts/me/connections')
+  connections.value = await resp.json()
+}
+
+onMounted(() => fetchConnections())
+</script>