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 {
|
||||
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="background-grid">
|
||||
<div class="top-half">
|
||||
<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>
|
||||
<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 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">
|
||||
<div class="input-with-icon">
|
||||
<ion-icon :icon="personOutline" class="icon-login"></ion-icon>
|
||||
<ion-input
|
||||
name="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>
|
||||
id="email"
|
||||
name="email"
|
||||
type="email">
|
||||
<small v-if="!meta.valid" class="error-message">{{ errors.email }}</small>
|
||||
</ion-input>
|
||||
</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>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<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"
|
||||
<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>
|
||||
id="password"
|
||||
name="password"
|
||||
type="password">
|
||||
</ion-input>
|
||||
</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>
|
||||
</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-content>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue