sanchezvem/BeReadyFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started login page

Browse Source
This commit is contained in:
sanchezvem
2026-03-23 23:29:38 +01:00
parent 2a7678d57b
commit c24103a2ad
10 changed files with 96 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app.css
+3
View File
@@ -0,0 +1,3 @@
* {
}
src/app/app.html
+1 -60
View File
@@ -1,60 +1 @@
<ion-app>
<ion-header>
<ion-toolbar style="--border-width:0; --background:#000;" class="mt-2">
<ion-buttons slot="start">
<ion-button class="ml-2">
<ion-icon class="text-white" name="person-add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Be Ready</ion-title>
<ion-buttons slot="end">
<ion-button class="mr-2">
<ion-icon class="text-white" name="person"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-segment class="m-2 ml-4 w-11/12">
<ion-segment-button value="default" content-id="menu">
<ion-label>Menu</ion-label>
</ion-segment-button>
<ion-segment-button value="second" content-id="groupes">
<ion-label>Groupes</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment-view style="background: red">
<ion-segment-content id="menu">Menu</ion-segment-content>
<ion-segment-content id="groupes">Groupes</ion-segment-content>
</ion-segment-view>
</ion-content>
<ion-footer>
<ion-toolbar style="--border-width:0; --background:#000" class="mb-3">
<ion-buttons class="flex gap-6 justify-center w-full">
<ion-button>
<ion-icon name="people" class="text-white text-3xl"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="chatbubbles" class="text-white text-2xl"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="home" class="text-white text-2xl"></ion-icon>
</ion-button>
<ion-button>
<ion-icon name="ribbon" class="text-white text-2xl"></ion-icon>
</ion-button>
<ion-button>
<ion-icon name="cog" class="text-white text-3xl"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</ion-app>
<app-login></app-login>
src/app/app.ts
+3 -8
View File
@@ -1,17 +1,12 @@
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Component } from '@angular/core';
import {IonicModule} from "@ionic/angular";
import { addIcons } from 'ionicons';
import { heart, person, personAdd, home, people, chatbubbles, ribbon, cog } from 'ionicons/icons';
import {LoginComponent} from "./pages/login/login.component";
@Component({
selector: 'app-root',
imports: [RouterOutlet, IonicModule],
imports: [IonicModule, LoginComponent],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
constructor() {
addIcons({ heart, personAdd, person, home, people, chatbubbles, ribbon, cog });
}
}
src/app/components/login-form/login-form.component.html
+17
View File
@@ -0,0 +1,17 @@
<form [formGroup]="loginForm">
<ion-item>
<ion-label>Pseudo</ion-label>
<ion-input placeholder="Nom d'utilisateur" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-label>Mot de passe</ion-label>
<ion-input type="password" placeholder="MotDePasse1234" formControlName="password">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
</ion-item>
<ion-button class="flex flex-col items-center justify-center mt-6">
<p class="text-white font-bold m-0">Se connecter</p>
</ion-button>
</form>
src/app/components/login-form/login-form.component.scss
View File
src/app/components/login-form/login-form.component.ts
+24
View File
@@ -0,0 +1,24 @@
import { Component } from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {IonButton, IonInput, IonInputPasswordToggle, IonItem, IonLabel} from "@ionic/angular/standalone";
@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.scss'],
imports: [
ReactiveFormsModule,
IonButton,
IonInput,
IonInputPasswordToggle,
IonItem,
IonLabel
]
})
export class LoginFormComponent {
loginForm: FormGroup = new FormGroup({
username: new FormControl<string>(null, [Validators.required]),
password: new FormControl<string>(null, [Validators.required])
})
}
src/app/pages/login/login.component.html
+23
View File
@@ -0,0 +1,23 @@
<div class="flex flex-col items-center justify-center min-h-screen p-6 space-y-4 bg-white">
<img src="BeReady.png" alt="BeReady-Logo" class="w-1/4 max-w-xs">
<p class="text-3xl font-extrabold text-center text-black">
BeReady
</p>
<p class="text-gray-500 text-sm text-center w-3/5 leading-snug">
Prêt à défier tes potes et prouver que t’es le meilleur ?
</p>
<app-login-form></app-login-form>
<div class="flex items-center w-full">
<div class="flex-1 border-b border-gray-400"></div>
<span class="px-2 text-gray-500 font-bold">ou</span>
<div class="flex-1 border-b border-gray-400"></div>
</div>
<ion-button class="w-full mt-0" style="border: 1px solid black; border-radius: 15px" color="secondary">
<p class="text-black font-bold m-0">Créer un compte</p>
</ion-button>
</div>
src/app/pages/login/login.component.scss
View File
src/app/pages/login/login.component.ts
+20
View File
@@ -0,0 +1,20 @@
import { Component, OnInit } from '@angular/core';
import {IonicModule} from "@ionic/angular";
import {LoginFormComponent} from "../../components/login-form/login-form.component";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
imports: [
IonicModule,
LoginFormComponent
]
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
src/theme/variables.css
+5
View File
@@ -8,3 +8,8 @@
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";
:root {
--ion-color-primary: black;
--ion-color-secondary: #F0EFE9;
}