jolie beau
This commit is contained in:
Yasder5
parent
f663b33c77
commit
c5acb87ccb
6 changed files with 79 additions and 196 deletions
|
|
@ -91,7 +91,7 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main id="main-content" class="container my-4">
|
<main id="main-content" class="container my-4" {block name="display"}{/block}>
|
||||||
<section class="p-4 mb-4 text-center txt_title" aria-labelledby="page-title">
|
<section class="p-4 mb-4 text-center txt_title" aria-labelledby="page-title">
|
||||||
<div class="col-lg-8 mx-auto">
|
<div class="col-lg-8 mx-auto">
|
||||||
<h2 id="page-title" class="display-5 fw-semibold mb-3">
|
<h2 id="page-title" class="display-5 fw-semibold mb-3">
|
||||||
|
|
@ -107,5 +107,4 @@
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</body>
|
|
||||||
{include file="views/_partial/messages.tpl"}
|
{include file="views/_partial/messages.tpl"}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{extends file="views/layout.tpl"}
|
{extends file="views/layout.tpl"}
|
||||||
|
{block name="display" }style="display:none;"{/block}
|
||||||
{block name="content"}
|
{block name="content"}
|
||||||
<section class="container mt-5 p-5 d-flex flex-column align-items-center text-center">
|
<section class="container mt-5 p-5 d-flex flex-column align-items-center text-center">
|
||||||
<h1 class="logo">Folliow</h1>
|
<h1 class="logo">Folliow</h1>
|
||||||
|
|
|
||||||
|
|
@ -1,184 +0,0 @@
|
||||||
{extends file="views/layout.tpl"}
|
|
||||||
|
|
||||||
{block name="content"}
|
|
||||||
<main class="container py-5">
|
|
||||||
<div class="row justify-content-center position-relative">
|
|
||||||
<div class="col-12 col-md-10 col-lg-6">
|
|
||||||
<div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
|
|
||||||
<h1 class="h3 fw-bold mb-1">Inscription</h1>
|
|
||||||
<p class="text-secondary mb-4">Créez votre compte utilisateur.</p>
|
|
||||||
{if (isset($arrError) && count($arrError) > 0) }
|
|
||||||
<div class="alert alert-danger">
|
|
||||||
{foreach $arrError as $strError}
|
|
||||||
<p>{$strError}</p>
|
|
||||||
{/foreach}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<form method="POST">
|
|
||||||
<div class="row g-3">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="user_firstname">
|
|
||||||
Prénom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
id="user_firstname"
|
|
||||||
name="user_firstname"
|
|
||||||
required >
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="user_name">
|
|
||||||
Nom *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
id="user_name"
|
|
||||||
name="user_name"
|
|
||||||
required>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="user_pseudo">
|
|
||||||
Pseudo *
|
|
||||||
</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-text">@</span>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
id="user_pseudo"
|
|
||||||
name="user_pseudo"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champ : adresse e-mail -->
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="user_mail">
|
|
||||||
Adresse e-mail *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="email"
|
|
||||||
id="user_mail"
|
|
||||||
name="user_mail"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champ : mot de passe -->
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="user_password">
|
|
||||||
Mot de passe *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="password"
|
|
||||||
id="user_password"
|
|
||||||
name="user_password"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<div class="mt-2 small text-muted">
|
|
||||||
<p class="mb-1">Le mot de passe doit contenir :</p>
|
|
||||||
<ul class="mb-0 ps-3">
|
|
||||||
<li>Au moins <strong>15 caractères</strong></li>
|
|
||||||
<li>Au moins <strong>une lettre majuscule</strong></li>
|
|
||||||
<li>Au moins <strong>une lettre minuscule</strong></li>
|
|
||||||
<li>Au moins <strong>un chiffre</strong></li>
|
|
||||||
<li>Au moins <strong>un caractère spécial</strong> (# ? ! @ $ % ^ & * -)</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Champ : confirmer le mot de passe -->
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="pwd_confirm">
|
|
||||||
Confirmer le Mot de passe *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="password"
|
|
||||||
id="pwd_confirm"
|
|
||||||
name="pwd_confirm"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champ optionnel : numéro de téléphone -->
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="user_phone">
|
|
||||||
Téléphone
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
id="user_phone"
|
|
||||||
name="user_phone"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champ optionnel : profession de l'utilisateur -->
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="user_work">
|
|
||||||
Profession
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
id="user_work"
|
|
||||||
name="user_work"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champ optionnel : localisation de l'utilisateur -->
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="user_location">
|
|
||||||
Localisation
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
id="user_location"
|
|
||||||
name="user_location"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champ optionnel : phrase d'accroche -->
|
|
||||||
<div class="col-12">
|
|
||||||
<label class="form-label" for="user_description">
|
|
||||||
Phrase d'accroche
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
class="form-control"
|
|
||||||
id="user_description"
|
|
||||||
name="user_description"
|
|
||||||
rows="3"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bouton de soumission du formulaire -->
|
|
||||||
<div class="col-12 d-grid mt-2">
|
|
||||||
<button type="submit" class="btn btn-primary btn-lg rounded-3">
|
|
||||||
Créer mon compte
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Lien vers la page de connexion -->
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<small class="text-secondary">
|
|
||||||
Déjà un compte ?
|
|
||||||
<a href="{$smarty.env.BASE_URL}/user/login">Se connecter</a>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
{/block}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{include file="views/_partial/header.tpl"}
|
{include file="views/_partial/header.tpl"}
|
||||||
|
|
||||||
<main class="container mb-4 mt-1">
|
<main class="container mb-4 mt-1 flex-grow-1 d-flex flex-column align-items-center justify-content-center">
|
||||||
{block name="content"}
|
{block name="content"}
|
||||||
{/block}
|
{/block}
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
{extends file="views/layout.tpl"}
|
{extends file="views/layout.tpl"}
|
||||||
{block name="title" append} - Connexion{/block}
|
{block name="title" append} - Connexion{/block}
|
||||||
|
|
||||||
|
{block name="display" }style="display:none;"{/block}
|
||||||
{block name="content"}
|
{block name="content"}
|
||||||
<section aria-label="Se connecter">
|
<section aria-label="Se connecter">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
{extends file="views/layout.tpl"}
|
{extends file="views/layout.tpl"}
|
||||||
{block name="title" append} - Inscription{/block}
|
{block name="title" append} - Inscription{/block}
|
||||||
|
|
||||||
|
{block name="display" }style="display:none;"{/block}
|
||||||
{block name="content"}
|
{block name="content"}
|
||||||
<!-- Page : Inscription -->
|
<!-- Page : Inscription -->
|
||||||
<div class="py-5">
|
<div class="py-5">
|
||||||
|
|
@ -93,13 +94,33 @@
|
||||||
<label class="form-label" for="user_password">
|
<label class="form-label" for="user_password">
|
||||||
Mot de passe *
|
Mot de passe *
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div class="position-relative">
|
||||||
class="form-control"
|
<input
|
||||||
type="password"
|
class="form-control pe-5"
|
||||||
id="user_password"
|
type="password"
|
||||||
name="user_password"
|
id="user_password"
|
||||||
required
|
name="user_password"
|
||||||
>
|
required
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
|
||||||
|
type="button"
|
||||||
|
onclick="togglePassword('user_password', this)"
|
||||||
|
style="z-index: 10;"
|
||||||
|
>
|
||||||
|
<i class="fa-regular fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 small text-muted">
|
||||||
|
<p class="mb-1">Le mot de passe doit contenir :</p>
|
||||||
|
<ul class="mb-0 ps-3">
|
||||||
|
<li>Au moins <strong>15 caractères</strong></li>
|
||||||
|
<li>Au moins <strong>une lettre majuscule</strong></li>
|
||||||
|
<li>Au moins <strong>une lettre minuscule</strong></li>
|
||||||
|
<li>Au moins <strong>un chiffre</strong></li>
|
||||||
|
<li>Au moins <strong>un caractère spécial</strong> (# ? ! @ $ % ^ & * -)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Champ : confirmer le mot de passe -->
|
<!-- Champ : confirmer le mot de passe -->
|
||||||
|
|
@ -107,13 +128,22 @@
|
||||||
<label class="form-label" for="pwd_confirm">
|
<label class="form-label" for="pwd_confirm">
|
||||||
Confirmer le mot de passe *
|
Confirmer le mot de passe *
|
||||||
</label>
|
</label>
|
||||||
|
<div class="position-relative">
|
||||||
<input
|
<input
|
||||||
class="form-control"
|
class="form-control"
|
||||||
type="password"
|
type="password"
|
||||||
id="pwd_confirm"
|
id="pwd_confirm"
|
||||||
name="pwd_confirm"
|
name="pwd_confirm"
|
||||||
required
|
required
|
||||||
>
|
><button
|
||||||
|
class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
|
||||||
|
type="button"
|
||||||
|
onclick="togglePassword('pwd_confirm', this)"
|
||||||
|
style="z-index: 10;"
|
||||||
|
>
|
||||||
|
<i class="fa-regular fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Champ optionnel : numéro de téléphone -->
|
<!-- Champ optionnel : numéro de téléphone -->
|
||||||
|
|
@ -207,5 +237,42 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<script>
|
||||||
|
const pwd = document.getElementById('user_password');
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
length: { el: null, test: v => v.length >= 15 },
|
||||||
|
upper: { el: null, test: v => /[A-Z]/.test(v) },
|
||||||
|
lower: { el: null, test: v => /[a-z]/.test(v) },
|
||||||
|
digit: { el: null, test: v => /[0-9]/.test(v) },
|
||||||
|
special: { el: null, test: v => /[#?!@$%^&*\-]/.test(v) }
|
||||||
|
};
|
||||||
|
|
||||||
|
// Associe chaque règle à son <li> dans l'ordre du DOM
|
||||||
|
const items = pwd.closest('.col-12').querySelectorAll('ul li');
|
||||||
|
const keys = Object.keys(rules);
|
||||||
|
items.forEach((li, i) => rules[keys[i]].el = li);
|
||||||
|
|
||||||
|
pwd.addEventListener('input', () => {
|
||||||
|
const v = pwd.value;
|
||||||
|
keys.forEach(key => {
|
||||||
|
const { el, test } = rules[key];
|
||||||
|
el.classList.toggle('text-success', test(v));
|
||||||
|
el.classList.toggle('text-danger', !test(v));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function togglePassword(fieldId, btn) {
|
||||||
|
const input = document.getElementById(fieldId);
|
||||||
|
const icon = btn.querySelector('svg');
|
||||||
|
if (input.type === 'password') {
|
||||||
|
input.type = 'text';
|
||||||
|
icon.classList.replace('fa-eye', 'fa-eye-slash');
|
||||||
|
} else {
|
||||||
|
input.type = 'password';
|
||||||
|
icon.classList.replace('fa-eye-slash', 'fa-eye');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
{include file="views/_partial/apigeo.tpl"}
|
{include file="views/_partial/apigeo.tpl"}
|
||||||
{/block}
|
{/block}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue