♻️ Moved sign in from Passport to here

This commit is contained in:
2024-08-12 15:55:15 +08:00
parent b86d446607
commit 48da7d1a46
19 changed files with 968 additions and 10 deletions

15
components/Copyright.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div class="text-xs text-grey" :class="(props.centered ?? true) ? 'text-center' : 'text-left'">
<p>Copyright © {{ new Date().getFullYear() }} Solsynth LLC</p>
<p>Powered by <a class="underline" :href="projects[props.service][1]">{{ projects[props.service][0] }}</a></p>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{ service: string, centered?: boolean }>()
const projects: { [id: string]: [string, string] } = {
"passport": ["Hydrogen.Passport", "https://git.solsynth.dev/Hydrogen/Passport"],
"paperclip": ["Hydrogen.Paperclip", "https://git.solsynth.dev/Hydrogen/Paperclip"],
}
</script>

58
components/UserMenu.vue Executable file
View File

@ -0,0 +1,58 @@
<template>
<v-menu>
<template #activator="{ props }">
<v-btn flat exact v-bind="props" icon>
<v-avatar color="transparent" icon="mdi-account-circle" :image="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="/auth/sign-in" />
<v-list-item title="Create account" prepend-icon="mdi-account-plus" to="/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="Dashboard" prepend-icon="mdi-account-supervisor" exact to="/users/me" />
<v-list-item title="Sign out" prepend-icon="mdi-logout" @click="signout"></v-list-item>
</v-list>
</v-menu>
</template>
<script setup lang="ts">
import { defaultUserinfo, useUserinfo } from "@/stores/userinfo"
import { computed } from "vue"
import Cookie from "universal-cookie"
const config = useRuntimeConfig()
const id = useUserinfo()
const username = computed(() => {
if (id.userinfo.isLoggedIn) {
return "@" + id.userinfo.data?.name
} else {
return "@visitor"
}
})
const nickname = computed(() => {
if (id.userinfo.isLoggedIn) {
return id.userinfo.data?.nick
} else {
return "Anonymous"
}
})
const avatar = computed(() => {
return id.userinfo.data?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${id.userinfo.data?.avatar}` : void 0
})
function signout() {
const ck = new Cookie()
ck.remove("__hydrogen_atk")
ck.remove("__hydrogen_rtk")
id.userinfo = defaultUserinfo
window.location.reload()
}
</script>

View File

@ -0,0 +1,187 @@
<template>
<v-expansion-panels>
<v-expansion-panel eager title="Tickets">
<template #text>
<v-card :loading="reverting.tickets" variant="outlined">
<v-data-table-server
density="compact"
:headers="dataDefinitions.tickets"
:items="tickets"
:items-length="pagination.tickets.total"
:loading="reverting.tickets"
v-model:items-per-page="pagination.tickets.pageSize"
@update:options="readTickets"
item-value="id"
>
<template v-slot:item="{ item }: { item: any }">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.ip_address }}</td>
<td>
<v-tooltip :text="item.user_agent" location="top">
<template #activator="{ props }">
<div v-bind="props" class="text-ellipsis whitespace-nowrap overflow-hidden max-w-[280px]">
{{ item.user_agent }}
</div>
</template>
</v-tooltip>
</td>
<td>{{ new Date(item.created_at).toLocaleString() }}</td>
<td>
<v-tooltip text="Sign Out">
<template #activator="{ props }">
<v-btn
v-bind="props"
variant="text"
size="x-small"
color="error"
icon="mdi-logout-variant"
@click="killTicket(item)"
/>
</template>
</v-tooltip>
</td>
</tr>
</template>
</v-data-table-server>
</v-card>
</template>
</v-expansion-panel>
<v-expansion-panel eager title="Events">
<template #text>
<v-card :loading="reverting.events" variant="outlined">
<v-data-table-server
density="compact"
:headers="dataDefinitions.events"
:items="events"
:items-length="pagination.events.total"
:loading="reverting.events"
v-model:items-per-page="pagination.events.pageSize"
@update:options="readEvents"
item-value="id"
>
<template v-slot:item="{ item }: { item: any }">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.type }}</td>
<td>{{ item.target }}</td>
<td>{{ item.ip_address }}</td>
<td>
<v-tooltip :text="item.user_agent" location="top">
<template #activator="{ props }">
<div v-bind="props" class="text-ellipsis whitespace-nowrap overflow-hidden max-w-[180px]">
{{ item.user_agent }}
</div>
</template>
</v-tooltip>
</td>
<td>{{ new Date(item.created_at).toLocaleString() }}</td>
</tr>
</template>
</v-data-table-server>
</v-card>
</template>
</v-expansion-panel>
</v-expansion-panels>
</template>
<script setup lang="ts">
const config = useRuntimeConfig()
const error = ref<string | null>(null)
const dataDefinitions: { [id: string]: any[] } = {
tickets: [
{ align: "start", key: "id", title: "ID" },
{ align: "start", key: "ip_address", title: "IP Address" },
{ align: "start", key: "user_agent", title: "User Agent" },
{ align: "start", key: "created_at", title: "Issued At" },
{ align: "start", key: "actions", title: "Actions", sortable: false },
],
events: [
{ align: "start", key: "id", title: "ID" },
{ align: "start", key: "type", title: "Type" },
{ align: "start", key: "target", title: "Affected Object" },
{ align: "start", key: "ip_address", title: "IP Address" },
{ align: "start", key: "user_agent", title: "User Agent" },
{ align: "start", key: "created_at", title: "Performed At" },
],
}
const tickets = ref<any>([])
const events = ref<any>([])
const reverting = reactive({ tickets: false, sessions: false, events: false })
const pagination = reactive({
tickets: { page: 1, pageSize: 5, total: 0 },
events: { page: 1, pageSize: 5, total: 0 },
})
async function readTickets({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
if (itemsPerPage) pagination.tickets.pageSize = itemsPerPage
if (page) pagination.tickets.page = page
reverting.sessions = true
const res = await fetch(
`${config.public.solarNetworkApi}/cgi/auth/users/me/tickets?` +
new URLSearchParams({
take: pagination.tickets.pageSize.toString(),
offset: ((pagination.tickets.page - 1) * pagination.tickets.pageSize).toString(),
}),
{
headers: { Authorization: `Bearer ${getAtk()}` },
},
)
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
tickets.value = data["data"]
pagination.tickets.total = data["count"]
}
reverting.sessions = false
}
async function readEvents({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
if (itemsPerPage) pagination.events.pageSize = itemsPerPage
if (page) pagination.events.page = page
reverting.events = true
const res = await fetch(
`${config.public.solarNetworkApi}/cgi/auth/users/me/events?` +
new URLSearchParams({
take: pagination.events.pageSize.toString(),
offset: ((pagination.events.page - 1) * pagination.events.pageSize).toString(),
}),
{
headers: { Authorization: `Bearer ${getAtk()}` },
},
)
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
events.value = data["data"]
pagination.events.total = data["count"]
}
reverting.events = false
}
Promise.all([readTickets({}), readEvents({})])
async function killTicket(item: any) {
reverting.sessions = true
const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/users/me/tickets/${item.id}`, {
method: "DELETE",
headers: { Authorization: `Bearer ${getAtk()}` },
})
if (res.status !== 200) {
error.value = await res.text()
} else {
await readTickets({})
error.value = null
}
reverting.sessions = false
}
</script>

View File

@ -6,7 +6,7 @@
</v-sheet>
</v-carousel-item>
</v-carousel>
<div v-else class="w-full flex items-center justify-center">
<div v-else class="w-full h-full flex items-center justify-center">
<v-progress-circular indeterminate />
</div>
</template>

View File

@ -0,0 +1,66 @@
<template>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<v-text-field label="Username" variant="solo" density="comfortable" class="mb-3" :hide-details="true"
:disabled="props.loading" v-model="probe" />
<v-text-field label="Password" variant="solo" density="comfortable" type="password" :disabled="props.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-between">
<v-btn type="button" variant="plain" color="grey-darken-3" to="/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"
const config = useRuntimeConfig()
const probe = ref("")
const password = ref("")
const error = ref<string | null>(null)
const props = defineProps<{ loading?: boolean }>()
const emits = defineEmits(["swap", "update:loading", "update:ticket"])
async function submit() {
if (!probe.value || !password.value) return
emits("update:loading", true)
const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username: probe.value, password: password.value }),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
emits("update:ticket", data["ticket"])
if (data.is_finished) emits("swap", "completed")
else emits("swap", "mfa")
error.value = null
}
emits("update:loading", false)
}
</script>

View File

@ -0,0 +1,69 @@
<template>
<div>
<v-icon icon="mdi-lan-check" size="32" color="grey-darken-3" class="mb-3" />
<h1 class="font-bold text-xl">All Done!</h1>
<p>Welcome back! You just signed in right now! We're going to direct you to dashboard...</p>
<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>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
const config = useRuntimeConfig()
const route = useRoute()
const router = useRouter()
const userinfo = useUserinfo()
const props = defineProps<{ loading?: boolean; currentFactor?: any; ticket?: any }>()
const emits = defineEmits(["update:loading"])
const error = ref<string | null>(null)
async function load() {
emits("update:loading", true)
await getToken(props.ticket.grant_token)
await userinfo.readProfiles()
setTimeout(() => callback(), 1850)
}
onMounted(() => load())
async function getToken(tk: string) {
const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/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 out = await res.json()
setTokenSet(out["access_token"], out["refresh_token"])
error.value = null
}
}
function callback() {
if (route.query["close"]) {
window.close()
} else if (route.query["redirect_uri"]) {
window.open((route.query["redirect_uri"] as string) ?? "/", "_self")
} else {
router.push("/users/me")
}
}
</script>

View File

@ -0,0 +1,14 @@
<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">
const route = useRoute()
</script>

View File

@ -0,0 +1,94 @@
<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 { computed, ref } from "vue"
const config = useRuntimeConfig()
const password = ref("")
const error = ref<string | null>(null)
const props = defineProps<{ loading?: boolean; currentFactor?: any; ticket?: any }>()
const emits = defineEmits(["swap", "update:ticket", "update:loading"])
async function submit() {
emits("update:loading", true)
const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth/mfa`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
ticket_id: props.ticket?.id,
factor_id: props.currentFactor?.id,
code: password.value,
}),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
error.value = null
password.value = ""
emits("update:ticket", data["ticket"])
if (data["is_finished"]) emits("swap", "completed")
else emits("swap", "mfa")
}
emits("update:loading", false)
}
const inputType = computed(() => {
switch (props.currentFactor?.type) {
case 0:
return "text"
case 1:
return "one-time-password"
default:
return "unknown"
}
})
</script>

View File

@ -0,0 +1,89 @@
<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, idx) in factors ?? []"
:key="idx"
: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 { onMounted, ref } from "vue"
const config = useRuntimeConfig()
const focus = ref<number | null>(null)
const factors = ref<any[]>([])
const error = ref<string | null>(null)
const props = defineProps<{ ticket?: any }>()
const emits = defineEmits(["swap", "update:loading", "update:currentFactor"])
async function load() {
emits("update:loading", true)
const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth/factors?ticketId=${props.ticket.id}`)
if (res.status !== 200) {
error.value = await res.text()
} else {
factors.value = (await res.json()).filter((e: any) => e.type != 0)
}
emits("update:loading", false)
}
onMounted(() => load())
async function submit() {
if (!focus.value) return
emits("update:loading", true)
const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/auth/factors/${focus.value}`, {
method: "POST",
})
if (res.status !== 200 && res.status !== 204) {
error.value = await res.text()
} else {
const item = factors.value.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 1:
return { icon: "mdi-email-fast", label: "Email Validation" }
}
}
function getFactorAvailable(factor: any) {
const blacklist: number[] = props.ticket?.blacklist_factors ?? []
return blacklist.includes(factor.id)
}
</script>