Skip to content

Commit 479da59

Browse files
xrayianxrayian
committed
login screen design in progress
1 parent b7596a9 commit 479da59

File tree

7 files changed

+93
-14
lines changed

7 files changed

+93
-14
lines changed

‎components.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@ declare module '@vue/runtime-core' {
1313
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
1414
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
1515
ElFooter: typeof import('element-plus/es')['ElFooter']
16+
ElForm: typeof import('element-plus/es')['ElForm']
17+
ElFormItem: typeof import('element-plus/es')['ElFormItem']
1618
ElHeader: typeof import('element-plus/es')['ElHeader']
1719
ElIcon: typeof import('element-plus/es')['ElIcon']
20+
ElInput: typeof import('element-plus/es')['ElInput']
1821
ElLink: typeof import('element-plus/es')['ElLink']
1922
ElMain: typeof import('element-plus/es')['ElMain']
2023
ElMenu: typeof import('element-plus/es')['ElMenu']

‎src/assets/icon.png

14.7 KB
Loading

‎src/components/NavMenu.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<div class="flex-grow"></div>
1111
<el-menu-item index="0" :route="{ name: 'home' }"> Home </el-menu-item>
1212
<el-menu-item index="1" :route="{ name: 'progress-control' }"> Progress </el-menu-item>
13-
<el-menu-item index="2" :route="{ name: 'about' }"> About </el-menu-item>
13+
<el-menu-item index="2" :route="{ name: 'login' }"> Login </el-menu-item>
14+
<el-menu-item index="3" :route="{ name: 'about' }"> About </el-menu-item>
1415
</el-menu>
1516
</template>

‎src/interfaces.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export interface Chapter {
22
id: number;
33
number: number;
44
name: string;
5+
subject_id: number;
56
progress: number;
67
cq: boolean;
78
mcq: boolean;

‎src/router/index.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,18 @@ const router = createRouter({
1212
{
1313
path: "/about",
1414
name: "about",
15-
// route level code-splitting
16-
// this generates a separate chunk (About.[hash].js) for this route
17-
// which is lazy-loaded when the route is visited.
1815
component: () => import("../views/AboutView.vue"),
1916
},
2017
{
2118
path: "/progress",
2219
name: "progress-control",
23-
// route level code-splitting
24-
// this generates a separate chunk (About.[hash].js) for this route
25-
// which is lazy-loaded when the route is visited.
2620
component: () => import("../views/ProgressControl.vue"),
2721
},
22+
{
23+
path: "/login",
24+
name: "login",
25+
component: () => import("../views/auth/LoginView.vue"),
26+
},
2827
],
2928
});
3029

‎src/views/ProgressControl.vue

+26-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts" setup>
2-
import { ref } from 'vue'
3-
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
2+
import { onMounted, ref, type Ref } from 'vue'
43
import type { Subject, Chapter } from '@/interfaces';
54
65
7-
const activeSubject = ref('Bangla 1st Paper')
6+
const activeSubject: Ref<string> = ref("")
7+
const tableData: Ref<Chapter[]> = ref([]);
88
const subjectList: Subject[] = [
99
{
1010
id: 1,
@@ -79,11 +79,13 @@ const subjectList: Subject[] = [
7979
group: 'science'
8080
},
8181
]
82-
const tableData: Chapter[] = [
82+
83+
const chapterData: Chapter[] = [
8384
{
8485
id: 1,
8586
number: 1,
8687
name: "My Chapter",
88+
subject_id: 1,
8789
progress: 0,
8890
cq: false,
8991
mcq: true
@@ -92,6 +94,7 @@ const tableData: Chapter[] = [
9294
id: 2,
9395
number: 2,
9496
name: "My Chapter #2",
97+
subject_id: 3,
9598
progress: 25,
9699
mcq: false,
97100
cq: true
@@ -100,33 +103,49 @@ const tableData: Chapter[] = [
100103
id: 3,
101104
number: 3,
102105
name: "My Chapter #3",
106+
subject_id: 1,
103107
progress: 85,
104108
cq: true,
105109
mcq: true
106110
},
107111
]
108112
109113
114+
function updateTableData(subject_id: number) {
115+
const subjectChapters: Chapter[] = [];
116+
chapterData.forEach((chapter) => {
117+
if (chapter.subject_id == subject_id) {
118+
subjectChapters.push(chapter);
119+
// console.log(chapter)
120+
}
121+
});
122+
tableData.value = subjectChapters
123+
}
110124
111125
112126
const handleSelect = (key: string, keyPath: string[]) => {
113-
console.log(keyPath)
127+
// console.log(keyPath)
114128
subjectList.forEach((subject) => {
115129
if (subject.slug == keyPath[1]) {
116130
activeSubject.value = subject.name
131+
updateTableData(subject.id)
117132
}
118133
})
119134
}
120135
121136
const toggleMcq = (index: number, chapter: Chapter) => {
122-
console.log(index, chapter)
137+
// console.log(index, chapter)
123138
chapter.mcq = !chapter.mcq
124139
}
125140
126141
const toggleCq = (index: number, chapter: Chapter) => {
127-
console.log(index, chapter)
142+
// console.log(index, chapter)
128143
chapter.cq = !chapter.cq
129144
}
145+
146+
onMounted(() => {
147+
handleSelect('0', ['0', 'bangla-1'])
148+
})
130149
</script>
131150

132151

‎src/views/auth/LoginView.vue

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts" setup>
2+
3+
</script>
4+
5+
<template>
6+
<div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
7+
<div class="max-w-md w-full space-y-8">
8+
<div>
9+
<img class="mx-auto h-20 w-auto" src="@/assets/icon.png" alt="Workflow" />
10+
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
11+
<p class="mt-2 text-center text-sm text-gray-600">
12+
Or
13+
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">sign up for an account
14+
</a>
15+
</p>
16+
</div>
17+
<form class="mt-8 space-y-6" action="#" method="POST">
18+
<input type="hidden" name="remember" value="true" />
19+
<div class="rounded-md shadow-sm -space-y-px">
20+
<div>
21+
<label for="email-address" class="sr-only">Email address</label>
22+
<input id="email-address" name="email" type="email" autocomplete="email" required="true"
23+
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
24+
placeholder="Email address" />
25+
</div>
26+
<div>
27+
<label for="password" class="sr-only">Password</label>
28+
<input id="password" name="password" type="password" autocomplete="current-password"
29+
required="true"
30+
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
31+
placeholder="Password" />
32+
</div>
33+
</div>
34+
35+
<div class="flex items-end justify-between">
36+
<div class="text-sm">
37+
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> Forgot your password?
38+
</a>
39+
</div>
40+
</div>
41+
42+
<div>
43+
<button type="submit"
44+
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
45+
Sign in
46+
</button>
47+
<button type="submit"
48+
class="mt-2 group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md bg-gray-700 text-white hover:text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
49+
Continue with google
50+
</button>
51+
</div>
52+
</form>
53+
</div>
54+
</div>
55+
</template>
56+

0 commit comments

Comments
 (0)