From 8b0ed1c7c6e1d8182e5fa53a1864087c8bccdd9c Mon Sep 17 00:00:00 2001 From: rem Date: Fri, 14 Jun 2024 11:24:52 +0200 Subject: [PATCH] improve ui for login and register --- public/css/components/login.css | 54 +++++++++++++++ src/Form/RegistrationFormType.php | 20 +++--- templates/registration/register.html.twig | 64 ++---------------- templates/security/login.html.twig | 78 +++++----------------- var/data.db | Bin 114688 -> 114688 bytes 5 files changed, 88 insertions(+), 128 deletions(-) create mode 100644 public/css/components/login.css diff --git a/public/css/components/login.css b/public/css/components/login.css new file mode 100644 index 0000000..3802a53 --- /dev/null +++ b/public/css/components/login.css @@ -0,0 +1,54 @@ +.form-container { + background-color: #f2f2f2; + padding: 2rem; + border-radius: 8px; + width: 30%; + text-align: center; + margin: 0 auto; + margin-top: 15vh; + + form { + div { + .form-group { + display: flex; + flex-direction: column; + align-items: start !important; + } + + button[type="submit"] { + width: 100%; + } + } + } +} + +.form-container h1 { + margin-bottom: 1.5rem; +} + +.form-container .btn { + margin-top: 1rem; + width: 100%; + padding: 0.5rem; + border: none; + background-color: #007bff; + color: #ffffff; + border-radius: 4px; + cursor: pointer; + +} + +.form-container .btn:hover { + background-color: #0056b3; +} + +.form-container a { + display: block; + margin-top: 1rem; + color: #007bff; + text-decoration: none; +} + +.form-container a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/src/Form/RegistrationFormType.php b/src/Form/RegistrationFormType.php index 9a657ba..781c954 100644 --- a/src/Form/RegistrationFormType.php +++ b/src/Form/RegistrationFormType.php @@ -6,28 +6,32 @@ use App\Entity\Profil; use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\Extension\Core\Type\CheckboxType; use Symfony\Component\Form\Extension\Core\Type\PasswordType; +use Symfony\Component\Form\Extension\Core\Type\SubmitType; +use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\OptionsResolver\OptionsResolver; -use Symfony\Component\Validator\Constraints\IsTrue; -use Symfony\Component\Validator\Constraints\Length; -use Symfony\Component\Validator\Constraints\NotBlank; class RegistrationFormType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options): void { $builder - ->add('name') - ->add('agreeTerms', CheckboxType::class, [ - 'mapped' => false, - 'invalid_message' => 'You should agree to our terms.', + ->add('name', TextType::class, [ + 'label' => 'Username' ]) ->add('plainPassword', PasswordType::class, [ + 'label' => 'Password', 'mapped' => false, 'attr' => ['autocomplete' => 'new-password'], 'invalid_message' => 'Please enter a password', ]) - ; + ->add('agreeTerms', CheckboxType::class, [ + 'mapped' => false, + 'invalid_message' => 'You should agree to our terms.', + ]) + ->add('submit', SubmitType::class, [ + 'label' => 'Register' + ]); } public function configureOptions(OptionsResolver $resolver): void diff --git a/templates/registration/register.html.twig b/templates/registration/register.html.twig index 85f079f..990d4c9 100644 --- a/templates/registration/register.html.twig +++ b/templates/registration/register.html.twig @@ -3,68 +3,16 @@ {% block title %}Register{% endblock %} {% block stylesheets %} - + + {% endblock %} +{% form_theme registrationForm 'form/theme.html.twig' %} + {% block body %}

Register

- - {{ form_errors(registrationForm) }} - - {{ form_start(registrationForm) }} - {{ form_row(registrationForm.name) }} - {{ form_row(registrationForm.plainPassword, { - label: 'Password' - }) }} - {{ form_row(registrationForm.agreeTerms) }} - - - {{ form_end(registrationForm) }} - - or Login + {{ form(registrationForm) }} + or Log in
{% endblock %} diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig index c2ba957..3424d8f 100644 --- a/templates/security/login.html.twig +++ b/templates/security/login.html.twig @@ -3,53 +3,13 @@ {% block title %}Log in!{% endblock %} {% block stylesheets %} - - + + {% endblock %} {% block body %}
+

Please Sign In

{% if error %}
{{ error.messageKey|trans(error.messageData, 'security') }}
@@ -60,27 +20,21 @@ You are logged in as {{ app.user.userIdentifier }}, Logout
{% endif %} - -

Please sign in

- - - - - - - - {# - Uncomment this section and add a remember_me option below your firewall to activate remember me functionality. - See https://symfony.com/doc/current/security/remember_me.html - -
- +
+
+ +
- #} - +
+ + +
+
+ +
+ +
Or Register diff --git a/var/data.db b/var/data.db index 30fbbfc2e3d6b26690c4671d7483f82db2e377d8..a20c961c5c88c9bc77991e2d871e6407cd849778 100644 GIT binary patch delta 577 zcmX|7O=uHA7~R>~A2(*^wO%AqFouALqD^zKQbNVHmKHU3YcwiiN@;2^X_{D+6c5R@ zr~VuwNWIvD9z^0+MFkPT3Svc2q@fzcl7m{PX!W3i&ThqFcmvyylVAuaFl@cQI1R5R}o(cK5j77`~!8E4u5^pghEFKD@dnj4{ z_;nb%h*hXTyw-eXd%RBNEfTK6AM8yXimK zn;I53(3lSdLxFUDuwf+9dAKW^JCKNU>}~Dp?@sMFc&0CU{^&@)DH05tvE$Kf!VD#L z?=zcvlF4JC4y#m6lR6C*3E!|J3f1rq6{~*eG2Dtyi9r=jpgdVy-Xv&qk|^^EUonSI zSg`7ScfmD<7=-H1BWsfjf3~jreZ~*r^#v8w9KU9JD^#~p)@)Q%yS3tssWX=CO}GST ys7m;SDwgq4Bz_kLPvN)et9sR;J5t$^QrZ60ZuWqYMz|p5k##-n|Bpe={oF0zOI0+$D z<`RuEC!LB$#wJ3lh7}^PKyZ(1?BNWTIKny>v5gHZU={C}Gu(k=v^mPr|4|vGR;Pv& zGp;Kr;K~eSkxA7CU4|!^fz|d08&{EzpyV=5u!ceTDbv!Qi_c0UeG{fOjv~Pe9?hnr zQ8RUcRPm{~iX%_VqtAxDv=2S$NaerUf6xcKq4bNkmcQUCXI4{9%UD?z#cbvpJ_tvF q?Aq+~9D2Z-x}8_+)e2C7l?u$tuu67ZR3zCFS90+KzI(bwJ=Ncd$Yg&2