♻️ Moved sign in from Passport to here
This commit is contained in:
83
pages/auth/sign-in.vue
Normal file
83
pages/auth/sign-in.vue
Normal 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
161
pages/auth/sign-up.vue
Executable 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>
|
||||
Reference in New Issue
Block a user