Goatworks/Capital
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️ Moved sign in from Passport to here

Browse Source
This commit is contained in:
LittleSheep
2024-08-12 15:55:15 +08:00
parent b86d446607
commit 48da7d1a46
19 changed files with 968 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
pages/auth/sign-in.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<v-container class="h-[calc(100vh-80px)] flex flex-col gap-3 items-center justify-center">
<auth-callback-hint />
<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-login-variant" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Sign in</h1>
<p v-if="ticket">We need to verify that the person trying to access your account is you.</p>
<p v-else>Sign in via your Solar ID to access the entire Solar Network.</p>
</div>
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item v-for="(k, idx) in Object.keys(panels)" :key="idx" :value="k">
<component :is="panels[k]" @swap="(val: string) => (panel = val)" v-model:loading="loading"
v-model:currentFactor="currentFactor" v-model:ticket="ticket" />
</v-window-item>
</v-window>
</v-card-text>
</v-card>
<copyright service="passport" />
</v-container>
</template>
<script setup lang="ts">
import { type Component, onMounted, ref } from "vue"
import { useRoute } from "vue-router"
import FactorPicker from "~/components/auth/FactorPicker.vue"
import FactorApplicator from "~/components/auth/FactorApplicator.vue"
import AccountAuthenticate from "~/components/auth/Authenticate.vue"
import AuthenticateCompleted from "~/components/auth/AuthenticateCompleted.vue"
const route = useRoute()
const loading = ref(false)
const currentFactor = ref<any>(null)
const ticket = ref<any>(null)
async function pickUpTicket() {
if (route.query["ticketId"]) {
loading.value = true
const res = await fetch(`/api/auth/tickets/${route.query["ticketId"]}`)
if (res.status == 200) {
ticket.value = await res.json()
if (ticket.value["available_at"] != null) panel.value = "completed"
else panel.value = "mfa"
}
loading.value = false
}
}
onMounted(() => pickUpTicket())
const panel = ref("authenticate")
const panels: { [id: string]: Component } = {
authenticate: AccountAuthenticate,
mfa: FactorPicker,
applicator: FactorApplicator,
completed: AuthenticateCompleted,
}
</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>

161
pages/auth/sign-up.vue Executable file
View File

@ -0,0 +1,161 @@
<template>
<v-container class="h-[calc(100vh-80px)] flex flex-col gap-3 items-center justify-center">
<auth-callback-hint />
<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-login-variant" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Create an account</h1>
<p>Create an account on Solar Network. Then enjoy all our services.</p>
</div>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<v-row dense class="mb-3">
<v-col :cols="6">
<v-text-field
hide-details
label="Name"
autocomplete="username"
variant="solo"
density="comfortable"
v-model="data.name"
/>
</v-col>
<v-col :cols="6">
<v-text-field
hide-details
label="Nick"
autocomplete="nickname"
variant="solo"
density="comfortable"
v-model="data.nick"
/>
</v-col>
<v-col :cols="12">
<v-text-field
hide-details
label="Email Address"
type="email"
variant="solo"
density="comfortable"
v-model="data.email"
/>
</v-col>
<v-col :cols="12">
<v-text-field
hide-details
label="Password"
type="password"
autocomplete="new-password"
variant="solo"
density="comfortable"
v-model="data.password"
/>
</v-col>
</v-row>
<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-in">
Sign in
</v-btn>
<v-btn type="submit" variant="text" color="primary" append-icon="mdi-arrow-right" :disabled="loading">
Next
</v-btn>
</div>
</v-form>
</div>
</v-card-text>
</v-card>
<v-dialog v-model="done" class="max-w-[560px]">
<v-card title="Congratulations">
<template #text>
You successfully created an account on Solar Network. Now sign in to your account and start exploring!
</template>
<template #actions>
<div class="flex flex-grow-1 justify-end">
<v-btn @click="callback">Let's go</v-btn>
</div>
</template>
</v-card>
</v-dialog>
<copyright service="passport" />
</v-container>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
const error = ref<string | null>(null)
const config = useRuntimeConfig()
const route = useRoute()
const router = useRouter()
const done = ref(false)
const loading = ref(false)
const data = ref({
name: "",
nick: "",
email: "",
password: "",
})
async function submit() {
const payload = data.value
if (!payload.name || !payload.nick || !payload.email || !payload.password) return
loading.value = true
const res = await fetch(`${config.public.solarNetworkApi}/cgi/auth/users`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
})
if (res.status !== 200) {
error.value = await res.text()
} else {
done.value = true
error.value = null
}
loading.value = false
}
function callback() {
if (route.params["closable"]) {
window.close()
} else {
router.push({ name: "auth.sign-in" })
}
}
</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>

8
pages/index.vue
View File

@ -1,7 +1,7 @@
<template>
<v-container class="flex flex-col gap-[4rem] my-[2rem]">
<v-row class="content-section">
<v-col cols="12" md="4" class="d-flex align-center">
<v-col cols="12" md="4" class="flex justify-start">
<div>
<h1 class="text-4xl font-bold">Solsynth</h1>
<p class="text-lg mt-3">
@ -21,11 +21,11 @@
</v-row>
<v-row class="content-section">
<v-col cols="12" md="8">
<v-card>
<v-card class="max-h-[500px]">
<activity-carousel class="carousel-section" />
</v-card>
</v-col>
<v-col cols="12" md="4" class="d-flex align-center" order="first" order-md="last">
<v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">
<div class="text-right">
<h1 class="text-4xl font-bold">Activities</h1>
<p class="text-lg mt-3">
@ -34,7 +34,7 @@
</p>
<p class="text-grey mt-2">
<v-icon icon="mdi-arrow-left" size="16" class="mb-0.5" />
See some posts of our realm just here
See some posts in our realm just here
</p>
</div>
</v-col>

52
pages/users/me.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<v-container class="content-container mx-auto">
<v-img v-if="urlOfBanner" :src="urlOfBanner" :aspect-ratio="16 / 5" class="rounded-md mb-3" cover />
<div class="mx-[2.5ch]">
<div class="my-5 flex flex-row gap-4">
<v-avatar :image="urlOfAvatar" />
<div class="flex flex-col">
<span>{{ auth.userinfo.data?.nick }} <span class="text-xs">@{{ auth.userinfo.data?.name }}</span></span>
<span class="text-sm">{{ auth.userinfo.data?.description }}</span>
</div>
</div>
<div class="mb-5">
<div class="mx-[2.5ch]">
<h2 class="text-xl">Personalize</h2>
<span class="text-sm">Bring your own color to the Solar Network.</span>
</div>
<v-alert
class="mt-3"
type="info"
variant="tonal"
density="comfortable"
text="This part of the functionality has been transferred to our application Solian, please download it or open it in your browser. To learn more, please visit the project description page."
/>
</div>
<div class="mb-5">
<div class="mx-[2.5ch]">
<h2 class="text-xl">Security</h2>
<span class="text-sm">Guard your Solar Network account.</span>
</div>
<account-auth-ticket-table class="mt-3" />
</div>
<div class="mb-5 mx-[2.5ch]">
<copyright service="passport" :centered="false" />
</div>
</div>
</v-container>
</template>
<script setup lang="ts">
const config = useRuntimeConfig()
const auth = useUserinfo()
const urlOfAvatar = computed(() => auth.userinfo.data?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.data.avatar}` : void 0)
const urlOfBanner = computed(() => auth.userinfo.data?.banner ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.data.banner}` : void 0)
</script>