Siwa12100
1 year ago
parent
3b524fa29e
commit
f87e565581
@ -1,33 +1,55 @@
|
|||||||
@using Blazorise.Components;
|
@using Blazorise.Components;
|
||||||
@using System.ComponentModel.DataAnnotations;
|
@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">
|
<div class="connexion-container">
|
||||||
<Validation Validator="@ValidationRule.IsNotEmpty">
|
|
||||||
|
|
||||||
<Field>
|
<h1 class="title-spacing"> Se connecter</h1>
|
||||||
<TextEdit Placeholder="Pseudo" @bind-Text="@Requete.Nom">
|
|
||||||
|
|
||||||
|
<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>
|
<Feedback>
|
||||||
<ValidationError />
|
<ValidationError />
|
||||||
</Feedback>
|
</Feedback>
|
||||||
</TextEdit>
|
</TextEdit>
|
||||||
|
</FieldBody>
|
||||||
</Field>
|
</Field>
|
||||||
</Validation>
|
</Validation>
|
||||||
|
</div>
|
||||||
<Validation Validator="@ValidationRule.IsNotEmpty">
|
|
||||||
|
<div class="field-container">
|
||||||
<Field>
|
<Validation>
|
||||||
<TextEdit Placeholder="Mot de passe" @bind-Text="@Requete.MotDePasse">
|
<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>
|
<Feedback>
|
||||||
<ValidationError />
|
<ValidationError />
|
||||||
</Feedback>
|
</Feedback>
|
||||||
</TextEdit>
|
</TextEdit>
|
||||||
|
</FieldBody>
|
||||||
</Field>
|
</Field>
|
||||||
</Validation>
|
</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>
|
<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