From a18bbff1e2e19407ee9716c2e9301ac56e4f76b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20K=C3=BChl?= <s.kuehl@tms-bonn.de>
Date: Wed, 30 Apr 2025 17:25:27 +0200
Subject: [PATCH] restructured login

---
 app/src/views/LoginView.vue | 194 ++++++++++++++----------------------
 1 file changed, 77 insertions(+), 117 deletions(-)

diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 726d289..a528e75 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -2,19 +2,15 @@
 import { computed, ref, onMounted } from "vue";
 import {
   IonPage,
-  IonIcon,
-  // IonLabel,
   IonButton,
-  IonContent,
-  IonInput
+  IonCard,
+  IonInput,
+  IonItem,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
 } from "@ionic/vue";
 
-import {
-  lockClosedOutline,
-  personOutline,
-//   arrowBack,
-//   shapesOutline
-} from 'ionicons/icons';
 import {Field, useForm} from 'vee-validate';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex'
@@ -91,82 +87,74 @@ const changeServer = () => {
 
 <template>
   <ion-page>
-    <ion-content>
-      <div class="login-container">
-        <div class="top-section">
-          <h1 class="login-title">Login</h1>
-
-          <div class="logo-container">
-            <img src="../assets/Bonn_Capitals_Insignia.png" alt="Logo" class="logo" />
-          </div>
-<!--          <ion-label>{{server.protocol}}://{{server.host}}:{{server.port}}</ion-label>-->
+    <div class="background-grid">
+      <div class="top-half">
+        <div class="logo-container">
+          <img src="../assets/Bonn_Capitals_Insignia.png" alt="Logo" class="logo" />
         </div>
-        <form @submit="submit" class="form-container">
-          <div class="input-group">
-            <div class="label-row">
-              <label class="input-label" for="email">Email</label>
-              <small v-if="!meta.valid" class="error-message">{{ errors.email }}</small>
-            </div>
-            <Field id="email" name="email" type="email" >
-              <div class="input-with-icon">
-                <ion-icon :icon="personOutline" class="icon-login"></ion-icon>
-                <ion-input
-                    name="email"
+      </div>
+      <div class="bottom-half"></div>
+    </div>
+    <!-- Centered card container -->
+    <div class="card-container">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>Login</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <form @submit="submit">
+            <ion-item>
+              <Field id="email" name="email" type="email">
+                <ion-input required
+                    label="Email"
+                    label-placement="stacked"
                     v-model="email"
                     v-bind="emailAttrs"
-                    class="rounded-input"
                     :class="{ 'input-invalid': !meta.valid && errors.email }"
-                    type="text" required placeholder="Email"></ion-input>
-                </div>
-            </Field>
-          </div>
-
-          <div class="input-group">
-            <div class="label-row">
-              <label class="input-label" for="password">Password</label>
-              <small v-if="!meta.valid" class="error-message">{{ errors.password }}</small>
-            </div>
-            <Field id="password" name="password" type="password">
-              <div class="input-with-icon">
-                <ion-icon :icon="lockClosedOutline" class="icon-login"></ion-icon>
-                <ion-input
-                    name="password"
+                    id="email"
+                    name="email"
+                    type="email">
+                  <small v-if="!meta.valid" class="error-message">{{ errors.email }}</small>
+                </ion-input>
+              </Field>
+            </ion-item>
+            <ion-item>
+              <Field id="password" name="password" type="password">
+                <ion-input required
+                    label="Password"
+                    label-placement="stacked"
                     v-model="password"
                     v-bind="passwordAttrs"
-                    type="password"
-                    class="rounded-input"
                     :class="{ 'input-invalid': !meta.valid && errors.password }"
-                    required placeholder="Password"></ion-input>
-              </div>
-            </Field>
-          </div>
-
-          <ion-button expand="block" class="rounded-button" type="submit">Login</ion-button>
-          <ion-button expand="block" class="rounded-button" @click="changeServer">Change Server</ion-button>
-        </form>
-      </div>
-    </ion-content>
+                    id="password"
+                    name="password"
+                    type="password">
+                </ion-input>
+              </Field>
+            </ion-item>
+            <ion-button expand="block" class="ion-margin-top" type="submit" @click="submit">Login</ion-button>
+          </form>
+        </ion-card-content>
+      </ion-card>
+    </div>
   </ion-page>
 </template>
 
 <style scoped>
-.login-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.background-grid {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  height: 100vh;
 }
 
-.top-section {
-  background-color: #cbeec9;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.top-half {
+  background: -moz-linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
+  background: -webkit-linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
+  background: linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
 }
 
-.login-title {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+.bottom-half {
+  background: #ffffff; /* or your bottom background */
 }
 
 .logo-container {
@@ -174,6 +162,7 @@ const changeServer = () => {
   display: flex;
   justify-content: center;
   height: 25vh;
+  margin-top: 2rem;
   padding-bottom: 1rem;
 }
 
@@ -183,50 +172,22 @@ const changeServer = () => {
   object-fit: cover;
 }
 
-.form-container {
-  padding-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  width: 100%;
+.card-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* optional: allows background interaction */
+}
+
+ion-card {
+  width: 90%;
   max-width: 400px;
-}
-
-.input-group {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  margin-bottom: 16px;
-}
-
-.label-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.input-label {
-  font-size: 0.9rem;
-  margin-bottom: 4px;
-  text-align: left;
-}
-
-.input-with-icon {
-  display: flex;
-  align-items: center;
-  padding: 8px 0;
-  gap: 8px;
-}
-
-.rounded-input {
-  --border-radius: 50%;
-  padding: 12px;
-  background-color: #ffffff;
-}
-
-.input-invalid {
-  background-color: lightcoral;
+  pointer-events: all; /* re-enables interactions for card */
 }
 
 .error-message {
@@ -236,9 +197,8 @@ const changeServer = () => {
   margin-top: 4px;
 }
 
-.rounded-button {
-  --border-radius: 12px;
-  width: 100%;
+.input-invalid {
+  background-color: lightcoral;
 }
 
 </style>