✨ User sign in

src/components/Copyright.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="text-xs text-center opacity-80">
+    <p>Copyright © {{ new Date().getFullYear() }} Solsynth</p>
+    <p>Powered by <a class="underline" href="#">Hydrogen.Identity</a></p>
+  </div>
+</template>

src/components/NotificationList.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-menu eager :close-on-content-click="false">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" stacked rounded="circle" size="small" variant="text" :loading="loading">
+        <v-badge v-if="pagination.total > 0" color="error" :content="pagination.total">
+          <v-icon icon="mdi-bell" />
+        </v-badge>
+
+        <v-icon v-else icon="mdi-bell" />
+      </v-btn>
+    </template>
+
+    <v-list v-if="notifications.length <= 0" class="w-[380px]" density="compact">
+      <v-list-item>
+        <v-alert class="text-sm" variant="tonal" type="info"
+          >You are done! There is no unread notifications for you.</v-alert
+        >
+      </v-list-item>
+    </v-list>
+
+    <v-list v-else class="w-[380px]" density="compact" lines="three">
+      <v-list-item v-for="item in notifications">
+        <template #title>{{ item.subject }}</template>
+        <template #subtitle>{{ item.content }}</template>
+
+        <template #append>
+          <v-btn icon="mdi-check" size="x-small" variant="text" :disabled="loading" @click="markAsRead(item)" />
+        </template>
+
+        <div class="flex text-xs gap-1">
+          <a v-for="link in item.links" class="mt-1 underline" target="_blank" :href="link.url">{{ link.label }}</a>
+        </div>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+
+  <!-- @vue-ignore -->
+  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { getAtk } from "@/stores/userinfo"
+import { reactive, ref } from "vue"
+
+const loading = ref(false)
+
+const error = ref<string | null>(null)
+
+const notifications = ref<any[]>([])
+const pagination = reactive({ page: 1, pageSize: 25, total: 0 })
+
+async function readNotifications() {
+  loading.value = true
+  const res = await request(
+    "identity",
+    "/api/notifications?" +
+      new URLSearchParams({
+        take: pagination.pageSize.toString(),
+        offset: ((pagination.page - 1) * pagination.pageSize).toString()
+      }),
+    {
+      headers: { Authorization: `Bearer ${await getAtk()}` }
+    }
+  )
+  if (res.status === 200) {
+    const data = await res.json()
+    notifications.value = data["data"]
+    pagination.total = data["count"]
+  }
+  loading.value = false
+}
+
+readNotifications()
+
+async function markAsRead(item: any) {
+  loading.value = true
+  const res = await request("identity", `/api/notifications/${item.id}/read`, {
+    method: "PUT",
+    headers: { Authorization: `Bearer ${await getAtk()}` }
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await readNotifications()
+    error.value = null
+  }
+  loading.value = false
+}
+</script>

src/components/UserMenu.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-menu>
+    <template #activator="{ props }">
+      <v-btn flat exact v-bind="props" icon>
+        <v-avatar color="transparent" icon="mdi-account-circle" :image="'/api/avatar/' + id.userinfo.data?.avatar" />
+      </v-btn>
+    </template>
+
+    <v-list density="compact" v-if="!id.userinfo.isLoggedIn">
+      <v-list-item title="Sign in" prepend-icon="mdi-login-variant" :to="{ name: 'auth.sign-in' }" />
+      <v-list-item title="Create account" prepend-icon="mdi-account-plus" :to="{ name: 'auth.sign-up' }" />
+    </v-list>
+    <v-list density="compact" v-else>
+      <v-list-item :title="nickname" :subtitle="username" />
+
+      <v-divider class="border-opacity-50 my-2" />
+
+      <v-list-item title="User Center" prepend-icon="mdi-account-supervisor" exact :to="{ name: 'dashboard' }" />
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { useUserinfo } from "@/stores/userinfo"
+import { computed } from "vue"
+
+const id = useUserinfo()
+
+const username = computed(() => {
+  if (id.userinfo.isLoggedIn) {
+    return "@" + id.userinfo.data?.name
+  } else {
+    return "@vistor"
+  }
+})
+const nickname = computed(() => {
+  if (id.userinfo.isLoggedIn) {
+    return id.userinfo.data?.nick
+  } else {
+    return "Anonymous"
+  }
+})
+</script>

src/components/auth/AccountLocator.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex items-center">
+    <v-form class="flex-grow-1" @submit.prevent="submit">
+      <v-text-field
+        label="Account ID"
+        variant="solo"
+        density="comfortable"
+        spellcheck="false"
+        autocomplete="off"
+        autocapitalize="off"
+        :disabled="props.loading"
+        v-model="probe"
+      />
+
+      <v-expand-transition>
+        <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+          Something went wrong... {{ error }}
+        </v-alert>
+      </v-expand-transition>
+
+      <div class="flex justify-between">
+        <v-btn type="button" variant="plain" color="grey-darken-3" :to="{ name: 'auth.sign-up' }">Sign up</v-btn>
+
+        <v-btn
+          type="submit"
+          variant="text"
+          color="primary"
+          class="justify-self-end"
+          append-icon="mdi-arrow-right"
+          :disabled="props.loading"
+        >
+          Next
+        </v-btn>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { request } from "@/scripts/request"
+
+const probe = ref("")
+
+const error = ref<string | null>(null)
+
+const props = defineProps<{ loading?: boolean }>()
+const emits = defineEmits(["swap", "update:loading", "update:factors", "update:challenge"])
+
+async function submit() {
+  if (!probe.value) return
+
+  emits("update:loading", true)
+  const res = await request("identity", "/api/auth", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ id: probe.value })
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    emits("update:factors", data["factors"])
+    emits("update:challenge", data["challenge"])
+    emits("swap", "pick")
+    error.value = null
+  }
+  emits("update:loading", false)
+}
+</script>

src/components/auth/CallbackNotify.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="w-full max-w-[720px]">
+    <v-expand-transition>
+      <v-alert v-show="route.query['redirect_uri']" variant="tonal" type="info" class="text-xs">
+        You need to sign in before access that page. After you signed in, we will redirect you to: <br />
+        <span class="font-mono">{{ route.query["redirect_uri"] }}</span>
+      </v-alert>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router"
+
+const route = useRoute()
+</script>

src/components/auth/FactorApplicator.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="flex items-center">
+    <v-form class="flex-grow-1" @submit.prevent="submit">
+      <div v-if="inputType === 'one-time-password'" class="text-center">
+        <p class="text-xs opacity-90">Check your inbox!</p>
+        <v-otp-input
+          class="pt-0"
+          variant="solo"
+          density="compact"
+          type="text"
+          :length="6"
+          v-model="password"
+          :loading="loading"
+        />
+      </div>
+      <v-text-field
+        v-else
+        label="Password"
+        type="password"
+        variant="solo"
+        density="comfortable"
+        :disabled="loading"
+        v-model="password"
+      />
+
+      <v-expand-transition>
+        <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+          Something went wrong... {{ error }}
+        </v-alert>
+      </v-expand-transition>
+
+      <div class="flex justify-end">
+        <v-btn
+          type="submit"
+          variant="text"
+          color="primary"
+          class="justify-self-end"
+          append-icon="mdi-arrow-right"
+          :disabled="loading"
+        >
+          Next
+        </v-btn>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { useUserinfo } from "@/stores/userinfo"
+import { Preferences } from "@capacitor/preferences"
+import { computed, ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+
+const password = ref("")
+
+const error = ref<string | null>(null)
+
+const props = defineProps<{ loading?: boolean; currentFactor?: any; challenge?: any }>()
+const emits = defineEmits(["swap", "update:challenge"])
+
+const route = useRoute()
+const router = useRouter()
+
+const { readProfiles } = useUserinfo()
+
+async function submit() {
+  const res = await request("identity", `/api/auth`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      challenge_id: props.challenge?.id,
+      factor_id: props.currentFactor?.id,
+      secret: password.value
+    })
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    if (data["is_finished"]) {
+      await getToken(data["session"]["grant_token"])
+      await readProfiles()
+      callback()
+    } else {
+      emits("swap", "pick")
+      emits("update:challenge", data["challenge"])
+      error.value = null
+      password.value = ""
+    }
+  }
+}
+
+async function getToken(tk: string) {
+  const res = await request("identity", "/api/auth/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      code: tk,
+      grant_type: "grant_token"
+    })
+  })
+  if (res.status !== 200) {
+    const err = await res.text()
+    error.value = err
+    throw new Error(err)
+  } else {
+    const data = await res.json()
+    await Preferences.set({
+      key: "identity.access_token",
+      value: data["access_token"]
+    })
+    await Preferences.set({
+      key: "identity.refresh_token",
+      value: data["refresh_token"]
+    })
+    error.value = null
+  }
+}
+
+function callback() {
+  if (route.query["closable"]) {
+    window.close()
+  } else if (route.query["redirect_uri"]) {
+    window.open((route.query["redirect_uri"] as string) ?? "/", "_self")
+  } else {
+    router.push({ name: "explore" })
+  }
+}
+
+const inputType = computed(() => {
+  switch (props.currentFactor?.type) {
+    case 1:
+      return "one-time-password"
+    default:
+      return "text"
+  }
+})
+</script>

src/components/auth/FactorPicker.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex-grow-1">
+      <v-card class="mb-3">
+        <v-list density="compact" color="primary">
+          <v-list-item
+            v-for="item in props.factors ?? []"
+            :prepend-icon="getFactorType(item)?.icon"
+            :title="getFactorType(item)?.label"
+            :active="focus === item.id"
+            :disabled="getFactorAvailable(item)"
+            @click="focus = item.id"
+          />
+        </v-list>
+      </v-card>
+
+      <v-expand-transition>
+        <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+          Something went wrong... {{ error }}
+        </v-alert>
+      </v-expand-transition>
+
+      <div class="flex justify-end">
+        <v-btn variant="text" color="primary" class="justify-self-end" append-icon="mdi-arrow-right" @click="submit">
+          Next
+        </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { request } from "@/scripts/request"
+
+const focus = ref<number | null>(null)
+
+const error = ref<string | null>(null)
+
+const props = defineProps<{ factors?: any[]; challenge?: any }>()
+const emits = defineEmits(["swap", "update:loading", "update:currentFactor"])
+
+async function submit() {
+  if (!focus.value) return
+
+  emits("update:loading", true)
+  const res = await request("identity", `/api/auth/factors/${focus.value}`, {
+    method: "POST"
+  })
+  if (res.status !== 200 && res.status !== 204) {
+    error.value = await res.text()
+  } else {
+    const item = props.factors?.find((item: any) => item.id === focus.value)
+    emits("update:currentFactor", item)
+    emits("swap", "applicator")
+    error.value = null
+    focus.value = null
+  }
+  emits("update:loading", false)
+}
+
+function getFactorType(item: any) {
+  switch (item.type) {
+    case 0:
+      return { icon: "mdi-form-textbox-password", label: "Password Validation" }
+    case 1:
+      return { icon: "mdi-email-fast", label: "Email One Time Password" }
+  }
+}
+
+function getFactorAvailable(factor: any) {
+  const blacklist: number[] = props.challenge?.blacklist_factors ?? []
+  return blacklist.includes(factor.id)
+}
+</script>

src/components/posts/PostReaction.vue

@@ -68,7 +68,7 @@ const error = ref<string | null>(null)
 async function reactPost(symbol: string, attitude: number) {
   const res = await request("interactive", `/api/p/${props.model}/${props.item?.id}/react`, {
     method: "POST",
-    headers: { Authorization: `Bearer ${getAtk()}`, "Content-Type": "application/json" },
+    headers: { Authorization: `Bearer ${await getAtk()}`, "Content-Type": "application/json" },
     body: JSON.stringify({ symbol, attitude })
   })
   if (res.status === 201) {

src/components/publish/ArticleEditor.vue

@@ -184,7 +184,7 @@ async function postArticle(evt: SubmitEvent) {
   loading.value = true
   const res = await request("interactive", url, {
     method: method,
-    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
     body: JSON.stringify(payload)
   })
   if (res.status === 200) {

src/components/publish/CommentEditor.vue

@@ -65,7 +65,7 @@ async function postComment(evt: SubmitEvent) {
   loading.value = true
   const res = await request("interactive", url, {
     method: method,
-    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
     body: JSON.stringify(payload)
   })
   if (res.status === 200) {

src/components/publish/MomentEditor.vue

@@ -131,7 +131,7 @@ async function postMoment(evt: SubmitEvent) {
   loading.value = true
   const res = await request("interactive", url, {
     method: method,
-    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
     body: JSON.stringify(payload)
   })
   if (res.status === 200) {

src/components/publish/PostDeletion.vue

@@ -38,7 +38,7 @@ async function deletePost() {
   loading.value = true
   const res = await request("interactive", url, {
     method: "DELETE",
-    headers: { Authorization: `Bearer ${getAtk()}` }
+    headers: { Authorization: `Bearer ${await getAtk()}` }
   })
   if (res.status !== 200) {
     error.value = await res.text()

src/components/publish/parts/Media.vue

@@ -65,7 +65,7 @@ async function upload(file?: any) {
   emits("update:uploading", true)
   const res = await request("interactive", "/api/attachments", {
     method: "POST",
-    headers: { Authorization: `Bearer ${getAtk()}` },
+    headers: { Authorization: `Bearer ${await getAtk()}` },
     body: data
   })
   let meta: any
@@ -87,7 +87,7 @@ async function dispose(idx: number) {
 
   const res = await request("interactive", `/api/attachments/${item.id}`, {
     method: "DELETE",
-    headers: { Authorization: `Bearer ${getAtk()}` }
+    headers: { Authorization: `Bearer ${await getAtk()}` }
   })
   if (res.status !== 200) {
     error.value = await res.text()

src/components/realms/RealmDeletion.vue

@@ -43,7 +43,7 @@ async function deletePost() {
   loading.value = true
   const res = await request("interactive", url, {
     method: "DELETE",
-    headers: { Authorization: `Bearer ${getAtk()}` }
+    headers: { Authorization: `Bearer ${await getAtk()}` }
   })
   if (res.status !== 200) {
     error.value = await res.text()

src/components/realms/RealmEditor.vue

@@ -63,7 +63,7 @@ async function submit(evt: SubmitEvent) {
   loading.value = true
   const res = await request("interactive", url, {
     method: method,
-    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
     body: JSON.stringify(payload)
   })
   if (res.status !== 200) {

src/components/realms/RealmInvitation.vue

@@ -38,7 +38,7 @@ async function inviteMember(evt: SubmitEvent) {
   loading.value = true
   const res = await request("interactive", `/api/realms/${props.item?.id}/invite`, {
     method: "POST",
-    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
     body: JSON.stringify({
       account_name: targetName.value
     })

src/components/realms/RealmMembers.vue

@@ -97,7 +97,7 @@ async function kickMember(item: any) {
   loading.value = true
   const res = await request("interactive", `/api/realms/${props.item?.id}/kick`, {
     method: "POST",
-    headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
     body: JSON.stringify({
       account_name: item.account.name
     })