frontend add login mask to loginview

frontend/src/main.ts

@@ -6,6 +6,9 @@ import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
 import Ripple from 'primevue/ripple'
+import ToastService from 'primevue/toastservice';
+
+
 
 import App from './App.vue'
 import router from './router'
@@ -17,6 +20,7 @@ app.use(PrimeVue, {
     preset: Aura,
   },
 })
+app.use(ToastService);
 app.use(createPinia())
 app.use(router)
 app.directive('ripple', Ripple) 

frontend/src/views/LoginView.vue

@@ -15,20 +15,33 @@
                 </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>
 
   <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';
+
+  import { FormField } from '@primevue/forms';
   import { Form } from '@primevue/forms';
-  import { reactive } from 'vue';
   import { zodResolver } from '@primevue/forms/resolvers/zod';
   import { z } from 'zod';
   import { useToast } from 'primevue/usetoast';
+  import { ref } from "vue";
+
+  const remember = ref(false); 
   
   const toast = useToast();
   
@@ -47,8 +60,6 @@
   </script>
 
 
-
-
   <style>
   @media (min-width: 1024px) {
     .about {