Adds github signin

apps/hub/app/components/UserPanel.vue

@@ -1,18 +1,30 @@
 <script setup lang="ts">
-import { Button, toast } from '@nobel/core'
+import { Button, ButtonGroup, toast } from '@nobel/core'
+
 const { user, session, client } = useAuth()
 
 const signOut = async () => {
   await client.signOut()
   toast.success('Signed out')
 }
 
-const sessionAge = computed(() => {
-  if (!session.value?.createdAt) return
-  const startedAt = new Date(session.value.createdAt)
-  const now = new Date()
-  const diff = now.getTime() - startedAt.getTime()
-  return Math.floor(diff / 1000)
+const expiresIn = computed(() => {
+  if (!session) return ''
+  const currentTime = new Date()
+
+  const expiresAt = session.value?.expiresAt ? new Date(session.value.expiresAt).getTime() : 0
+  const difference = expiresAt - currentTime.getTime()
+
+  const minutes = Math.floor((difference / (1000 * 60)) % 60)
+  const hours = Math.floor((difference / (1000 * 60 * 60)) % 24)
+  const days = Math.floor(difference / (1000 * 60 * 60 * 24))
+
+  return `${days}D ${hours}H ${minutes}M`
+})
+
+const creationDate = computed(() => {
+  if (!user.value) return ''
+  return new Date(user.value?.createdAt).toLocaleDateString()
 })
 </script>
 
@@ -31,11 +43,22 @@ const sessionAge = computed(() => {
         <Icon name="pixelarticons:check" />
       </div>
     </div>
+    <p>Creation date: {{ creationDate }}</p>
     <p>IP Adress: {{ session?.ipAddress }}</p>
-    <p>Session age: {{ sessionAge }}</p>
+    <p>Session expires in: {{ expiresIn }}</p>
     <p>{{ user?.id }}</p>
 
     <Button size="medium" @click="signOut">Sign out</Button>
+
+    <ButtonGroup>
+      <Button size="small" variant="primary" color="warning">
+        <Icon name="pixelarticons:alert" size="1em" />
+      </Button>
+
+      <Button size="small">
+        <Icon name="pixelarticons:sliders-2" size="1em" />
+      </Button>
+    </ButtonGroup>
   </div>
 </template>
 

apps/hub/app/pages/users/[id].vue

@@ -1,10 +1,5 @@
 <script setup lang="ts">
 const route = useRoute()
-
-if (!route.params.id) {
-  console.log('Warning! Make sure user is authenticasted!')
-}
-
 const { data } = await useFetch(`/api/users/${route.params.id}`)
 </script>
 

apps/hub/package.json

@@ -47,6 +47,7 @@
     "nuxt": "^3.15.4",
     "pinia": "3.0.1",
     "sass": "^1.85.0",
+    "temporal-polyfill": "^0.2.5",
     "ufo": "^1.5.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

apps/hub/server/database/schema.ts

@@ -52,7 +52,7 @@ export const account = sqliteTable('account', {
   providerId: text('providerId').notNull(),
   accessToken: text('accessToken'),
   refreshToken: text('refreshToken'),
-  accesTokenExiresAt: integer('accesTokenExiresAt', {
+  accessTokenExpiresAt: integer('accesTokenExiresAt', {
     mode: 'timestamp',
   }),
   refreshTokenExpiresAt: integer('refreshTokenExpiresAt', {