Hydrogen/SolarAgent
Hydrogen/SolarAgent
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

✨ User sign in

Browse Source
This commit is contained in:
LittleSheep 2024-03-28 20:44:13 +08:00
parent 3a1cf006f4
commit 96526da432
33 changed files with 750 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -28,3 +28,4 @@ coverage
*.sw?
*.tsbuildinfo
*.lockb

2
android/app/capacitor.build.gradle
View File

@ -9,7 +9,7 @@ android {
apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
dependencies {
implementation project(':capacitor-preferences')
}

3
android/capacitor.settings.gradle
View File

@ -1,3 +1,6 @@
// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
include ':capacitor-android'
project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
include ':capacitor-preferences'
project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')

BIN
bun.lockb
View File

Binary file not shown.

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/xml+svg" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Solarplaza</title>
<title>Solian</title>
</head>
<body>
<div id="app"></div>

2
ios/App/App/Info.plist
View File

@ -5,7 +5,7 @@
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>@hydrogen/solaragent</string>
<string>Solian</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>

2
ios/App/Podfile
View File

@ -11,7 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
end
target 'App' do

8
ios/App/Podfile.lock
View File

@ -2,21 +2,27 @@ PODS:
- Capacitor (5.7.4):
- CapacitorCordova
- CapacitorCordova (5.7.4)
- CapacitorPreferences (5.0.7):
- Capacitor
DEPENDENCIES:
- "Capacitor (from `../../node_modules/@capacitor/ios`)"
- "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
- "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)"
EXTERNAL SOURCES:
Capacitor:
:path: "../../node_modules/@capacitor/ios"
CapacitorCordova:
:path: "../../node_modules/@capacitor/ios"
CapacitorPreferences:
:path: "../../node_modules/@capacitor/preferences"
SPEC CHECKSUMS:
Capacitor: 4fe9adf012caceb4c71ffea2f1f4d005cdcbeea7
CapacitorCordova: a6e87fccc0307dee7aec1560ec9398485f2b0ce7
CapacitorPreferences: 77ac427e98db83bace772455f8ba447430382c4c
PODFILE CHECKSUM: 8ab55909c5de2b217f9841e5e5b329f5ec901553
PODFILE CHECKSUM: 769e120bf4dfe4ef1095b83775e36bafeeeb3cdd
COCOAPODS: 1.15.1

1
package.json
View File

@ -16,6 +16,7 @@
"@capacitor/android": "^5.7.4",
"@capacitor/core": "^5.7.4",
"@capacitor/ios": "^5.7.4",
"@capacitor/preferences": "^5.0.7",
"@fontsource/roboto": "^5.0.12",
"@mdi/font": "^7.4.47",
"dompurify": "^3.0.11",

6
src/components/Copyright.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<div class="text-xs text-center opacity-80">
<p>Copyright © {{ new Date().getFullYear() }} Solsynth</p>
<p>Powered by <a class="underline" href="#">Hydrogen.Identity</a></p>
</div>
</template>

90
src/components/NotificationList.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<v-menu eager :close-on-content-click="false">
<template #activator="{ props }">
<v-btn v-bind="props" stacked rounded="circle" size="small" variant="text" :loading="loading">
<v-badge v-if="pagination.total > 0" color="error" :content="pagination.total">
<v-icon icon="mdi-bell" />
</v-badge>
<v-icon v-else icon="mdi-bell" />
</v-btn>
</template>
<v-list v-if="notifications.length <= 0" class="w-[380px]" density="compact">
<v-list-item>
<v-alert class="text-sm" variant="tonal" type="info"
>You are done! There is no unread notifications for you.</v-alert
>
</v-list-item>
</v-list>
<v-list v-else class="w-[380px]" density="compact" lines="three">
<v-list-item v-for="item in notifications">
<template #title>{{ item.subject }}</template>
<template #subtitle>{{ item.content }}</template>
<template #append>
<v-btn icon="mdi-check" size="x-small" variant="text" :disabled="loading" @click="markAsRead(item)" />
</template>
<div class="flex text-xs gap-1">
<a v-for="link in item.links" class="mt-1 underline" target="_blank" :href="link.url">{{ link.label }}</a>
</div>
</v-list-item>
</v-list>
</v-menu>
<!-- @vue-ignore -->
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
</template>
<script setup lang="ts">
import { request } from "@/scripts/request"
import { getAtk } from "@/stores/userinfo"
import { reactive, ref } from "vue"
const loading = ref(false)
const error = ref<string | null>(null)
const notifications = ref<any[]>([])
const pagination = reactive({ page: 1, pageSize: 25, total: 0 })
async function readNotifications() {
loading.value = true
const res = await request(
"identity",
"/api/notifications?" +
new URLSearchParams({
take: pagination.pageSize.toString(),
offset: ((pagination.page - 1) * pagination.pageSize).toString()
}),
{
headers: { Authorization: `Bearer ${await getAtk()}` }
}
)
if (res.status === 200) {
const data = await res.json()
notifications.value = data["data"]
pagination.total = data["count"]
}
loading.value = false
}
readNotifications()
async function markAsRead(item: any) {
loading.value = true
const res = await request("identity", `/api/notifications/${item.id}/read`, {
method: "PUT",
headers: { Authorization: `Bearer ${await getAtk()}` }
})
if (res.status !== 200) {
error.value = await res.text()
} else {
await readNotifications()
error.value = null
}
loading.value = false
}
</script>

43
src/components/UserMenu.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<v-menu>
<template #activator="{ props }">
<v-btn flat exact v-bind="props" icon>
<v-avatar color="transparent" icon="mdi-account-circle" :image="'/api/avatar/' + id.userinfo.data?.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="{ name: 'auth.sign-in' }" />
<v-list-item title="Create account" prepend-icon="mdi-account-plus" :to="{ name: '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="User Center" prepend-icon="mdi-account-supervisor" exact :to="{ name: 'dashboard' }" />
</v-list>
</v-menu>
</template>
<script setup lang="ts">
import { useUserinfo } from "@/stores/userinfo"
import { computed } from "vue"
const id = useUserinfo()
const username = computed(() => {
if (id.userinfo.isLoggedIn) {
return "@" + id.userinfo.data?.name
} else {
return "@vistor"
}
})
const nickname = computed(() => {
if (id.userinfo.isLoggedIn) {
return id.userinfo.data?.nick
} else {
return "Anonymous"
}
})
</script>

70
src/components/auth/AccountLocator.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<v-text-field
label="Account ID"
variant="solo"
density="comfortable"
spellcheck="false"
autocomplete="off"
autocapitalize="off"
:disabled="props.loading"
v-model="probe"
/>
<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="{ name: '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"
import { request } from "@/scripts/request"
const probe = ref("")
const error = ref<string | null>(null)
const props = defineProps<{ loading?: boolean }>()
const emits = defineEmits(["swap", "update:loading", "update:factors", "update:challenge"])
async function submit() {
if (!probe.value) return
emits("update:loading", true)
const res = await request("identity", "/api/auth", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id: probe.value })
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
emits("update:factors", data["factors"])
emits("update:challenge", data["challenge"])
emits("swap", "pick")
error.value = null
}
emits("update:loading", false)
}
</script>

16
src/components/auth/CallbackNotify.vue Normal file
View File

@ -0,0 +1,16 @@
<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">
import { useRoute } from "vue-router"
const route = useRoute()
</script>

139
src/components/auth/FactorApplicator.vue Normal file
View File

@ -0,0 +1,139 @@
<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 { request } from "@/scripts/request"
import { useUserinfo } from "@/stores/userinfo"
import { Preferences } from "@capacitor/preferences"
import { computed, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
const password = ref("")
const error = ref<string | null>(null)
const props = defineProps<{ loading?: boolean; currentFactor?: any; challenge?: any }>()
const emits = defineEmits(["swap", "update:challenge"])
const route = useRoute()
const router = useRouter()
const { readProfiles } = useUserinfo()
async function submit() {
const res = await request("identity", `/api/auth`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
challenge_id: props.challenge?.id,
factor_id: props.currentFactor?.id,
secret: password.value
})
})
if (res.status !== 200) {
error.value = await res.text()
} else {
const data = await res.json()
if (data["is_finished"]) {
await getToken(data["session"]["grant_token"])
await readProfiles()
callback()
} else {
emits("swap", "pick")
emits("update:challenge", data["challenge"])
error.value = null
password.value = ""
}
}
}
async function getToken(tk: string) {
const res = await request("identity", "/api/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 data = await res.json()
await Preferences.set({
key: "identity.access_token",
value: data["access_token"]
})
await Preferences.set({
key: "identity.refresh_token",
value: data["refresh_token"]
})
error.value = null
}
}
function callback() {
if (route.query["closable"]) {
window.close()
} else if (route.query["redirect_uri"]) {
window.open((route.query["redirect_uri"] as string) ?? "/", "_self")
} else {
router.push({ name: "explore" })
}
}
const inputType = computed(() => {
switch (props.currentFactor?.type) {
case 1:
return "one-time-password"
default:
return "text"
}
})
</script>

75
src/components/auth/FactorPicker.vue Normal file
View File

@ -0,0 +1,75 @@
<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 in props.factors ?? []"
: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 { ref } from "vue"
import { request } from "@/scripts/request"
const focus = ref<number | null>(null)
const error = ref<string | null>(null)
const props = defineProps<{ factors?: any[]; challenge?: any }>()
const emits = defineEmits(["swap", "update:loading", "update:currentFactor"])
async function submit() {
if (!focus.value) return
emits("update:loading", true)
const res = await request("identity", `/api/auth/factors/${focus.value}`, {
method: "POST"
})
if (res.status !== 200 && res.status !== 204) {
error.value = await res.text()
} else {
const item = props.factors?.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 0:
return { icon: "mdi-form-textbox-password", label: "Password Validation" }
case 1:
return { icon: "mdi-email-fast", label: "Email One Time Password" }
}
}
function getFactorAvailable(factor: any) {
const blacklist: number[] = props.challenge?.blacklist_factors ?? []
return blacklist.includes(factor.id)
}
</script>

2
src/components/posts/PostReaction.vue
View File

@ -68,7 +68,7 @@ const error = ref<string | null>(null)
async function reactPost(symbol: string, attitude: number) {
const res = await request("interactive", `/api/p/${props.model}/${props.item?.id}/react`, {
method: "POST",
headers: { Authorization: `Bearer ${getAtk()}`, "Content-Type": "application/json" },
headers: { Authorization: `Bearer ${await getAtk()}`, "Content-Type": "application/json" },
body: JSON.stringify({ symbol, attitude })
})
if (res.status === 201) {

2
src/components/publish/ArticleEditor.vue
View File

@ -184,7 +184,7 @@ async function postArticle(evt: SubmitEvent) {
loading.value = true
const res = await request("interactive", url, {
method: method,
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
body: JSON.stringify(payload)
})
if (res.status === 200) {

2
src/components/publish/CommentEditor.vue
View File

@ -65,7 +65,7 @@ async function postComment(evt: SubmitEvent) {
loading.value = true
const res = await request("interactive", url, {
method: method,
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
body: JSON.stringify(payload)
})
if (res.status === 200) {

2
src/components/publish/MomentEditor.vue
View File

@ -131,7 +131,7 @@ async function postMoment(evt: SubmitEvent) {
loading.value = true
const res = await request("interactive", url, {
method: method,
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
body: JSON.stringify(payload)
})
if (res.status === 200) {

2
src/components/publish/PostDeletion.vue
View File

@ -38,7 +38,7 @@ async function deletePost() {
loading.value = true
const res = await request("interactive", url, {
method: "DELETE",
headers: { Authorization: `Bearer ${getAtk()}` }
headers: { Authorization: `Bearer ${await getAtk()}` }
})
if (res.status !== 200) {
error.value = await res.text()

4
src/components/publish/parts/Media.vue
View File

@ -65,7 +65,7 @@ async function upload(file?: any) {
emits("update:uploading", true)
const res = await request("interactive", "/api/attachments", {
method: "POST",
headers: { Authorization: `Bearer ${getAtk()}` },
headers: { Authorization: `Bearer ${await getAtk()}` },
body: data
})
let meta: any
@ -87,7 +87,7 @@ async function dispose(idx: number) {
const res = await request("interactive", `/api/attachments/${item.id}`, {
method: "DELETE",
headers: { Authorization: `Bearer ${getAtk()}` }
headers: { Authorization: `Bearer ${await getAtk()}` }
})
if (res.status !== 200) {
error.value = await res.text()

2
src/components/realms/RealmDeletion.vue
View File

@ -43,7 +43,7 @@ async function deletePost() {
loading.value = true
const res = await request("interactive", url, {
method: "DELETE",
headers: { Authorization: `Bearer ${getAtk()}` }
headers: { Authorization: `Bearer ${await getAtk()}` }
})
if (res.status !== 200) {
error.value = await res.text()

2
src/components/realms/RealmEditor.vue
View File

@ -63,7 +63,7 @@ async function submit(evt: SubmitEvent) {
loading.value = true
const res = await request("interactive", url, {
method: method,
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
body: JSON.stringify(payload)
})
if (res.status !== 200) {

2
src/components/realms/RealmInvitation.vue
View File

@ -38,7 +38,7 @@ async function inviteMember(evt: SubmitEvent) {
loading.value = true
const res = await request("interactive", `/api/realms/${props.item?.id}/invite`, {
method: "POST",
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
body: JSON.stringify({
account_name: targetName.value
})

2
src/components/realms/RealmMembers.vue
View File

@ -97,7 +97,7 @@ async function kickMember(item: any) {
loading.value = true
const res = await request("interactive", `/api/realms/${props.item?.id}/kick`, {
method: "POST",
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
body: JSON.stringify({
account_name: item.account.name
})

12
src/index.vue
View File

@ -7,10 +7,14 @@
</template>
<script setup lang="ts">
import { computed } from "vue"
import { onMounted, ref } from "vue"
const safeAreaHeight = computed(() => {
const safeAreaHeight = ref(0)
function updateSafeArea() {
const property = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
return parseInt(property.replace("px", ""))
})
safeAreaHeight.value = parseInt(property.replace("px", ""))
}
onMounted(() => updateSafeArea())
</script>

5
src/layouts/master.vue
View File

@ -40,7 +40,7 @@
</v-list>
</v-menu>
<v-btn v-else icon="mdi-login-variant" size="small" variant="text" :href="signinUrl" />
<v-btn v-else icon="mdi-login-variant" size="small" variant="text" :to="{ name: 'auth.sign-in' }" />
</template>
</v-list-item>
</v-list>
@ -139,9 +139,6 @@ id.readProfiles()
const meta = useWellKnown()
const signinUrl = computed(() => {
return meta.wellKnown?.components?.identity + `/auth/sign-in?redirect_uri=${encodeURIComponent(location.href)}`
})
const passportUrl = computed(() => {
return meta.wellKnown?.components?.identity
})

18
src/router/index.ts
View File

@ -29,6 +29,24 @@ const router = createRouter({
path: "/realms/:realmId",
name: "realms.page",
component: () => import("@/views/realms/page.vue")
},
{
path: "/auth",
children: [
{
path: "sign-in",
name: "auth.sign-in",
component: () => import("@/views/auth/sign-in.vue"),
meta: { public: true, title: "Sign in" }
},
{
path: "sign-up",
name: "auth.sign-up",
component: () => import("@/views/auth/sign-up.vue"),
meta: { public: true, title: "Sign up" }
}
]
}
]
}

4
src/stores/realms.ts
View File

@ -19,10 +19,10 @@ export const useRealms = defineStore("realms", () => {
const available = ref<any[]>([])
async function list() {
if (!checkLoggedIn()) return
if (!(await checkLoggedIn())) return
const res = await request("interactive", "/api/realms/me/available", {
headers: { Authorization: `Bearer ${getAtk()}` }
headers: { Authorization: `Bearer ${await getAtk()}` }
})
if (res.status !== 200) {
throw new Error(await res.text())

16
src/stores/userinfo.ts
View File

@ -1,7 +1,7 @@
import Cookie from "universal-cookie"
import { defineStore } from "pinia"
import { ref } from "vue"
import { request } from "@/scripts/request"
import { Preferences } from "@capacitor/preferences"
export interface Userinfo {
isReady: boolean
@ -17,12 +17,12 @@ const defaultUserinfo: Userinfo = {
data: null
}
export function getAtk(): string {
return new Cookie().get("identity_auth_key")
export async function getAtk() {
return (await Preferences.get({ key: "identity.access_token" })).value
}
export function checkLoggedIn(): boolean {
return new Cookie().get("identity_auth_key")
export async function checkLoggedIn(): boolean {
return (await Preferences.get({ key: "identity.access_token" })).value != null
}
export const useUserinfo = defineStore("userinfo", () => {
@ -30,12 +30,12 @@ export const useUserinfo = defineStore("userinfo", () => {
const isReady = ref(false)
async function readProfiles() {
if (!checkLoggedIn()) {
if (!(await checkLoggedIn())) {
isReady.value = true
}
const res = await request("interactive", "/api/users/me", {
headers: { Authorization: `Bearer ${getAtk()}` }
const res = await request("identity", "/api/users/me", {
headers: { Authorization: `Bearer ${await getAtk()}` }
})
if (res.status !== 200) {

85
src/views/auth/sign-in.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<v-container class="h-full flex flex-col gap-3 items-center justify-center">
<callback-notify />
<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>
<div v-if="challenge" class="flex items-center gap-4">
<v-tooltip>
<template v-slot:activator="{ props }">
<v-progress-circular
v-bind="props"
size="large"
:model-value="(challenge?.progress / challenge?.requirements) * 100"
/>
</template>
<p><b>Risk: </b> {{ challenge?.risk_level }}</p>
<p><b>Progress: </b> {{ challenge?.progress }}/{{ challenge?.requirements }}</p>
</v-tooltip>
<p>We need to verify that the person trying to access your account is you.</p>
</div>
<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 in Object.keys(panels)" :value="k">
<component
:is="panels[k]"
@swap="(val: string) => (panel = val)"
v-model:loading="loading"
v-model:factors="factors"
v-model:currentFactor="currentFactor"
v-model:challenge="challenge"
/>
</v-window-item>
</v-window>
</v-card-text>
</v-card>
<copyright />
</v-container>
</template>
<script setup lang="ts">
import { ref, type Component } from "vue"
import Copyright from "@/components/Copyright.vue"
import CallbackNotify from "@/components/auth/CallbackNotify.vue"
import AccountLocator from "@/components/auth/AccountLocator.vue"
import FactorPicker from "@/components/auth/FactorPicker.vue"
import FactorApplicator from "@/components/auth/FactorApplicator.vue"
const loading = ref(false)
const factors = ref<any>(null)
const currentFactor = ref<any>(null)
const challenge = ref<any>(null)
const panel = ref("locate")
const panels: { [id: string]: Component } = {
locate: AccountLocator,
pick: FactorPicker,
applicator: FactorApplicator
}
</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>

162
src/views/auth/sign-up.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<v-container class="h-full flex flex-col gap-3 items-center justify-center">
<callback-notify />
<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="{ name: '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 />
</v-container>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { request } from "@/scripts/request"
import { useRoute, useRouter } from "vue-router"
import Copyright from "@/components/Copyright.vue"
import CallbackNotify from "@/components/auth/CallbackNotify.vue"
const error = ref<string | null>(null)
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 request("identity", "/api/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>