♻️ Updated auth page
This commit is contained in:
@@ -34,4 +34,8 @@
|
||||
|
||||
.n-image-preview-toolbar {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.h-screen-no-header {
|
||||
height: calc(100vh - 64px*2);
|
||||
}
|
||||
|
||||
10
app/components.d.ts
vendored
10
app/components.d.ts
vendored
@@ -25,6 +25,8 @@ declare module 'vue' {
|
||||
NDialog: typeof import('naive-ui')['NDialog']
|
||||
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
|
||||
NDropdown: typeof import('naive-ui')['NDropdown']
|
||||
NForm: typeof import('naive-ui')['NForm']
|
||||
NFormItem: typeof import('naive-ui')['NFormItem']
|
||||
NIcon: typeof import('naive-ui')['NIcon']
|
||||
NImage: typeof import('naive-ui')['NImage']
|
||||
NImg: typeof import('naive-ui')['NImg']
|
||||
@@ -35,6 +37,9 @@ declare module 'vue' {
|
||||
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
|
||||
NModal: typeof import('naive-ui')['NModal']
|
||||
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
|
||||
NProgress: typeof import('naive-ui')['NProgress']
|
||||
NRadio: typeof import('naive-ui')['NRadio']
|
||||
NRadioGroup: typeof import('naive-ui')['NRadioGroup']
|
||||
NSelect: typeof import('naive-ui')['NSelect']
|
||||
NSpace: typeof import('naive-ui')['NSpace']
|
||||
NSpin: typeof import('naive-ui')['NSpin']
|
||||
@@ -61,6 +66,8 @@ declare global {
|
||||
const NDialog: typeof import('naive-ui')['NDialog']
|
||||
const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
|
||||
const NDropdown: typeof import('naive-ui')['NDropdown']
|
||||
const NForm: typeof import('naive-ui')['NForm']
|
||||
const NFormItem: typeof import('naive-ui')['NFormItem']
|
||||
const NIcon: typeof import('naive-ui')['NIcon']
|
||||
const NImage: typeof import('naive-ui')['NImage']
|
||||
const NImg: typeof import('naive-ui')['NImg']
|
||||
@@ -71,6 +78,9 @@ declare global {
|
||||
const NMessageProvider: typeof import('naive-ui')['NMessageProvider']
|
||||
const NModal: typeof import('naive-ui')['NModal']
|
||||
const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
|
||||
const NProgress: typeof import('naive-ui')['NProgress']
|
||||
const NRadio: typeof import('naive-ui')['NRadio']
|
||||
const NRadioGroup: typeof import('naive-ui')['NRadioGroup']
|
||||
const NSelect: typeof import('naive-ui')['NSelect']
|
||||
const NSpace: typeof import('naive-ui')['NSpace']
|
||||
const NSpin: typeof import('naive-ui')['NSpin']
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<!-- All images: use carousel -->
|
||||
<div
|
||||
v-if="isAllImages"
|
||||
class="carousel-container rounded-lg overflow-hidden"
|
||||
class="carousel-container rounded-xl border bg-base-300 overflow-hidden"
|
||||
:style="carouselStyle"
|
||||
>
|
||||
<n-carousel height="100%" show-arrow>
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div class="container absolute bottom-5 left-1/2 -translate-x-1/2">
|
||||
<div class="flex justify-between items-center">
|
||||
<n-select
|
||||
:options="[{ label: 'English (United States)', value: 'en-us' }]"
|
||||
model-value="en-us"
|
||||
size="small"
|
||||
class="flex-grow-0"
|
||||
/>
|
||||
<div class="flex">
|
||||
<n-button text size="small">Help</n-button>
|
||||
<n-button text size="small">Privacy</n-button>
|
||||
<n-button text size="small">Terms</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-card :size="compact ? 'small' : 'medium'">
|
||||
<n-card>
|
||||
<div :class="['flex flex-col', compact ? 'gap-1' : 'gap-3']">
|
||||
<post-header :item="props.item" :compact="compact" />
|
||||
|
||||
@@ -22,21 +22,17 @@
|
||||
<template v-if="showReferenced">
|
||||
<div
|
||||
v-if="props.item.repliedPost || props.item.repliedGone"
|
||||
class="border rounded-xl"
|
||||
class="border rounded-xl mt-2"
|
||||
>
|
||||
<div class="p-2 flex items-center gap-2">
|
||||
<n-icon :component="ReplyIcon" class="ms-2" />
|
||||
<span class="font-bold">Replying to</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.item.repliedGone"
|
||||
class="px-4 pb-3 text-sm opacity-60"
|
||||
>
|
||||
<div v-if="props.item.repliedGone" class="text-sm opacity-60">
|
||||
Post unavailable
|
||||
</div>
|
||||
<post-item
|
||||
v-else-if="props.item.repliedPost"
|
||||
class="px-4 pb-3"
|
||||
:item="props.item.repliedPost"
|
||||
slim
|
||||
compact
|
||||
@@ -47,21 +43,17 @@
|
||||
|
||||
<div
|
||||
v-if="props.item.forwardedPost || props.item.forwardedGone"
|
||||
class="border rounded-xl"
|
||||
class="border rounded-xl mt-2"
|
||||
>
|
||||
<div class="p-2 flex items-center gap-2">
|
||||
<n-icon :component="ForwardIcon" class="ms-2" />
|
||||
<span class="font-bold">Forwarded</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="props.item.forwardedGone"
|
||||
class="px-4 pb-3 text-sm opacity-60"
|
||||
>
|
||||
<div v-if="props.item.forwardedGone" class="text-sm opacity-60">
|
||||
Post unavailable
|
||||
</div>
|
||||
<post-item
|
||||
v-else-if="props.item.forwardedPost"
|
||||
class="px-4 pb-3"
|
||||
:item="props.item.forwardedPost"
|
||||
slim
|
||||
compact
|
||||
|
||||
@@ -1,146 +1,191 @@
|
||||
<template>
|
||||
<v-container class="d-flex align-center justify-center fill-height">
|
||||
<v-card max-width="1000" rounded="lg" width="100%">
|
||||
<div v-if="isLoading" class="d-flex justify-center mb-4">
|
||||
<v-progress-linear indeterminate color="primary" height="4" />
|
||||
</div>
|
||||
<div class="pa-8">
|
||||
<div class="flex items-center justify-center h-screen-no-header px-4">
|
||||
<n-card class="w-full max-w-[1000px]" size="large">
|
||||
<div class="p-4 md:p-8">
|
||||
<div class="mb-4">
|
||||
<img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="6" class="d-flex align-start justify-start">
|
||||
<div class="md:text-left h-auto">
|
||||
<div v-if="stage === 'username-nick'">
|
||||
<h2 class="text-2xl font-bold mb-1">Create your account</h2>
|
||||
<p class="text-lg">Start with your username and nickname</p>
|
||||
</div>
|
||||
<div v-if="stage === 'email'">
|
||||
<h2 class="text-2xl font-bold mb-1">Add your email</h2>
|
||||
<p class="text-lg">We'll use this for account verification</p>
|
||||
</div>
|
||||
<div v-if="stage === 'password'">
|
||||
<h2 class="text-2xl font-bold mb-1">Set your password</h2>
|
||||
<p class="text-lg">Choose a strong password for your account</p>
|
||||
</div>
|
||||
<div v-if="stage === 'captcha'">
|
||||
<h2 class="text-2xl font-bold mb-1">Verify you're human</h2>
|
||||
<p class="text-lg">
|
||||
Complete the captcha to create your account
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="flex flex-col items-start justify-between">
|
||||
<div class="text-left h-auto">
|
||||
<Transition mode="out-in" name="slide-fade">
|
||||
<div v-if="stage === 'username-nick'" key="username-nick">
|
||||
<h2 class="text-2xl font-bold mb-1">Create your account</h2>
|
||||
<p class="text-lg">Start with your username and nickname</p>
|
||||
</div>
|
||||
<div v-else-if="stage === 'email'" key="email">
|
||||
<h2 class="text-2xl font-bold mb-1">Add your email</h2>
|
||||
<p class="text-lg">We'll use this for account verification</p>
|
||||
</div>
|
||||
<div v-else-if="stage === 'password'" key="password">
|
||||
<h2 class="text-2xl font-bold mb-1">Set your password</h2>
|
||||
<p class="text-lg">
|
||||
Choose a strong password for your account
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="stage === 'captcha'" key="captcha">
|
||||
<h2 class="text-2xl font-bold mb-1">Verify you're human</h2>
|
||||
<p class="text-lg">
|
||||
Complete the captcha to create your account
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="stage === 'terms'" key="terms">
|
||||
<h2 class="text-2xl font-bold mb-1">Review Terms</h2>
|
||||
<p class="text-lg">
|
||||
Please review our terms and conditions before creating your
|
||||
account.
|
||||
</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
|
||||
<div class="w-full d-flex flex-column md:text-right">
|
||||
<v-window
|
||||
v-model="activeStageIndex"
|
||||
class="align-self-stretch pt-2"
|
||||
<div v-if="isLoading" class="mb-4">
|
||||
<span class="loading loading-spinner loading-xl"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-stretch">
|
||||
<div class="w-full flex flex-col md:text-right">
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="formModel"
|
||||
:rules="rules"
|
||||
label-placement="top"
|
||||
class="w-full"
|
||||
>
|
||||
<!-- Stage 1: Username and Nickname -->
|
||||
<v-window-item :value="0">
|
||||
<v-text-field
|
||||
v-model="formModel.name"
|
||||
label="Username"
|
||||
variant="outlined"
|
||||
:rules="nameRules"
|
||||
class="mb-2"
|
||||
@keydown.enter="handleNext"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="formModel.nick"
|
||||
label="Nickname"
|
||||
variant="outlined"
|
||||
:rules="nickRules"
|
||||
class="mb-2"
|
||||
@keydown.enter="handleNext"
|
||||
/>
|
||||
<div class="d-flex justify-space-between align-center mt-6">
|
||||
<v-btn
|
||||
variant="text"
|
||||
class="text-capitalize"
|
||||
to="/auth/login"
|
||||
>
|
||||
Login
|
||||
</v-btn>
|
||||
<v-btn color="primary" size="large" @click="handleNext">
|
||||
Next
|
||||
</v-btn>
|
||||
<Transition mode="out-in" name="slide-fade">
|
||||
<div v-if="stage === 'username-nick'" key="username-nick">
|
||||
<n-form-item label="Username" path="name">
|
||||
<n-input
|
||||
size="large"
|
||||
v-model:value="formModel.name"
|
||||
placeholder="Username"
|
||||
class="text-left"
|
||||
@keydown.enter.prevent="handleNext"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Nickname" path="nick">
|
||||
<n-input
|
||||
size="large"
|
||||
v-model:value="formModel.nick"
|
||||
placeholder="Nickname"
|
||||
class="text-left"
|
||||
@keydown.enter.prevent="handleNext"
|
||||
/>
|
||||
</n-form-item>
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<n-button text to="/auth/login">Login</n-button>
|
||||
<n-button type="primary" size="large" @click="handleNext">
|
||||
Next
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Stage 2: Email -->
|
||||
<v-window-item :value="1">
|
||||
<v-text-field
|
||||
v-model="formModel.email"
|
||||
label="Email"
|
||||
placeholder="your@email.com"
|
||||
variant="outlined"
|
||||
:rules="emailRules"
|
||||
class="mb-2"
|
||||
@keydown.enter="handleNext"
|
||||
/>
|
||||
<div class="d-flex justify-space-between align-center mt-6">
|
||||
<v-spacer />
|
||||
<v-btn color="primary" size="large" @click="handleNext">
|
||||
Next
|
||||
</v-btn>
|
||||
<!-- Stage 2: Email -->
|
||||
<div v-else-if="stage === 'email'" key="email">
|
||||
<n-form-item label="Email" path="email">
|
||||
<n-input
|
||||
v-model:value="formModel.email"
|
||||
placeholder="your@email.com"
|
||||
size="large"
|
||||
class="text-left"
|
||||
@keydown.enter.prevent="handleNext"
|
||||
/>
|
||||
</n-form-item>
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<div />
|
||||
<n-button type="primary" size="large" @click="handleNext">
|
||||
Next
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Stage 3: Password -->
|
||||
<v-window-item :value="2">
|
||||
<v-text-field
|
||||
v-model="formModel.password"
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
variant="outlined"
|
||||
:rules="passwordRules"
|
||||
class="mb-2"
|
||||
@keydown.enter="handleNext"
|
||||
/>
|
||||
<div class="d-flex justify-space-between align-center mt-6">
|
||||
<v-spacer />
|
||||
<v-btn color="primary" size="large" @click="handleNext">
|
||||
Next
|
||||
</v-btn>
|
||||
<!-- Stage 3: Password -->
|
||||
<div v-else-if="stage === 'password'" key="password">
|
||||
<n-form-item label="Password" path="password">
|
||||
<n-input
|
||||
v-model:value="formModel.password"
|
||||
type="password"
|
||||
show-password-on="click"
|
||||
placeholder="Enter your password"
|
||||
class="text-left"
|
||||
size="large"
|
||||
@keydown.enter.prevent="handleNext"
|
||||
/>
|
||||
</n-form-item>
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<div />
|
||||
<n-button type="primary" size="large" @click="handleNext">
|
||||
Next
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Stage 4: Captcha -->
|
||||
<v-window-item :value="3">
|
||||
<div class="d-flex justify-center mb-4">
|
||||
<client-only>
|
||||
<captcha-widget @verified="onCaptchaVerified" />
|
||||
</client-only>
|
||||
<!-- Stage 4: Captcha -->
|
||||
<div v-else-if="stage === 'captcha'" key="captcha">
|
||||
<div class="flex justify-center mb-4">
|
||||
<client-only>
|
||||
<captcha-widget @verified="onCaptchaVerified" />
|
||||
</client-only>
|
||||
</div>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
|
||||
<v-alert
|
||||
v-if="error"
|
||||
type="error"
|
||||
closable
|
||||
class="mt-2"
|
||||
@update:model-value="error = null"
|
||||
>
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
<!-- Stage 5: Terms -->
|
||||
<div v-else-if="stage === 'terms'" key="terms">
|
||||
<n-alert type="info" title="Things you need to know">
|
||||
<ul class="list-decimal flex flex-col gap-1">
|
||||
<li>
|
||||
You can't have multiple accounts on the Solar Network,
|
||||
that violates our Terms of Service.
|
||||
</li>
|
||||
<li>
|
||||
You need go to your email to confirm your
|
||||
registeration before you have permissions to do
|
||||
something.
|
||||
</li>
|
||||
<li>
|
||||
Feel free to contact our customer service at
|
||||
<address>lily@solsynth.dev</address>
|
||||
</li>
|
||||
<li>
|
||||
Make sure you agreed to our Terms and Service,
|
||||
<nuxt-link
|
||||
class="underline font-bold"
|
||||
href="https://solsynth.dev/terms"
|
||||
target="_blank"
|
||||
>
|
||||
check it out
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</n-alert>
|
||||
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<n-button text @click="stage = 'captcha'">Back</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="handleCreateAccount"
|
||||
>
|
||||
Create Account
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</n-form>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
<footer-compact />
|
||||
</v-container>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from "vue"
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { useSolarNetwork } from "~/composables/useSolarNetwork"
|
||||
import CaptchaWidget from "~/components/CaptchaWidget.vue"
|
||||
import type { FormInst, FormRules } from "naive-ui"
|
||||
|
||||
import IconLight from "~/assets/images/cloudy-lamb.png"
|
||||
|
||||
@@ -151,27 +196,11 @@ useHead({
|
||||
title: "Create Account"
|
||||
})
|
||||
|
||||
const stage = ref<"username-nick" | "email" | "password" | "captcha">(
|
||||
const stage = ref<"username-nick" | "email" | "password" | "captcha" | "terms">(
|
||||
"username-nick"
|
||||
)
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Computed for v-window active index
|
||||
const activeStageIndex = computed(() => {
|
||||
switch (stage.value) {
|
||||
case "username-nick":
|
||||
return 0
|
||||
case "email":
|
||||
return 1
|
||||
case "password":
|
||||
return 2
|
||||
case "captcha":
|
||||
return 3
|
||||
default:
|
||||
return 0
|
||||
}
|
||||
})
|
||||
const formRef = ref<FormInst | null>(null)
|
||||
|
||||
const formModel = reactive({
|
||||
name: "",
|
||||
@@ -186,105 +215,150 @@ onMounted(() => {
|
||||
formModel.language = navigator.language
|
||||
})
|
||||
|
||||
const nameRules = [
|
||||
(v: string) => !!v || "Name is required",
|
||||
(v: string) => v.length >= 2 || "Name must be at least 2 characters long",
|
||||
(v: string) => v.length <= 256 || "Name must be at most 256 characters long",
|
||||
(v: string) =>
|
||||
/^[A-Za-z0-9_-]+$/.test(v) ||
|
||||
"Name can only contain letters, numbers, underscores, and hyphens."
|
||||
]
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
|
||||
const nickRules = [
|
||||
(v: string) => !!v || "Nick is required",
|
||||
(v: string) => v.length <= 256 || "Nick must be at most 256 characters long"
|
||||
]
|
||||
|
||||
const emailRules = [
|
||||
(v: string) => !!v || "Email is required",
|
||||
(v: string) =>
|
||||
v.length <= 1024 || "Email must be at most 1024 characters long",
|
||||
(v: string) =>
|
||||
/^[^+]+@[^@]+\.[^@]+$/.test(v) ||
|
||||
"Email address cannot contain '+' symbol.",
|
||||
(v: string) => /.+@.+\..+/.test(v) || "Please enter a valid email address"
|
||||
]
|
||||
|
||||
const passwordRules = [
|
||||
(v: string) => !!v || "Password is required",
|
||||
(v: string) => v.length >= 4 || "Password must be at least 4 characters long",
|
||||
(v: string) =>
|
||||
v.length <= 128 || "Password must be at most 128 characters long"
|
||||
]
|
||||
const rules: FormRules = {
|
||||
name: [
|
||||
{
|
||||
key: "name",
|
||||
required: true,
|
||||
message: "Name is required",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
min: 2,
|
||||
message: "Name must be at least 2 characters long",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
max: 256,
|
||||
message: "Name must be at most 256 characters long",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
pattern: /^[A-Za-z0-9_-]+$/,
|
||||
message:
|
||||
"Name can only contain letters, numbers, underscores, and hyphens.",
|
||||
trigger: ["input", "blur"]
|
||||
}
|
||||
],
|
||||
nick: [
|
||||
{
|
||||
key: "nick",
|
||||
required: true,
|
||||
message: "Nick is required",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "nick",
|
||||
max: 256,
|
||||
message: "Nick must be at most 256 characters long",
|
||||
trigger: ["input", "blur"]
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
key: "email",
|
||||
required: true,
|
||||
message: "Email is required",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
max: 1024,
|
||||
message: "Email must be at most 1024 characters long",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
validator: (_rule, value: string) => {
|
||||
if (value.includes("+")) {
|
||||
return new Error("Email address cannot contain '+' symbol.")
|
||||
}
|
||||
if (!/.+@.+\..+/.test(value)) {
|
||||
return new Error("Please enter a valid email address")
|
||||
}
|
||||
return true
|
||||
},
|
||||
trigger: ["input", "blur"]
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
key: "password",
|
||||
required: true,
|
||||
message: "Password is required",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "password",
|
||||
min: 4,
|
||||
message: "Password must be at least 4 characters long",
|
||||
trigger: ["input", "blur"]
|
||||
},
|
||||
{
|
||||
key: "password",
|
||||
max: 128,
|
||||
message: "Password must be at most 128 characters long",
|
||||
trigger: ["input", "blur"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const onCaptchaVerified = (token: string) => {
|
||||
formModel.captchaToken = token
|
||||
handleCreateAccount()
|
||||
stage.value = "terms"
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
error.value = null
|
||||
if (stage.value === "username-nick") {
|
||||
if (!formModel.name || !formModel.nick) {
|
||||
error.value = "Please fill in username and nickname"
|
||||
return
|
||||
async function handleNext() {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
if (stage.value === "username-nick") {
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
formRef.value?.validate(
|
||||
(errors) => {
|
||||
if (errors) reject(new Error("Validation failed"))
|
||||
else resolve()
|
||||
},
|
||||
(rule) => rule.key === "name" || rule.key === "nick"
|
||||
)
|
||||
})
|
||||
stage.value = "email"
|
||||
} else if (stage.value === "email") {
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
formRef.value?.validate(
|
||||
(errors) => {
|
||||
if (errors) reject(new Error("Validation failed"))
|
||||
else resolve()
|
||||
},
|
||||
(rule) => rule.key === "email"
|
||||
)
|
||||
})
|
||||
stage.value = "password"
|
||||
} else if (stage.value === "password") {
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
formRef.value?.validate(
|
||||
(errors) => {
|
||||
if (errors) reject(new Error("Validation failed"))
|
||||
else resolve()
|
||||
},
|
||||
(rule) => rule.key === "password"
|
||||
)
|
||||
})
|
||||
stage.value = "captcha"
|
||||
}
|
||||
if (
|
||||
!nameRules.every(
|
||||
(rule) =>
|
||||
typeof rule(formModel.name) === "boolean" && rule(formModel.name)
|
||||
)
|
||||
) {
|
||||
error.value = "Invalid username"
|
||||
return
|
||||
}
|
||||
if (
|
||||
!nickRules.every(
|
||||
(rule) =>
|
||||
typeof rule(formModel.nick) === "boolean" && rule(formModel.nick)
|
||||
)
|
||||
) {
|
||||
error.value = "Invalid nickname"
|
||||
return
|
||||
}
|
||||
stage.value = "email"
|
||||
} else if (stage.value === "email") {
|
||||
if (!formModel.email) {
|
||||
error.value = "Please enter your email"
|
||||
return
|
||||
}
|
||||
if (
|
||||
!emailRules.every(
|
||||
(rule) =>
|
||||
typeof rule(formModel.email) === "boolean" && rule(formModel.email)
|
||||
)
|
||||
) {
|
||||
error.value = "Invalid email"
|
||||
return
|
||||
}
|
||||
stage.value = "password"
|
||||
} else if (stage.value === "password") {
|
||||
if (!formModel.password) {
|
||||
error.value = "Please enter your password"
|
||||
return
|
||||
}
|
||||
if (
|
||||
!passwordRules.every(
|
||||
(rule) =>
|
||||
typeof rule(formModel.password) === "boolean" &&
|
||||
rule(formModel.password)
|
||||
)
|
||||
) {
|
||||
error.value = "Invalid password"
|
||||
return
|
||||
}
|
||||
stage.value = "captcha"
|
||||
} catch {
|
||||
// Validation error, do nothing
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateAccount() {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
await api("/id/accounts", {
|
||||
@@ -300,14 +374,35 @@ async function handleCreateAccount() {
|
||||
})
|
||||
|
||||
// On success, redirect to login page
|
||||
alert(
|
||||
"Welcome to Solar Network! Your account has been created successfully. Don't forget to check your email for activation instructions."
|
||||
)
|
||||
router.push("/auth/login")
|
||||
dialog.success({
|
||||
title: "Registration Completed",
|
||||
content:
|
||||
"Welcome to Solar Network! Your account has been created successfully. Don't forget to check your email for activation instructions.",
|
||||
onPositiveClick: () => {
|
||||
router.push("/auth/login")
|
||||
}
|
||||
})
|
||||
} catch (e: unknown) {
|
||||
error.value = e instanceof Error ? e.message : "An error occurred"
|
||||
message.error(e instanceof Error ? e.message : "An error occurred")
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-fade-enter-active,
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,11 +4,11 @@ import { useRoute, useRouter } from "vue-router"
|
||||
import { useUserStore } from "~/stores/user"
|
||||
import { useSolarNetwork } from "~/composables/useSolarNetwork"
|
||||
import type { SnAuthChallenge, SnAuthFactor } from "~/types/api"
|
||||
import { useMessage } from "naive-ui"
|
||||
|
||||
import FingerprintJS from "@fingerprintjs/fingerprintjs"
|
||||
|
||||
import IconLight from "~/assets/images/cloudy-lamb.png"
|
||||
import IconDark from "~/assets/images/cloudy-lamb@dark.png"
|
||||
|
||||
// State management
|
||||
useHead({
|
||||
@@ -19,23 +19,7 @@ const stage = ref<
|
||||
"find-account" | "select-factor" | "enter-code" | "token-exchange"
|
||||
>("find-account")
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Computed for v-window active index
|
||||
const activeStageIndex = computed(() => {
|
||||
switch (stage.value) {
|
||||
case "find-account":
|
||||
return 0
|
||||
case "select-factor":
|
||||
return 1
|
||||
case "enter-code":
|
||||
return 2
|
||||
case "token-exchange":
|
||||
return 3
|
||||
default:
|
||||
return 0
|
||||
}
|
||||
})
|
||||
const message = useMessage()
|
||||
|
||||
// Stage 1: Find Account
|
||||
const accountIdentifier = ref("")
|
||||
@@ -64,11 +48,10 @@ const selectedFactor = computed(() => {
|
||||
|
||||
async function handleFindAccount() {
|
||||
if (!accountIdentifier.value) {
|
||||
error.value = "Please enter your email or username."
|
||||
message.error("Please enter your email or username.")
|
||||
return
|
||||
}
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
challenge.value = await api("/id/auth/challenge", {
|
||||
@@ -83,7 +66,7 @@ async function handleFindAccount() {
|
||||
await getFactors()
|
||||
stage.value = "select-factor"
|
||||
} catch (e: unknown) {
|
||||
error.value = e instanceof Error ? e.message : "An error occurred"
|
||||
message.error(e instanceof Error ? e.message : "An error occurred")
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
@@ -93,7 +76,6 @@ async function getFactors() {
|
||||
if (!challenge.value) return
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const availableFactors = await api<SnAuthFactor[]>(
|
||||
`/id/auth/challenge/${challenge.value.id}/factors`
|
||||
@@ -104,11 +86,12 @@ async function getFactors() {
|
||||
if (factors.value.length > 0) {
|
||||
selectedFactorId.value = null // Let user choose
|
||||
} else if (challenge.value.stepRemain > 0) {
|
||||
error.value =
|
||||
message.error(
|
||||
"No more available authentication factors, but authentication is not complete. Please contact support."
|
||||
)
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
error.value = e instanceof Error ? e.message : "An error occurred"
|
||||
message.error(e instanceof Error ? e.message : "An error occurred")
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
@@ -119,7 +102,6 @@ async function requestVerificationCode() {
|
||||
|
||||
const isResend = stage.value === "enter-code"
|
||||
if (isResend) isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
await api(
|
||||
@@ -127,7 +109,7 @@ async function requestVerificationCode() {
|
||||
{ method: "POST" }
|
||||
)
|
||||
} catch (e: unknown) {
|
||||
error.value = e instanceof Error ? e.message : "An error occurred"
|
||||
message.error(e instanceof Error ? e.message : "An error occurred")
|
||||
throw e // Rethrow to be handled by caller
|
||||
} finally {
|
||||
if (isResend) isLoading.value = false
|
||||
@@ -136,7 +118,7 @@ async function requestVerificationCode() {
|
||||
|
||||
async function handleFactorSelected() {
|
||||
if (!selectedFactor.value) {
|
||||
error.value = "Please select an authentication method."
|
||||
message.error("Please select an authentication method.")
|
||||
return
|
||||
}
|
||||
|
||||
@@ -149,7 +131,6 @@ async function handleFactorSelected() {
|
||||
// For code-based factors (1, 2, 3, 4), send the code first
|
||||
if ([1, 2, 3, 4].includes(selectedFactor.value.type)) {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
await requestVerificationCode()
|
||||
stage.value = "enter-code"
|
||||
@@ -163,11 +144,10 @@ async function handleFactorSelected() {
|
||||
|
||||
async function handleVerifyFactor() {
|
||||
if (!selectedFactorId.value || !password.value || !challenge.value) {
|
||||
error.value = "Please enter your password/code."
|
||||
message.error("Please enter your password/code.")
|
||||
return
|
||||
}
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
challenge.value = await api(`/id/auth/challenge/${challenge.value.id}`, {
|
||||
@@ -188,7 +168,7 @@ async function handleVerifyFactor() {
|
||||
stage.value = "select-factor" // MFA step
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
error.value = e instanceof Error ? e.message : "An error occurred"
|
||||
message.error(e instanceof Error ? e.message : "An error occurred")
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
@@ -199,7 +179,6 @@ const route = useRoute()
|
||||
|
||||
async function exchangeToken() {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
// The token endpoint gives the Set-Cookie header
|
||||
await api<{ token: string }>("/id/auth/token", {
|
||||
@@ -219,7 +198,7 @@ async function exchangeToken() {
|
||||
await router.push("/")
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
error.value = e instanceof Error ? e.message : "An error occurred"
|
||||
message.error(e instanceof Error ? e.message : "An error occurred")
|
||||
stage.value = "select-factor" // Go back if token exchange fails
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
@@ -242,209 +221,234 @@ function getFactorName(factorType: number) {
|
||||
return "Unknown Factor"
|
||||
}
|
||||
}
|
||||
|
||||
function getFactorIcon(factorType: number) {
|
||||
switch (factorType) {
|
||||
case 0:
|
||||
return "mdi mdi-lock"
|
||||
case 1:
|
||||
return "mdi mdi-email"
|
||||
case 2:
|
||||
return "mdi mdi-cellphone"
|
||||
case 3:
|
||||
return "mdi mdi-clock"
|
||||
case 4:
|
||||
return "mdi mdi-numeric"
|
||||
default:
|
||||
return "mdi mdi-shield-key"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-fade-enter-active,
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<v-container class="d-flex align-center justify-center fill-height">
|
||||
<v-card max-width="1000" rounded="lg" width="100%">
|
||||
<div v-if="isLoading" class="d-flex justify-center mb-4">
|
||||
<v-progress-linear indeterminate color="primary" height="4" />
|
||||
</div>
|
||||
<div class="pa-8">
|
||||
<div class="flex items-center justify-center h-screen-no-header px-4">
|
||||
<n-card class="w-full max-w-[1000px]" size="large">
|
||||
<div class="p-4 md:p-8">
|
||||
<div class="mb-4">
|
||||
<img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="6" class="d-flex align-start justify-start">
|
||||
<div class="md:text-left h-auto">
|
||||
<div v-if="stage === 'find-account'">
|
||||
<h2 class="text-2xl font-bold mb-1">Sign in</h2>
|
||||
<p class="text-lg">Use your Solarpass</p>
|
||||
</div>
|
||||
<div v-if="stage === 'select-factor'">
|
||||
<h2 class="text-2xl font-bold mb-1">Choose how to sign in</h2>
|
||||
<p class="text-lg">
|
||||
Select your preferred authentication method
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="stage === 'enter-code' && selectedFactor">
|
||||
<h2 class="text-2xl font-bold mb-1">
|
||||
Enter your
|
||||
{{
|
||||
selectedFactor.type === 0 ? "password" : "verification code"
|
||||
}}
|
||||
</h2>
|
||||
<p v-if="selectedFactor.type === 1" class="text-lg">
|
||||
A code has been sent to
|
||||
{{ selectedFactor.contact || "your email" }}.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 2" class="text-lg">
|
||||
Enter the code from your in-app authenticator.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 3" class="text-lg">
|
||||
Enter the timed verification code.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 4" class="text-lg">
|
||||
Enter your PIN code.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 0" class="text-lg">
|
||||
Enter your password to continue.
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="stage === 'token-exchange'">
|
||||
<h2 class="text-2xl font-bold mb-1">Finalizing Login</h2>
|
||||
<p class="text-lg">
|
||||
Please wait while we complete your sign in.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
|
||||
<div class="w-full d-flex flex-column md:text-right">
|
||||
<v-window
|
||||
v-model="activeStageIndex"
|
||||
class="align-self-stretch pt-2"
|
||||
>
|
||||
<!-- Stage 1: Find Account -->
|
||||
<v-window-item :value="0">
|
||||
<v-text-field
|
||||
v-model="accountIdentifier"
|
||||
label="Email or username"
|
||||
variant="outlined"
|
||||
class="mb-2"
|
||||
@keydown.enter="handleFindAccount"
|
||||
/>
|
||||
<v-btn
|
||||
slim
|
||||
variant="text"
|
||||
class="text-capitalize"
|
||||
color="primary"
|
||||
>Forgot password?</v-btn
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="flex flex-col items-start justify-between">
|
||||
<div class="text-left h-auto">
|
||||
<div class="text-left h-auto">
|
||||
<Transition mode="out-in" name="slide-fade">
|
||||
<div v-if="stage === 'find-account'" key="find-account">
|
||||
<h2 class="text-2xl font-bold mb-1">Sign in</h2>
|
||||
<p class="text-lg">Use your Solarpass</p>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="stage === 'select-factor'"
|
||||
key="select-factor"
|
||||
>
|
||||
|
||||
<div class="d-flex justify-end">
|
||||
<p class="mt-4 mb-6 text-sm max-w-96">
|
||||
Not your computer? Remember to use Private Browsing
|
||||
windows to sign in.
|
||||
<h2 class="text-2xl font-bold mb-1">
|
||||
Choose how to sign in
|
||||
</h2>
|
||||
<p class="text-lg">
|
||||
Select your preferred authentication method
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="stage === 'enter-code' && selectedFactor"
|
||||
key="enter-code"
|
||||
>
|
||||
<h2 class="text-2xl font-bold mb-1">
|
||||
Enter your
|
||||
{{
|
||||
selectedFactor.type === 0
|
||||
? "password"
|
||||
: "verification code"
|
||||
}}
|
||||
</h2>
|
||||
<p v-if="selectedFactor.type === 1" class="text-lg">
|
||||
A code has been sent to
|
||||
{{ selectedFactor.contact || "your email" }}.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 2" class="text-lg">
|
||||
Enter the code from your in-app authenticator.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 3" class="text-lg">
|
||||
Enter the timed verification code.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 4" class="text-lg">
|
||||
Enter your PIN code.
|
||||
</p>
|
||||
<p v-if="selectedFactor.type === 0" class="text-lg">
|
||||
Enter your password to continue.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="stage === 'token-exchange'"
|
||||
key="token-exchange"
|
||||
>
|
||||
<h2 class="text-2xl font-bold mb-1">Finalizing Login</h2>
|
||||
<p class="text-lg">
|
||||
Please wait while we complete your sign in.
|
||||
</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLoading" class="mb-4">
|
||||
<span class="loading loading-spinner loading-xl"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-stretch">
|
||||
<div class="w-full flex flex-col md:text-right">
|
||||
<Transition mode="out-in" name="slide-fade">
|
||||
<!-- Stage 1: Find Account -->
|
||||
<div v-if="stage === 'find-account'" key="find-account">
|
||||
<n-input
|
||||
size="large"
|
||||
v-model:value="accountIdentifier"
|
||||
placeholder="Email or username"
|
||||
class="text-left"
|
||||
@keydown.enter.prevent="handleFindAccount"
|
||||
/>
|
||||
<div class="mr-3 mt-4">
|
||||
<n-button text type="primary" size="small">
|
||||
Forgot Password?
|
||||
</n-button>
|
||||
|
||||
<div class="d-flex justify-space-between align-center mt-8">
|
||||
<v-btn
|
||||
variant="text"
|
||||
class="text-capitalize"
|
||||
to="/auth/create-account"
|
||||
>
|
||||
<div class="flex justify-end">
|
||||
<p class="mt-4 mb-6 text-sm max-w-96">
|
||||
Not your computer? Remember to use Private Browsing
|
||||
windows to sign in.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-8">
|
||||
<n-button text tag="a" href="/auth/create-account">
|
||||
Create account
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="handleFindAccount"
|
||||
>
|
||||
Next
|
||||
</v-btn>
|
||||
</n-button>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</div>
|
||||
|
||||
<!-- Stage 2: Select Factor -->
|
||||
<v-window-item :value="1">
|
||||
<v-radio-group v-model="selectedFactorId">
|
||||
<v-list>
|
||||
<v-list-item v-for="factor in factors" :key="factor.id">
|
||||
<v-list-item-action>
|
||||
<v-radio
|
||||
:value="factor.id"
|
||||
:label="getFactorName(factor.type)"
|
||||
/>
|
||||
</v-list-item-action>
|
||||
<template #append>
|
||||
<v-icon>{{
|
||||
factor.type === 0
|
||||
? "mdi-lock"
|
||||
: factor.type === 1
|
||||
? "mdi-email"
|
||||
: factor.type === 2
|
||||
? "mdi-cellphone"
|
||||
: factor.type === 3
|
||||
? "mdi-clock"
|
||||
: factor.type === 4
|
||||
? "mdi-numeric"
|
||||
: "mdi-shield-key"
|
||||
}}</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-radio-group>
|
||||
<div class="d-flex justify-end mt-6">
|
||||
<v-btn
|
||||
color="primary"
|
||||
<div v-else-if="stage === 'select-factor'" key="select-factor">
|
||||
<n-radio-group
|
||||
v-model:value="selectedFactorId"
|
||||
class="w-full"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div
|
||||
v-for="factor in factors"
|
||||
:key="factor.id"
|
||||
class="flex items-center justify-between p-3 border rounded cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
@click="selectedFactorId = factor.id"
|
||||
>
|
||||
<n-radio
|
||||
:value="factor.id"
|
||||
:label="getFactorName(factor.type)"
|
||||
/>
|
||||
<n-icon size="24">
|
||||
<span :class="getFactorIcon(factor.type)" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</n-radio-group>
|
||||
<div class="flex justify-end mt-6">
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:disabled="!selectedFactorId"
|
||||
@click="handleFactorSelected"
|
||||
>
|
||||
Next
|
||||
</v-btn>
|
||||
</n-button>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</div>
|
||||
|
||||
<!-- Stage 3: Enter Code -->
|
||||
<v-window-item :value="2">
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
<div v-else-if="stage === 'enter-code'" key="enter-code">
|
||||
<n-input
|
||||
v-model:value="password"
|
||||
:type="selectedFactor?.type === 0 ? 'password' : 'text'"
|
||||
:label="selectedFactor?.type === 0 ? 'Password' : 'Code'"
|
||||
variant="outlined"
|
||||
class="mb-2"
|
||||
@keydown.enter="handleVerifyFactor"
|
||||
:placeholder="
|
||||
selectedFactor?.type === 0 ? 'Password' : 'Code'
|
||||
"
|
||||
show-password-on="click"
|
||||
class="mb-2 text-left"
|
||||
@keydown.enter.prevent="handleVerifyFactor"
|
||||
/>
|
||||
<div class="d-flex justify-space-between align-center mt-6">
|
||||
<v-btn
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<n-button
|
||||
v-if="selectedFactor?.type === 1"
|
||||
variant="text"
|
||||
class="text-capitalize pl-0"
|
||||
color="primary"
|
||||
text
|
||||
type="primary"
|
||||
@click="requestVerificationCode"
|
||||
>
|
||||
Resend Code
|
||||
</v-btn>
|
||||
<v-spacer v-else />
|
||||
<v-btn
|
||||
color="primary"
|
||||
</n-button>
|
||||
<div v-else />
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="handleVerifyFactor"
|
||||
>
|
||||
Verify
|
||||
</v-btn>
|
||||
</n-button>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</div>
|
||||
|
||||
<!-- Stage 4: Token Exchange -->
|
||||
<v-window-item :value="3">
|
||||
<div class="d-flex justify-center">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
size="64"
|
||||
color="primary"
|
||||
/>
|
||||
<div
|
||||
v-else-if="stage === 'token-exchange'"
|
||||
key="token-exchange"
|
||||
>
|
||||
<div class="flex justify-center">
|
||||
<n-spin size="large" />
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
|
||||
<v-alert
|
||||
v-if="error"
|
||||
type="error"
|
||||
closable
|
||||
class="mt-2"
|
||||
@update:model-value="error = null"
|
||||
>
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
<footer-compact />
|
||||
</v-container>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,10 +13,17 @@
|
||||
:item="activity.data"
|
||||
@click="router.push('/posts/' + activity.id)"
|
||||
/>
|
||||
<n-card v-else>
|
||||
<n-alert type="info" title="Unknown Activity">
|
||||
Sorry, the FloatingIsland do not support
|
||||
{{ activity.type }} right now. You can check this over the
|
||||
Solian.
|
||||
</n-alert>
|
||||
</n-card>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="flex justify-center py-4">
|
||||
<n-spin size="large" />
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -80,6 +87,7 @@ useHead({
|
||||
})
|
||||
|
||||
defineOgImage({
|
||||
// @ts-ignore
|
||||
title: "Explore",
|
||||
description: "The open social network. Friendly to everyone."
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user