Register gemacht. Kleine Änderung

Kleine Änderung:
- In Login:
    - Logo RICHTIG gefärbt
    - Remember me (keine Funktion) hinzufegüt
    - Weiterleitung auf register
Register:
Registrierung seite erstellt und registrieren möglich gemacht + API anbindung

src/components/Login.vue

@@ -2,15 +2,21 @@
 
 import Legal from "./home_components/legal.vue";
 import Login_comp from "./login_components/login_comp.vue";
+import router from "../router";
+
+function route_home() {
+  router.push("/");
+}
+
 </script>
 
 <template>
-  <div id="main" class="bg-hintergrund-farbe flex p-2 ">
+  <div id="main" class="bg-hintergrund-farbe flex p-2 justify-between">
-    <div class="items-center pr-96 pl-2 pt-5">
+    <div class="pt-5">
-      <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto">
+      <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home">
     </div>
-      <login_comp></login_comp>
+    <login_comp class="inset-0"></login_comp>
-    <div class="p-5 ">
+    <div class="inset-y-0 right-0 ">
       <legal></legal>
     </div>
   </div>

src/components/home_components/navigationbar.vue

@@ -53,7 +53,7 @@ function fun_route(destination: string) {
 <template>
   <div class="pt-4 border-b-2 border-b-grau2 border-r-1 border-r-grau2">
     <div class="items-center flex justify-center"><!-- BILD-->
-      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="fun_route('home')">
+      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto hover:shadow-2xl hover:shadow-grau-dunkel" @click="fun_route('home')">
     </div>
     <div class="align-middle space-y-3 pt-4 pl-3 pb-4 pr-4 font-bold text-xl"> <!-- Icons (Bild) und Text                                  Damit der Text weiß ist muss zwei mal gedrückt werden manchmal-->
       <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="fun_route('home')"          :class="{'text-weiss': selected_destination === 'home' || selected_destination === ''}"><img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/home.png" alt=""> Home</label>

src/components/login_components/login_comp.vue

@@ -5,7 +5,8 @@ import { ref } from 'vue';
 let input_username_mail = ref("");
 let input_user_password = ref("");
 
-async function login() {
+async function login(event: Event) {
+  event.preventDefault();
 
 
   const username = input_username_mail;
@@ -37,25 +38,25 @@ async function login() {
   }
 }
 
-function handleSubmit(event: Event) {
-  event.preventDefault();
-  login();
-}
 </script>
 
 <template>
   <div class="px-20 border-x border-x-grau2 pb-35p">
     <div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT-->
-      <p class="text-weiss text-center">Welcome to <span class="text-logo-farbe-rot">E</span><span class="text-logo-farbe-lila">S</span><span class="text-logo-farbe-blau">P</span>!</p>
+      <p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p>
       <p class="text-weiss text-center">Login or create a new Account to continue</p>
     </div>
     <div class="px-20 pt-7"><!--  FORM --->
-      <form class="flex flex-col items-center" @submit.prevent="handleSubmit">
+      <form class="flex flex-col items-center" @submit.prevent="login">
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_username_mail" type="text" placeholder="Username or E-Mail"><br>
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_user_password" type="password" placeholder="Password"><br>
-        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-grau-dunkel rounded-lg" @click="login()">Login</button>
+        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg hover:shadow-2xl hover:shadow-grau-dunkel">Login</button>
+        <p class="text-weiss"><input type="checkbox" > Remeber me</p>
       </form>
     </div>
+    <div>
+      <p class="text-weiss text-center">No Account? <router-link to="/register" class="text-button-farbe">Register here</router-link></p>
+    </div>
   </div>
 </template>
 

src/components/register.vue

@@ -0,0 +1,25 @@
+<script setup>
+import Legal from "./home_components/legal.vue";
+import Register_main from "./register_components/register_main.vue";
+import router from "../router";
+
+function route_home() {
+  router.push("/");
+}
+</script>
+
+<template>
+  <div id="main" class="bg-hintergrund-farbe flex p-2 justify-between">
+    <div class="pt-5">
+      <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home">
+    </div>
+    <register_main class="inset-0"></register_main>
+    <div class="inset-y-0 right-0 ">
+      <legal></legal>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/register_components/register_main.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+
+import {ref} from "vue";
+import router from "../../router";
+
+let register_input_username = ref("");
+let register_input_displayname = ref("");
+let register_input_password = ref("");
+let register_input_email = ref("");
+
+async function register() {
+
+
+  const username = register_input_username;
+  const displayname = register_input_displayname;
+  const email = register_input_email;
+  const password = register_input_password;
+  const std_text = "default";
+
+
+  console.log("Username: " + username.value + ", Password: " + password.value);
+
+  try {
+    const response = await fetch('http://localhost:8000/api/account/register', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'login/json',
+      },
+      body: JSON.stringify({username: username.value, password: password.value, userGroup: "user", displayname: displayname.value, user_email: email.value, firstname: std_text, surname: std_text}),
+    });
+
+
+    if (response["status"] == 200) {
+      alert("Account created! You will be now redirected");
+      router.push('/');
+      router.go(1);
+    } else {
+      alert("Something went wrong. Please try again later.");
+    }
+
+    const data = await response.json();
+    console.log(response);
+  } catch (e) {
+    console.log("An error has occurred. Please try again later.");
+  }
+}
+
+function handleSubmit(event: Event) {
+  event.preventDefault();
+  register();
+}
+</script>
+
+<template>
+  <div id="main" class="bg-hintergrund-farbe p-2 border-x border-x-grau2 px-20">
+    <div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT-->
+      <p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p>
+      <p class="text-weiss text-center pt-2">Join today!</p>
+    </div>
+    <div class="px-20 pt-7"> <!--  FORM --->
+      <form class="flex flex-col items-center" action="register_main.vue">
+        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_username" type="text" placeholder="Username" required><br>
+        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_displayname" type="text" placeholder="Displayname" required><br>
+        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_email" type="email" placeholder="E-Mail" required><br>
+        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_password " type="password" placeholder="Password" required><br>
+        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg hover:shadow-2xl hover:shadow-grau-dunkel">Create Account</button>
+      </form>
+      <p class="text-weiss text-center">Already have an account? <router-link to="/register" class="text-button-farbe">Login</router-link></p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/router/index.ts

@@ -8,6 +8,7 @@ import Login from "../components/Login.vue";
 import wip from "../components/wip.vue";
 import settings from "../components/settings.vue";
 import nottifications from "../components/notifications.vue";
+import register from "../components/register.vue";
 // The routing does not happen automatically
 // Each route has to be defined here, or it wont work.
 const routes = [
@@ -35,7 +36,13 @@ const routes = [
         path: "/notifications",
         name: "Notifications",
         component: nottifications,
+    },
+    {
+        path: "/register",
+        name: "Register",
+        component: register,
     }
+
 ]
 
 const router = createRouter({