♻️ Move more Passport stuff
This commit is contained in:
parent
48da7d1a46
commit
65cd4139f0
4
app.vue
4
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>
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
160
pages/auth/authorize.vue
Executable file
160
pages/auth/authorize.vue
Executable file
@ -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>
|
||||
103
pages/flow/account/confirm.vue
Executable file
103
pages/flow/account/confirm.vue
Executable file
@ -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>
|
||||
122
pages/flow/account/password-reset.vue
Executable file
122
pages/flow/account/password-reset.vue
Executable file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user