Changements login + register
This commit is contained in:
gokhoal
@@ -1,85 +1,152 @@
|
||||
.bg {
|
||||
--background: linear-gradient(180deg, #e6dede, #e58a8a);
|
||||
/* Import Google Font */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
|
||||
|
||||
/* ---- Page background ---- */
|
||||
ion-content.bg {
|
||||
--background: transparent;
|
||||
--overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
#f9e8e8 0%,
|
||||
#f2c4c4 35%,
|
||||
#e89898 70%,
|
||||
#d97070 100%
|
||||
);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Centered container ---- */
|
||||
.container {
|
||||
text-align: center;
|
||||
padding-top: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
padding: 40px 24px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ---- Logo box ---- */
|
||||
.logo-box {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin: 0 auto 10px;
|
||||
border-radius: 20px;
|
||||
background: #f2eaea;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ffffff;
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
box-shadow: 8px 8px 15px #d1bcbc,
|
||||
-8px -8px 15px #ffffff;
|
||||
box-shadow: 0 4px 18px rgba(180, 80, 80, 0.18);
|
||||
overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- App title ---- */
|
||||
h1 {
|
||||
color: #b86b6b;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #b05050;
|
||||
margin: 0 0 10px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ---- White card ---- */
|
||||
.card {
|
||||
width: 85%;
|
||||
max-width: 320px;
|
||||
margin: auto;
|
||||
padding: 25px;
|
||||
border-radius: 20px;
|
||||
background: #f2eaea;
|
||||
|
||||
box-shadow: 10px 10px 20px #cfaeae,
|
||||
-10px -10px 20px #ffffff;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-radius: 24px;
|
||||
padding: 28px 24px 32px;
|
||||
box-shadow: 0 8px 32px rgba(180, 80, 80, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
|
||||
h3 {
|
||||
color: #c27a7a;
|
||||
margin-bottom: 20px;
|
||||
font-weight: normal;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #b05050;
|
||||
text-align: center;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Inputs ---- */
|
||||
.input {
|
||||
margin: 10px 0;
|
||||
border-radius: 20px;
|
||||
|
||||
--background: #f2eaea;
|
||||
--padding-start: 15px;
|
||||
|
||||
box-shadow: inset 5px 5px 10px #d1bcbc,
|
||||
inset -5px -5px 10px #ffffff;
|
||||
--background: rgba(255, 255, 255, 0.95);
|
||||
--border-radius: 50px;
|
||||
--padding-start: 18px;
|
||||
--padding-end: 18px;
|
||||
--inner-padding-end: 0;
|
||||
--highlight-color-focused: #d97070;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 2px 8px rgba(180, 80, 80, 0.10);
|
||||
overflow: hidden;
|
||||
|
||||
ion-input {
|
||||
color: #a35c5c;
|
||||
--placeholder-color: #c9a0a0;
|
||||
--placeholder-opacity: 1;
|
||||
--color: #6b3030;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
caret-color: #d97070;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Login button ---- */
|
||||
.btn {
|
||||
margin-top: 15px;
|
||||
--background: #b86b6b;
|
||||
--border-radius: 20px;
|
||||
--background: #b05050;
|
||||
--background-activated: #903838;
|
||||
--border-radius: 50px;
|
||||
--box-shadow: 0 4px 16px rgba(176, 80, 80, 0.35);
|
||||
--color: #ffffff;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
margin-top: 6px;
|
||||
height: 48px;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
box-shadow: 5px 5px 10px #a45f5f,
|
||||
-5px -5px 10px #ff9c9c;
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
--box-shadow: 0 2px 8px rgba(176, 80, 80, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Sign-up link ---- */
|
||||
.signup {
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #b05050;
|
||||
line-height: 1.7;
|
||||
margin-top: 6px;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
color: #b05050;
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
color: #903838;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<div class="signup">
|
||||
Vous êtes nouveau ?<br>
|
||||
<a href="#">Créez vous un compte ici</a>
|
||||
<a (click)="goToRegister()">Créez vous un compte ici</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -26,6 +26,10 @@ export class LoginFormComponent {
|
||||
|
||||
isLoading = false;
|
||||
|
||||
goToRegister() {
|
||||
this.router.navigate(['/register']);
|
||||
}
|
||||
|
||||
loginForm = this.fb.group({
|
||||
name: ['', [Validators.required]],
|
||||
password: ['', [Validators.required]]
|
||||
@@ -34,6 +38,8 @@ export class LoginFormComponent {
|
||||
async submitForm(): Promise<void> {
|
||||
if (this.loginForm.valid) {
|
||||
|
||||
|
||||
|
||||
await this.navCtrl.navigateRoot(['main/messages']);
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
|
||||
|
||||
/* ---- Page background ---- */
|
||||
ion-content.bg {
|
||||
--background: transparent;
|
||||
--overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
160deg,
|
||||
#f9e8e8 0%,
|
||||
#f2c4c4 35%,
|
||||
#e89898 70%,
|
||||
#d97070 100%
|
||||
);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Centered container ---- */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
padding: 40px 24px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ---- Logo box ---- */
|
||||
.logo-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ffffff;
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 18px rgba(180, 80, 80, 0.18);
|
||||
overflow: hidden;
|
||||
margin-bottom: 4px;
|
||||
|
||||
img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- App title ---- */
|
||||
h1 {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #b05050;
|
||||
margin: 0 0 10px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ---- White card ---- */
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-radius: 24px;
|
||||
padding: 28px 24px 32px;
|
||||
box-shadow: 0 8px 32px rgba(180, 80, 80, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
|
||||
h3 {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #b05050;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #c98080;
|
||||
text-align: center;
|
||||
margin: -6px 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Inputs ---- */
|
||||
.input {
|
||||
--background: rgba(255, 255, 255, 0.95);
|
||||
--border-radius: 50px;
|
||||
--padding-start: 18px;
|
||||
--padding-end: 18px;
|
||||
--inner-padding-end: 0;
|
||||
--highlight-color-focused: #d97070;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 2px 8px rgba(180, 80, 80, 0.10);
|
||||
overflow: hidden;
|
||||
|
||||
ion-input {
|
||||
--placeholder-color: #c9a0a0;
|
||||
--placeholder-opacity: 1;
|
||||
--color: #6b3030;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
caret-color: #d97070;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Register button ---- */
|
||||
.btn {
|
||||
--background: #b05050;
|
||||
--background-activated: #903838;
|
||||
--border-radius: 50px;
|
||||
--box-shadow: 0 4px 16px rgba(176, 80, 80, 0.35);
|
||||
--color: #ffffff;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
margin-top: 6px;
|
||||
height: 48px;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
--box-shadow: 0 2px 8px rgba(176, 80, 80, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Login link ---- */
|
||||
.signup {
|
||||
text-align: center;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #b05050;
|
||||
line-height: 1.7;
|
||||
margin-top: 6px;
|
||||
|
||||
a {
|
||||
color: #b05050;
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
color: #903838;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,41 @@
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-title>Inscrivez-vous à Knots !</ion-card-title><br>
|
||||
<ion-card-subtitle>Commencez à nouer des liens !</ion-card-subtitle><br>
|
||||
</ion-card-header>
|
||||
<ion-content [fullscreen]="true" class="bg">
|
||||
|
||||
<ion-card-content>
|
||||
Nom d'utilisateur
|
||||
<br>
|
||||
<input type="text">
|
||||
<br><br>
|
||||
Mot de Passe
|
||||
<br>
|
||||
<input type="password" id="password">
|
||||
<br><br>
|
||||
Confirmez votre mot de passe
|
||||
<br>
|
||||
<input type="password" id="confirmPassword">
|
||||
</ion-card-content><br>
|
||||
<div class="container">
|
||||
|
||||
<ion-button fill="clear">Créer son compte</ion-button>
|
||||
</ion-card>
|
||||
<div class="logo-box">
|
||||
<img src="assets/icon/logo.png" alt="logo">
|
||||
</div>
|
||||
|
||||
<h1>Knots</h1>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<h3>Inscrivez-vous à Knots !</h3>
|
||||
<p class="subtitle">Commencez à nouer des liens !</p>
|
||||
|
||||
<ion-item lines="none" class="input">
|
||||
<ion-input placeholder="Nom d'utilisateur..."></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none" class="input">
|
||||
<ion-input type="password" placeholder="Mot de passe..."></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none" class="input">
|
||||
<ion-input type="password" placeholder="Confirmez votre mot de passe..."></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-button expand="block" class="btn">
|
||||
Créer son compte
|
||||
</ion-button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="signup">
|
||||
Déjà un compte ?<br>
|
||||
<a (click)="goToLogin()" >Connectez-vous ici</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
@@ -1,26 +1,35 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component, inject} from '@angular/core';
|
||||
import {
|
||||
IonButton,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle
|
||||
} from "@ionic/angular/standalone";
|
||||
|
||||
@Component({
|
||||
selector: 'app-register-form',
|
||||
imports: [
|
||||
IonButton,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardTitle,
|
||||
IonCardSubtitle
|
||||
],
|
||||
IonCardSubtitle,
|
||||
IonCardTitle, IonContent, IonInput, IonItem
|
||||
} from "@ionic/angular/standalone";
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'app-register-form',
|
||||
imports: [
|
||||
IonButton,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardTitle,
|
||||
IonCardSubtitle,
|
||||
IonInput,
|
||||
IonContent,
|
||||
IonItem
|
||||
],
|
||||
templateUrl: './register-form.component.html',
|
||||
styleUrl: './register-form.component.css'
|
||||
})
|
||||
export class RegisterFormComponent {
|
||||
|
||||
private router = inject(Router)
|
||||
|
||||
goToLogin() {
|
||||
this.router.navigate(['/login']);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user