Siwa12100
1 year ago
parent
3b524fa29e
commit
f87e565581
@ -1,33 +1,55 @@
|
||||
@using Blazorise.Components;
|
||||
@using System.ComponentModel.DataAnnotations;
|
||||
|
||||
<h1> Se connecter</h1>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/composants/authentification/FormulaireConnexion.css" />
|
||||
</head>
|
||||
|
||||
<Validations @ref="Validations" Mode="ValidationMode.Auto" Model="Requete">
|
||||
<Validation Validator="@ValidationRule.IsNotEmpty">
|
||||
<div class="connexion-container">
|
||||
|
||||
<Field>
|
||||
<TextEdit Placeholder="Pseudo" @bind-Text="@Requete.Nom">
|
||||
<h1 class="title-spacing"> Se connecter</h1>
|
||||
|
||||
|
||||
<Validations @ref="Validations" Mode="ValidationMode.Manual" Model="Requete">
|
||||
|
||||
<div class="field-container">
|
||||
<Validation>
|
||||
<Field Horizontal>
|
||||
<FieldLabel ColumnSize="ColumnSize.Is2">Pseudo</FieldLabel>
|
||||
<FieldBody ColumnSize="ColumnSize.Is10">
|
||||
<TextEdit Placeholder="Entrez votre pseudo" @bind-Text="@Requete.Nom">
|
||||
<Feedback>
|
||||
<ValidationError />
|
||||
</Feedback>
|
||||
</TextEdit>
|
||||
</FieldBody>
|
||||
</Field>
|
||||
</Validation>
|
||||
|
||||
<Validation Validator="@ValidationRule.IsNotEmpty">
|
||||
|
||||
<Field>
|
||||
<TextEdit Placeholder="Mot de passe" @bind-Text="@Requete.MotDePasse">
|
||||
</div>
|
||||
|
||||
<div class="field-container">
|
||||
<Validation>
|
||||
<Field Horizontal>
|
||||
<FieldLabel ColumnSize="ColumnSize.Is2">Mot de passe</FieldLabel>
|
||||
<FieldBody ColumnSize="ColumnSize.Is10">
|
||||
<TextEdit Placeholder="Entrez votre mot de passe" @bind-Text="@Requete.MotDePasse">
|
||||
<Feedback>
|
||||
<ValidationError />
|
||||
</Feedback>
|
||||
</TextEdit>
|
||||
</FieldBody>
|
||||
</Field>
|
||||
</Validation>
|
||||
</div>
|
||||
|
||||
<div class="btn-container">
|
||||
<Button Class="btn-se-connecter" Clicked="@OnSubmit">Se connecter</Button>
|
||||
<Button Class="btn-s-inscrire" Clicked="@OnSubmit">S'inscrire</Button>
|
||||
</div>
|
||||
|
||||
<Button Color="Color.Primary" Clicked="@OnSubmit">Connexion</Button>
|
||||
|
||||
<label class="text-danger">@Erreur</label>
|
||||
|
||||
</Validations>
|
||||
</Validations>
|
||||
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
.connexion-container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
|
||||
}
|
||||
|
||||
.field-container {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.textedit-container {
|
||||
border-radius: 20px;
|
||||
border: 1px solid black;
|
||||
width: 80%; /* Ajuste la largeur des champs de saisie */
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px; /* Ajoute de l'espace entre les boutons */
|
||||
}
|
||||
|
||||
.btn-se-connecter,
|
||||
.btn-s-inscrire {
|
||||
width: 150px; /* Ajuste la largeur des boutons */
|
||||
}
|
||||
|
||||
.title-spacing {
|
||||
margin-bottom: 20px; /* Ajoute plus d'espace entre le titre et les éléments suivants */
|
||||
}
|
||||
|
||||
.btn-se-connecter {
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-s-inscrire {
|
||||
background-color: grey;
|
||||
color: white;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
.centrer-composant {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.formulaire-connexion {
|
||||
width: 40%;
|
||||
/* border: 2px solid black;
|
||||
border-radius: 10px; */
|
||||
/* padding: 20px; */
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url('/ressources/images/fondPages/fondConnexion.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.4 MiB |
Loading…
Reference in new issue