♻️ Move more Passport stuff

app.vue

@@ -11,7 +11,7 @@ import { useTheme } from "vuetify"
 import "@unocss/reset/tailwind.css"
 
 const theme = useTheme()
-const userinfo = useUserinfo()
+const auth = useUserinfo()
 
 onMounted(() => {
   theme.global.name.value = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
@@ -21,7 +21,7 @@ onMounted(() => {
   })
 
   if (checkLoggedIn()) {
-    userinfo.readProfiles()
+    auth.readProfiles()
   }
 })
 </script>

components/auth/AuthenticateCompleted.vue

@@ -21,7 +21,7 @@ const config = useRuntimeConfig()
 
 const route = useRoute()
 const router = useRouter()
-const userinfo = useUserinfo()
+const auth = useUserinfo()
 
 const props = defineProps<{ loading?: boolean; currentFactor?: any; ticket?: any }>()
 const emits = defineEmits(["update:loading"])
@@ -31,7 +31,7 @@ const error = ref<string | null>(null)
 async function load() {
   emits("update:loading", true)
   await getToken(props.ticket.grant_token)
-  await userinfo.readProfiles()
+  await auth.readProfiles()
   setTimeout(() => callback(), 1850)
 }
 

pages/auth/authorize.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-container class="h-screen flex flex-col gap-3 items-center justify-center">
+    <v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
+      <v-card-text class="card-grid pa-9">
+        <div>
+          <v-avatar color="accent" icon="mdi-connection" size="large" class="card-rounded mb-2" />
+          <h1 class="text-2xl">Connect to third-party</h1>
+          <p>One Solarpass, entire internet.</p>
+        </div>
+
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
+          <v-window-item value="confirm">
+            <div class="flex flex-col gap-2">
+              <v-expand-transition>
+                <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+                  <p>Something went wrong... {{ error }}</p>
+                  <br />
+
+                  <p class="font-bold">
+                    It's usually not our fault. Try bringing this link to give feedback to the developer of the app you
+                    came from.
+                  </p>
+                </v-alert>
+              </v-expand-transition>
+
+              <div v-if="!error">
+                <h1 class="font-bold text-xl">{{ metadata?.name ?? "Loading" }}</h1>
+                <p>{{ metadata?.description ?? "Hold on a second please!" }}</p>
+
+                <div class="mt-3">
+                  <div class="mt-5 flex justify-between">
+                    <v-btn prepend-icon="mdi-close" variant="text" color="error" :disabled="loading" @click="decline">
+                      Decline
+                    </v-btn>
+                    <v-btn append-icon="mdi-check" variant="tonal" color="success" :disabled="loading" @click="approve">
+                      Approve
+                    </v-btn>
+                  </div>
+
+                  <div class="mt-5 text-xs text-center opacity-75">
+                    <p>After approve their request, you will be redirect to</p>
+                    <p class="text-mono">{{ route.query["redirect_uri"] }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </v-window-item>
+
+          <v-window-item value="callback">
+            <div>
+              <v-icon icon="mdi-fire" size="32" color="grey-darken-3" class="mb-3" />
+
+              <h1 class="font-bold text-xl">Authorized</h1>
+              <p>You're done! We successfully established connection between you and {{ metadata?.name }}.</p>
+
+              <p class="mt-3">Now you can continue your their app, we will redirect you soon.</p>
+
+              <p class="mt-3">Teleporting you to...</p>
+              <p class="text-xs text-mono">{{ route.query["redirect_uri"] }}</p>
+            </div>
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+    </v-card>
+
+    <copyright service="passport" />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { useRoute } from "vue-router"
+
+const config = useRuntimeConfig()
+
+const route = useRoute()
+
+const error = ref<string | null>(null)
+
+const loading = ref(false)
+
+const metadata = ref<any>(null)
+const requestedClaims = computed(() => {
+  const scope: string = (route.query["scope"] as string) ?? ""
+  return scope.split(" ")
+})
+
+const panel = ref("confirm")
+
+async function tryAuthorize() {
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth/o/authorize` + window.location.search, {
+    headers: { Authorization: `Bearer ${getAtk()}` },
+  })
+
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+
+    if (data["ticket"]) {
+      panel.value = "callback"
+      callback(data["ticket"])
+    } else {
+      document.title = `Solarpass | Connect to ${data["client"]?.name}`
+      metadata.value = data["client"]
+      loading.value = false
+    }
+  }
+}
+
+tryAuthorize()
+
+function decline() {
+  if (window.history.length > 0) {
+    window.history.back()
+  } else {
+    window.close()
+  }
+}
+
+async function approve() {
+  loading.value = true
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth/o/authorize` + window.location.search, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${getAtk()}` },
+  })
+
+  if (res.status !== 200) {
+    error.value = await res.text()
+    loading.value = false
+  } else {
+    const data = await res.json()
+    panel.value = "callback"
+    setTimeout(() => callback(data["ticket"]), 1850)
+  }
+}
+
+function callback(ticket: any) {
+  const url = `${route.query["redirect_uri"]}?code=${ticket["grant_token"]}&state=${route.query["state"]}`
+  window.open(url, "_self")
+}
+</script>
+
+<style scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card-rounded {
+  border-radius: 8px;
+}
+</style>

pages/flow/account/confirm.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-container class="h-[calc(100vh-80px)] flex flex-col gap-3 items-center justify-center">
+    <v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
+      <v-card-text class="card-grid pa-9">
+        <div>
+          <v-avatar color="accent" icon="mdi-check-decagram" size="large" class="card-rounded mb-2" />
+          <h1 class="text-2xl">Confirm registration</h1>
+          <p>Confirm your account to unlock more abilities.</p>
+        </div>
+
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
+          <v-window-item value="confirm">
+            <div>
+              <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>
+
+              <v-progress-circular v-if="!error" indeterminate size="32" color="grey-darken-3" class="mb-3" />
+
+              <h1 class="font-bold text-xl">Confirming</h1>
+              <p>We are confirming your account. Please stand by, this won't took a long time...</p>
+            </div>
+          </v-window-item>
+          <v-window-item value="callback">
+            <div>
+              <v-icon icon="mdi-fire" size="32" color="grey-darken-3" class="mb-3" />
+
+              <h1 class="font-bold text-xl">Confirmed</h1>
+              <p>You're done! We successfully confirmed your account.</p>
+
+              <p class="mt-3">Now you can continue to use Solarpass, we will redirect you to dashboard soon.</p>
+            </div>
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+    </v-card>
+
+    <copyright service="passport" />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+
+const config = useRuntimeConfig()
+
+const route = useRoute()
+const router = useRouter()
+const auth = useUserinfo()
+
+const error = ref<string | null>(null)
+
+const loading = ref(false)
+
+const panel = ref("confirm")
+
+async function confirm() {
+  if (!route.query["code"]) {
+    error.value = "code was not exists"
+    return
+  }
+
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/users/me/confirm`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      code: route.query["code"],
+    }),
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    loading.value = true
+    panel.value = "callback"
+    await auth.readProfiles()
+    await router.push({ name: "dashboard" })
+  }
+  loading.value = false
+}
+
+confirm()
+</script>
+
+<style scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card-rounded {
+  border-radius: 8px;
+}
+</style>

pages/flow/account/password-reset.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-container class="h-[calc(100vh-80px)] flex flex-col gap-3 items-center justify-center">
+    <v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
+      <v-card-text class="card-grid pa-9">
+        <div>
+          <v-avatar color="accent" icon="mdi-lock-reset" size="large" class="card-rounded mb-2" />
+          <h1 class="text-2xl">Reset password</h1>
+          <p>Reset password to get back access of your account.</p>
+        </div>
+
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
+          <v-window-item value="confirm">
+            <div class="flex items-center">
+              <v-form class="flex-grow-1" @submit.prevent="confirm">
+                <v-text-field
+                  label="New Password"
+                  type="password"
+                  autocomplete="new-password"
+                  variant="solo"
+                  density="comfortable"
+                  :disabled="loading"
+                  v-model="newPassword"
+                />
+
+                <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>
+          </v-window-item>
+          <v-window-item value="callback">
+            <div>
+              <v-icon icon="mdi-fire" size="32" color="grey-darken-3" class="mb-3" />
+
+              <h1 class="font-bold text-xl">Applied</h1>
+              <p>The password of your account has updated successfully.</p>
+
+              <p class="mt-3">Now you can continue to use Solarpass, we will redirect you to sign-in soon.</p>
+            </div>
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+    </v-card>
+
+    <copyright service="passport" />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+
+const config = useRuntimeConfig()
+
+const route = useRoute()
+const router = useRouter()
+
+const error = ref<string | null>(null)
+
+const loading = ref(false)
+
+const panel = ref("confirm")
+
+const newPassword = ref("")
+
+async function confirm() {
+  if (!route.query["code"]) {
+    error.value = "code was not exists"
+    return
+  }
+
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/users/me/password-reset`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      code: route.query["code"],
+      new_password: newPassword.value,
+    }),
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    loading.value = true
+    panel.value = "callback"
+    await router.push({ name: "auth.sign-in" })
+  }
+  loading.value = false
+}
+</script>
+
+<style scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card-rounded {
+  border-radius: 8px;
+}
+</style>