Skip to content

Commit af8ed4d

Browse files
fu050409fu050409
authored
refactor: login page to login.vue (#13)
1 parent 3ab64e9 commit af8ed4d

File tree

3 files changed

+105
-80
lines changed

3 files changed

+105
-80
lines changed

‎.changes/refactor-login.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"algohub": patch:feat
3+
---
4+
5+
Refactor login page to `login.vue`.

‎src/views/index.vue

+7-80
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,18 @@
11
<script setup lang="ts">
2-
import { reactive } from "vue";
3-
// import { invoke } from "@tauri-apps/api/core";
2+
import { onMounted } from "vue";
43
import { useToast } from 'primevue/usetoast';
4+
import { useRouter } from 'vue-router';
55
66
const toast = useToast();
7+
const router = useRouter();
78
8-
const initialValues = reactive({
9-
identity: '',
10-
password: '',
11-
terms: false,
12-
});
13-
14-
interface LoginForm {
15-
identity: string;
16-
password: string;
17-
terms: boolean;
18-
}
19-
20-
interface LoginErrors {
21-
identity?: { message: string }[];
22-
password?: { message: string }[];
23-
terms?: { message: string }[];
24-
}
25-
26-
const resolver = ({ values }: { values: LoginForm }) => {
27-
const errors: LoginErrors = {};
28-
29-
if (!values.identity) {
30-
errors.identity = [{ message: 'Please enter your username or email.' }];
31-
}
32-
33-
if (!values.password) {
34-
errors.password = [{ message: 'Missing password.' }];
35-
}
36-
37-
if (!values.terms) {
38-
errors.terms = [{ message: 'You must agree to the terms and conditions.' }];
39-
}
40-
41-
return { errors };
42-
};
43-
44-
const onLogin = async ({ valid }: { valid: boolean }) => {
45-
if (valid) {
46-
toast.add({ severity: 'info', summary: 'Login unsupported', detail: 'Please wait while nightly versions are being updated.' });
47-
}
48-
}
9+
onMounted(() => {
10+
router.push("/login");
11+
})
4912
</script>
5013

5114
<template>
5215
<main class="w-full h-screen">
53-
<div class="flex flex-col md:flex-row h-full w-full">
54-
<div class="flex items-center justify-center h-full w-full">
55-
<h1 class="text-4xl font-bold">ACM Algorithm Hub</h1>
56-
</div>
57-
<Card class="m-10 px-6 py-12 w-full">
58-
<template #title>Welcome to ACM Algorithm Hub</template>
59-
<template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
60-
<template #content class="h-full">
61-
<Form v-slot="$form" :initialValues :resolver @submit="onLogin"
62-
class="flex flex-col p-6 gap-4 h-full items-center justify-center">
63-
<div class="flex flex-col gap-1 w-full">
64-
<InputText name="identity" type="text" placeholder="Username or Email" fluid />
65-
<Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
66-
$form.identity.error.message }}</Message>
67-
</div>
68-
<div class="flex flex-col gap-1 w-full">
69-
<Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
70-
<Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
71-
$form.password.error.message }}</Message>
72-
</div>
73-
<div class="flex flex-col gap-1 w-full">
74-
<div class="flex items-center gap-2">
75-
<Checkbox inputId="terms" name="terms" binary />
76-
<label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
77-
General Public License v3</a>.</label>
78-
</div>
79-
<Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
80-
$form.terms.error.message }}</Message>
81-
</div>
82-
<p>Do not have an account? <a href="#" class="underline">Sign up</a></p>
83-
<Button type="submit" label="Login" class="w-full" secondary></Button>
84-
</Form>
85-
</template>
86-
<template #footer>
87-
</template>
88-
</Card>
89-
</div>
16+
9017
</main>
9118
</template>

‎src/views/login.vue

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script setup lang="ts">
2+
import { reactive } from "vue";
3+
// import { invoke } from "@tauri-apps/api/core";
4+
import { useToast } from 'primevue/usetoast';
5+
import { useRouter } from "vue-router";
6+
7+
const toast = useToast();
8+
const router = useRouter();
9+
10+
const initialValues = reactive({
11+
identity: '',
12+
password: '',
13+
terms: false,
14+
});
15+
16+
interface LoginForm {
17+
identity: string;
18+
password: string;
19+
terms: boolean;
20+
}
21+
22+
interface LoginErrors {
23+
identity?: { message: string }[];
24+
password?: { message: string }[];
25+
terms?: { message: string }[];
26+
}
27+
28+
const resolver = ({ values }: { values: LoginForm }) => {
29+
const errors: LoginErrors = {};
30+
31+
if (!values.identity) {
32+
errors.identity = [{ message: 'Please enter your username or email.' }];
33+
}
34+
35+
if (!values.password) {
36+
errors.password = [{ message: 'Missing password.' }];
37+
}
38+
39+
if (!values.terms) {
40+
errors.terms = [{ message: 'You must agree to the terms and conditions.' }];
41+
}
42+
43+
return { errors };
44+
};
45+
46+
const onLogin = async ({ valid }: { valid: boolean }) => {
47+
if (valid) {
48+
toast.add({ severity: 'info', summary: 'Login unsupported', detail: 'Please wait while nightly versions are being updated.' });
49+
}
50+
}
51+
</script>
52+
53+
<template>
54+
<main class="w-full h-screen">
55+
<div class="flex flex-col md:flex-row h-full w-full">
56+
<div class="flex items-center justify-center h-full w-full">
57+
<h1 class="text-4xl font-bold">ACM Algorithm Hub</h1>
58+
</div>
59+
<Card class="m-10 px-6 py-12 w-full">
60+
<template #title>Welcome to ACM Algorithm Hub</template>
61+
<template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
62+
<template #content class="h-full">
63+
<Form v-slot="$form" :initialValues :resolver @submit="onLogin"
64+
class="flex flex-col p-6 gap-4 h-full items-center justify-center">
65+
<div class="flex flex-col gap-1 w-full">
66+
<InputText name="identity" type="text" placeholder="Username or Email" fluid />
67+
<Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
68+
$form.identity.error.message }}</Message>
69+
</div>
70+
<div class="flex flex-col gap-1 w-full">
71+
<Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
72+
<Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
73+
$form.password.error.message }}</Message>
74+
</div>
75+
<div class="flex flex-col gap-1 w-full">
76+
<div class="flex items-center gap-2">
77+
<Checkbox inputId="terms" name="terms" binary />
78+
<label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
79+
General Public License v3</a>.</label>
80+
</div>
81+
<Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
82+
$form.terms.error.message }}</Message>
83+
</div>
84+
<p>Do not have an account? <a @click="router.push('/signup')" class="underline">Sign up</a></p>
85+
<Button type="submit" label="Login" class="w-full" secondary></Button>
86+
</Form>
87+
</template>
88+
<template #footer>
89+
</template>
90+
</Card>
91+
</div>
92+
</main>
93+
</template>

0 commit comments

Comments
 (0)