Skip to content

Commit a38653a

Browse files
fu050409fu050409
authored
feat(signup): implement signup page (#18)
1 parent 2ac269d commit a38653a

File tree

6 files changed

+237
-113
lines changed

6 files changed

+237
-113
lines changed

‎.changes/signup-panel.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"algohub": patch:feat
3+
---
4+
5+
Add sign up panel in `signup.vue`.

‎.cspell.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"pinia",
77
"primeicons",
88
"primevue",
9+
"signup",
910
"SWPU",
1011
"tailwindcss",
1112
"tauri",

‎src/App.vue

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ themeStore.init();
77
</script>
88

99
<template>
10-
<Toast />
11-
<RouterView />
10+
<main class="w-full h-screen">
11+
<Toast />
12+
<RouterView />
13+
</main>
1214
</template>

‎src/assets/tailwind.css

+57-68
Original file line numberDiff line numberDiff line change
@@ -554,14 +554,52 @@ video {
554554
display: none;
555555
}
556556

557-
.m-10 {
558-
margin: 2.5rem;
557+
.container {
558+
width: 100%;
559+
}
560+
561+
@media (min-width: 640px) {
562+
.container {
563+
max-width: 640px;
564+
}
565+
}
566+
567+
@media (min-width: 768px) {
568+
.container {
569+
max-width: 768px;
570+
}
571+
}
572+
573+
@media (min-width: 1024px) {
574+
.container {
575+
max-width: 1024px;
576+
}
577+
}
578+
579+
@media (min-width: 1280px) {
580+
.container {
581+
max-width: 1280px;
582+
}
583+
}
584+
585+
@media (min-width: 1536px) {
586+
.container {
587+
max-width: 1536px;
588+
}
559589
}
560590

561591
.m-auto {
562592
margin: auto;
563593
}
564594

595+
.m-10 {
596+
margin: 2.5rem;
597+
}
598+
599+
.mb-4 {
600+
margin-bottom: 1rem;
601+
}
602+
565603
.mt-6 {
566604
margin-top: 1.5rem;
567605
}
@@ -570,14 +608,14 @@ video {
570608
display: flex;
571609
}
572610

573-
.grid {
574-
display: grid;
575-
}
576-
577611
.hidden {
578612
display: none;
579613
}
580614

615+
.\!hidden {
616+
display: none !important;
617+
}
618+
581619
.h-full {
582620
height: 100%;
583621
}
@@ -586,12 +624,8 @@ video {
586624
height: 100vh;
587625
}
588626

589-
.max-h-full {
590-
max-height: 100%;
591-
}
592-
593-
.max-h-screen {
594-
max-height: 100vh;
627+
.h-80 {
628+
height: 20rem;
595629
}
596630

597631
.w-full {
@@ -602,8 +636,8 @@ video {
602636
flex: 1 1 0%;
603637
}
604638

605-
.flex-shrink {
606-
flex-shrink: 1;
639+
.basis-\[40rem\] {
640+
flex-basis: 40rem;
607641
}
608642

609643
.flex-row {
@@ -614,10 +648,6 @@ video {
614648
flex-direction: column;
615649
}
616650

617-
.flex-col-reverse {
618-
flex-direction: column-reverse;
619-
}
620-
621651
.items-start {
622652
align-items: flex-start;
623653
}
@@ -650,39 +680,24 @@ video {
650680
gap: 1rem;
651681
}
652682

653-
.overflow-hidden {
654-
overflow: hidden;
655-
}
656-
657683
.p-6 {
658684
padding: 1.5rem;
659685
}
660686

661-
.px-6 {
662-
padding-left: 1.5rem;
663-
padding-right: 1.5rem;
664-
}
665-
666-
.py-12 {
667-
padding-top: 3rem;
668-
padding-bottom: 3rem;
687+
.text-center {
688+
text-align: center;
669689
}
670690

671-
.text-4xl {
672-
font-size: 2.25rem;
673-
line-height: 2.5rem;
691+
.text-3xl {
692+
font-size: 1.875rem;
693+
line-height: 2.25rem;
674694
}
675695

676696
.text-sm {
677697
font-size: 0.875rem;
678698
line-height: 1.25rem;
679699
}
680700

681-
.text-3xl {
682-
font-size: 1.875rem;
683-
line-height: 2.25rem;
684-
}
685-
686701
.font-bold {
687702
font-weight: 700;
688703
}
@@ -700,42 +715,16 @@ video {
700715
display: flex;
701716
}
702717

703-
.md\:h-full {
704-
height: 100%;
705-
}
706-
707-
.md\:flex-1 {
708-
flex: 1 1 0%;
709-
}
710-
711-
.md\:grid-cols-2 {
712-
grid-template-columns: repeat(2, minmax(0, 1fr));
713-
}
714-
715-
.md\:flex-row {
716-
flex-direction: row;
718+
.md\:\!flex {
719+
display: flex !important;
717720
}
718721

719-
.md\:flex-col {
720-
flex-direction: column;
721-
}
722-
723-
.md\:items-center {
724-
align-items: center;
725-
}
726-
727-
.md\:justify-center {
728-
justify-content: center;
722+
.md\:\!hidden {
723+
display: none !important;
729724
}
730725

731726
.md\:text-4xl {
732727
font-size: 2.25rem;
733728
line-height: 2.5rem;
734729
}
735730
}
736-
737-
@media (min-width: 1024px) {
738-
.lg\:w-full {
739-
width: 100%;
740-
}
741-
}

‎src/views/login.vue

+44-43
Original file line numberDiff line numberDiff line change
@@ -53,50 +53,51 @@ const onLogin = async ({ valid }: { valid: boolean }) => {
5353
</script>
5454

5555
<template>
56-
<main class="w-full h-screen">
57-
<div class="flex flex-row h-full">
58-
<div class="hidden md:flex flex-col items-center justify-center h-full w-full">
59-
<div class="flex flex-1 flex-col items-center justify-center w-full h-full">
60-
<Image class="hidden md:flex" :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" alt="Image" width="250" />
61-
<h1 class="text-3xl md:text-4xl font-bold mt-6 md:m-0">ACM Algorithm Hub</h1>
62-
</div>
63-
<footer class="flex flex-row items-start w-full">
64-
<Button @click="themeStore.toggle" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`" plain text></Button>
65-
</footer>
56+
<div class="flex flex-row h-full">
57+
<div class="hidden md:flex flex-col items-center justify-center h-full w-full">
58+
<div class="flex flex-1 flex-col items-center justify-center w-full h-full">
59+
<Image class="hidden md:flex" :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" alt="Image" width="250" />
60+
<h1 class="text-3xl md:text-4xl font-bold mt-6 md:m-0">ACM Algorithm Hub</h1>
6661
</div>
67-
<div class="flex w-full">
68-
<Card class="m-auto flex w-full h-full items-center justify-center flex-col">
69-
<template v-if="false" #header class="hidden"></template>
70-
<template #title>Welcome to ACM Algorithm Hub</template>
71-
<template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
72-
<template #content>
73-
<Form v-slot="$form" :initialValues :resolver @submit="onLogin"
74-
class="flex flex-col p-6 gap-4 items-center justify-center">
75-
<div class="flex flex-col gap-1 w-full">
76-
<InputText name="identity" type="text" placeholder="Username or Email" fluid />
77-
<Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
78-
$form.identity.error.message }}</Message>
79-
</div>
80-
<div class="flex flex-col gap-1 w-full">
81-
<Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
82-
<Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
83-
$form.password.error.message }}</Message>
84-
</div>
85-
<div class="flex flex-col gap-1 w-full">
86-
<div class="flex items-center gap-2">
87-
<Checkbox inputId="terms" name="terms" binary />
88-
<label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
89-
General Public License v3</a>.</label>
90-
</div>
91-
<Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
92-
$form.terms.error.message }}</Message>
62+
<footer class="flex flex-row items-start w-full">
63+
<Button @click="themeStore.toggle" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`" plain text></Button>
64+
</footer>
65+
</div>
66+
<div class="flex w-full ">
67+
<Card class="m-auto flex basis-[40rem] w-full h-full items-center justify-center flex-col">
68+
<template #header>
69+
<Button @click="themeStore.toggle" class="md:!hidden" :icon="`pi pi-${themeStore.dark ? 'moon' : 'sun'}`"
70+
plain text></Button>
71+
</template>
72+
<template #title>Welcome to ACM Algorithm Hub</template>
73+
<template #subtitle>Association of Computing Machinery affiliated with SWPU</template>
74+
<template #content>
75+
<Form v-slot="$form" :initialValues :resolver @submit="onLogin"
76+
class="flex flex-col p-6 gap-4 items-center justify-center">
77+
<div class="flex flex-col gap-1 w-full">
78+
<InputText name="identity" type="text" placeholder="Username or Email" fluid />
79+
<Message v-if="$form.identity?.invalid" severity="error" size="small" variant="simple">{{
80+
$form.identity.error.message }}</Message>
81+
</div>
82+
<div class="flex flex-col gap-1 w-full">
83+
<Password name="password" type="text" placeholder="Password" :feedback="false" toggleMask fluid />
84+
<Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">{{
85+
$form.password.error.message }}</Message>
86+
</div>
87+
<div class="flex flex-col gap-1 w-full">
88+
<div class="flex items-center gap-2">
89+
<Checkbox inputId="terms" name="terms" binary />
90+
<label for="terms" class="text-sm">I have read and agree to the <a href="#" class="underline">Affero
91+
General Public License v3</a>.</label>
9392
</div>
94-
<p>Do not have an account? <a @click="router.push('/signup')" class="underline">Sign up</a></p>
95-
<Button type="submit" label="Login" class="w-full" secondary></Button>
96-
</Form>
97-
</template>
98-
</Card>
99-
</div>
93+
<Message v-if="$form.terms?.invalid" severity="error" size="small" variant="simple">{{
94+
$form.terms.error.message }}</Message>
95+
</div>
96+
<p>Do not have an account? <a @click="router.push('/signup')" class="underline">Sign up</a></p>
97+
<Button type="submit" label="Login" class="w-full" secondary></Button>
98+
</Form>
99+
</template>
100+
</Card>
100101
</div>
101-
</main>
102+
</div>
102103
</template>

0 commit comments

Comments
 (0)