app/index.html

@@ -18,6 +18,7 @@
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Ionic App" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   </head>

app/src/views/LoginView.vue

@@ -2,15 +2,19 @@
 import { computed, ref, onMounted } from "vue";
 import {
   IonPage,
+  IonIcon,
+  // IonLabel,
   IonButton,
-  IonCard,
+  IonContent,
-  IonInput,
+  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'
@@ -87,74 +91,82 @@ const changeServer = () => {
 
 <template>
   <ion-page>
-    <div class="background-grid">
+    <ion-content>
-      <div class="top-half">
+      <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>
-      <div class="bottom-half"></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>
-    <!-- Centered card container -->
+            <Field id="email" name="email" type="email" >
-    <div class="card-container">
+              <div class="input-with-icon">
-      <ion-card>
+                <ion-icon :icon="personOutline" class="icon-login"></ion-icon>
-        <ion-card-header>
+                <ion-input
-          <ion-card-title>Login</ion-card-title>
+                    name="email"
-        </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 }"
-                    id="email"
+                    type="text" required placeholder="Email"></ion-input>
-                    name="email"
+                </div>
-                    type="email">
-                  <small v-if="!meta.valid" class="error-message">{{ errors.email }}</small>
-                </ion-input>
             </Field>
-            </ion-item>
+          </div>
-            <ion-item>
+
+          <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">
-                <ion-input required
+              <div class="input-with-icon">
-                    label="Password"
+                <ion-icon :icon="lockClosedOutline" class="icon-login"></ion-icon>
-                    label-placement="stacked"
+                <ion-input
+                    name="password"
                     v-model="password"
                     v-bind="passwordAttrs"
+                    type="password"
+                    class="rounded-input"
                     :class="{ 'input-invalid': !meta.valid && errors.password }"
-                    id="password"
+                    required placeholder="Password"></ion-input>
-                    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>
+            </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>
   </ion-page>
 </template>
 
 <style scoped>
-.background-grid {
+.login-container {
-  display: grid;
+  display: flex;
-  grid-template-rows: 1fr 1fr;
+  flex-direction: column;
-  height: 100vh;
+  align-items: center;
 }
 
-.top-half {
+.top-section {
-  background: -moz-linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
+  background-color: #cbeec9;
-  background: -webkit-linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
+  width: 100%;
-  background: linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.bottom-half {
+.login-title {
-  background: #ffffff; /* or your bottom background */
+  font-size: 2rem;
+  margin-bottom: 1rem;
 }
 
 .logo-container {
@@ -162,7 +174,6 @@ const changeServer = () => {
   display: flex;
   justify-content: center;
   height: 25vh;
-  margin-top: 2rem;
   padding-bottom: 1rem;
 }
 
@@ -172,22 +183,50 @@ const changeServer = () => {
   object-fit: cover;
 }
 
-.card-container {
+.form-container {
-  position: absolute;
+  padding-top: 1rem;
-  top: 0;
+  padding-left: 1rem;
-  left: 0;
+  padding-right: 1rem;
-  height: 100vh;
+  width: 100%;
-  width: 100vw;
+  max-width: 400px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none; /* optional: allows background interaction */
 }
 
-ion-card {
+.input-group {
-  width: 90%;
+  width: 100%;
-  max-width: 400px;
+  display: flex;
-  pointer-events: all; /* re-enables interactions for card */
+  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;
 }
 
 .error-message {
@@ -197,8 +236,9 @@ ion-card {
   margin-top: 4px;
 }
 
-.input-invalid {
+.rounded-button {
-  background-color: lightcoral;
+  --border-radius: 12px;
+  width: 100%;
 }
 
 </style>

app/src/views/SetupView.vue

@@ -2,7 +2,7 @@
 import {ref} from 'vue';
 import { useRouter } from 'vue-router';
 import backendService from '@/services/BackendService'
-import {IonButton, IonContent, IonCol, IonHeader, IonInput, IonPage, IonTitle, IonToolbar, IonRow, IonCheckbox} from '@ionic/vue';
+import {IonButton, IonContent, IonCol, IonHeader, IonInput, IonPage, IonTitle, IonToolbar, IonCheckbox} from '@ionic/vue';
 
 const server = ref(backendService.getServer());