frontend/teacher-View-erstellen #69
3 changed files with 73 additions and 66 deletions
|
@ -1,13 +1,13 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import TeacherView from '../views/TeacherView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
name: 'teacher',
|
||||
component: TeacherView,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
|
@ -29,7 +29,6 @@ const router = createRouter({
|
|||
|
||||
component: () => import('../views/LoginView.vue'),
|
||||
},
|
||||
|
||||
],
|
||||
})
|
||||
|
||||
|
|
|
@ -1,68 +1,76 @@
|
|||
<template>
|
||||
<div class="Login">
|
||||
<h1>This is the Login Page</h1>
|
||||
</div>
|
||||
<div class="card flex justify-center">
|
||||
<Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<FormField v-slot="$field" as="section" name="username" initialValue="" class="flex flex-col gap-2">
|
||||
<InputText type="text" placeholder="Username" />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" asChild name="password" initialValue="">
|
||||
<section class="flex flex-col gap-2">
|
||||
<Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
|
||||
</section>
|
||||
</FormField>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
<script setup>
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Button from 'primevue/button'
|
||||
import Message from 'primevue/message'
|
||||
import Password from 'primevue/password'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
|
||||
</Form>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="remember" inputId="rememberme" binary/>
|
||||
<label for="rememberme"> Rememberme </label>
|
||||
</div>
|
||||
</div>
|
||||
import { FormField } from '@primevue/forms'
|
||||
import { Form } from '@primevue/forms'
|
||||
import { zodResolver } from '@primevue/forms/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { ref } from 'vue'
|
||||
|
||||
</template>
|
||||
const remember = ref(false)
|
||||
|
||||
<script setup>
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Button from 'primevue/button';
|
||||
import Message from 'primevue/message';
|
||||
import Password from 'primevue/password';
|
||||
import Checkbox from 'primevue/checkbox';
|
||||
const toast = useToast()
|
||||
|
||||
import { FormField } from '@primevue/forms';
|
||||
import { Form } from '@primevue/forms';
|
||||
import { zodResolver } from '@primevue/forms/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { ref } from "vue";
|
||||
const resolver = zodResolver(
|
||||
z.object({
|
||||
username: z.string().min(1, { message: 'Username is required.' }),
|
||||
password: z.string().min(1, { message: 'Password is required.' }),
|
||||
}),
|
||||
)
|
||||
|
||||
const remember = ref(false);
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const resolver = zodResolver(
|
||||
z.object({
|
||||
username: z.string().min(1, { message: 'Username is required.' }),
|
||||
password: z.string().min(1, { message: 'Password is required.' })
|
||||
})
|
||||
);
|
||||
|
||||
const onFormSubmit = ({ valid }) => {
|
||||
if (valid) {
|
||||
toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
const onFormSubmit = ({ valid }) => {
|
||||
if (valid) {
|
||||
toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 })
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="Login">
|
||||
<h1>This is the Login Page</h1>
|
||||
</div>
|
||||
<div class="card flex justify-center">
|
||||
<Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<FormField
|
||||
v-slot="$field"
|
||||
as="section"
|
||||
name="username"
|
||||
initialValue=""
|
||||
class="flex flex-col gap-2"
|
||||
>
|
||||
<InputText type="text" placeholder="Username" />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{
|
||||
$field.error?.message
|
||||
}}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" asChild name="password" initialValue="">
|
||||
<section class="flex flex-col gap-2">
|
||||
<Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{
|
||||
$field.error?.message
|
||||
}}</Message>
|
||||
</section>
|
||||
</FormField>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="remember" inputId="rememberme" binary />
|
||||
<label for="rememberme"> Rememberme </label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Reference in a new issue