restructured login
This commit is contained in:
Sascha Kühl
parent
4108388645
commit
a18bbff1e2
|
|
@ -2,19 +2,15 @@
|
||||||
import { computed, ref, onMounted } from "vue";
|
import { computed, ref, onMounted } from "vue";
|
||||||
import {
|
import {
|
||||||
IonPage,
|
IonPage,
|
||||||
IonIcon,
|
|
||||||
// IonLabel,
|
|
||||||
IonButton,
|
IonButton,
|
||||||
IonContent,
|
IonCard,
|
||||||
IonInput
|
IonInput,
|
||||||
|
IonItem,
|
||||||
|
IonCardHeader,
|
||||||
|
IonCardTitle,
|
||||||
|
IonCardContent,
|
||||||
} from "@ionic/vue";
|
} from "@ionic/vue";
|
||||||
|
|
||||||
import {
|
|
||||||
lockClosedOutline,
|
|
||||||
personOutline,
|
|
||||||
// arrowBack,
|
|
||||||
// shapesOutline
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import {Field, useForm} from 'vee-validate';
|
import {Field, useForm} from 'vee-validate';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
|
|
@ -91,82 +87,74 @@ const changeServer = () => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ion-page>
|
<ion-page>
|
||||||
<ion-content>
|
<div class="background-grid">
|
||||||
<div class="login-container">
|
<div class="top-half">
|
||||||
<div class="top-section">
|
|
||||||
<h1 class="login-title">Login</h1>
|
|
||||||
|
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
<img src="../assets/Bonn_Capitals_Insignia.png" alt="Logo" class="logo" />
|
<img src="../assets/Bonn_Capitals_Insignia.png" alt="Logo" class="logo" />
|
||||||
</div>
|
</div>
|
||||||
<!-- <ion-label>{{server.protocol}}://{{server.host}}:{{server.port}}</ion-label>-->
|
|
||||||
</div>
|
</div>
|
||||||
<form @submit="submit" class="form-container">
|
<div class="bottom-half"></div>
|
||||||
<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>
|
</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">
|
<Field id="email" name="email" type="email">
|
||||||
<div class="input-with-icon">
|
<ion-input required
|
||||||
<ion-icon :icon="personOutline" class="icon-login"></ion-icon>
|
label="Email"
|
||||||
<ion-input
|
label-placement="stacked"
|
||||||
name="email"
|
|
||||||
v-model="email"
|
v-model="email"
|
||||||
v-bind="emailAttrs"
|
v-bind="emailAttrs"
|
||||||
class="rounded-input"
|
|
||||||
:class="{ 'input-invalid': !meta.valid && errors.email }"
|
:class="{ 'input-invalid': !meta.valid && errors.email }"
|
||||||
type="text" required placeholder="Email"></ion-input>
|
id="email"
|
||||||
</div>
|
name="email"
|
||||||
|
type="email">
|
||||||
|
<small v-if="!meta.valid" class="error-message">{{ errors.email }}</small>
|
||||||
|
</ion-input>
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
</ion-item>
|
||||||
|
<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">
|
<Field id="password" name="password" type="password">
|
||||||
<div class="input-with-icon">
|
<ion-input required
|
||||||
<ion-icon :icon="lockClosedOutline" class="icon-login"></ion-icon>
|
label="Password"
|
||||||
<ion-input
|
label-placement="stacked"
|
||||||
name="password"
|
|
||||||
v-model="password"
|
v-model="password"
|
||||||
v-bind="passwordAttrs"
|
v-bind="passwordAttrs"
|
||||||
type="password"
|
|
||||||
class="rounded-input"
|
|
||||||
:class="{ 'input-invalid': !meta.valid && errors.password }"
|
:class="{ 'input-invalid': !meta.valid && errors.password }"
|
||||||
required placeholder="Password"></ion-input>
|
id="password"
|
||||||
</div>
|
name="password"
|
||||||
|
type="password">
|
||||||
|
</ion-input>
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
</ion-item>
|
||||||
|
<ion-button expand="block" class="ion-margin-top" type="submit" @click="submit">Login</ion-button>
|
||||||
<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>
|
</form>
|
||||||
|
</ion-card-content>
|
||||||
|
</ion-card>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
|
||||||
</ion-page>
|
</ion-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.login-container {
|
.background-grid {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template-rows: 1fr 1fr;
|
||||||
align-items: center;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-section {
|
.top-half {
|
||||||
background-color: #cbeec9;
|
background: -moz-linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
|
||||||
width: 100%;
|
background: -webkit-linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
|
||||||
display: flex;
|
background: linear-gradient(180deg, rgba(106, 191, 102, 1) 0%, rgba(52, 94, 50, 0.8) 100%);
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-title {
|
.bottom-half {
|
||||||
font-size: 2rem;
|
background: #ffffff; /* or your bottom background */
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
.logo-container {
|
||||||
|
|
@ -174,6 +162,7 @@ const changeServer = () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 25vh;
|
height: 25vh;
|
||||||
|
margin-top: 2rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -183,50 +172,22 @@ const changeServer = () => {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-container {
|
.card-container {
|
||||||
padding-top: 1rem;
|
position: absolute;
|
||||||
padding-left: 1rem;
|
top: 0;
|
||||||
padding-right: 1rem;
|
left: 0;
|
||||||
width: 100%;
|
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;
|
max-width: 400px;
|
||||||
}
|
pointer-events: all; /* re-enables interactions for card */
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
|
|
@ -236,9 +197,8 @@ const changeServer = () => {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-button {
|
.input-invalid {
|
||||||
--border-radius: 12px;
|
background-color: lightcoral;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue