Assassymfony
/
fukafukashita
4
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

improve ui for login and register

Browse Source
master
remrem 10 months ago
parent ea06ee4cfe
commit 8b0ed1c7c6
5 changed files with 88 additions and 128 deletions
Show Stats Download Patch File Download Diff File

54
public/css/components/login.css
Unescape View File

@ -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;
}

20
src/Form/RegistrationFormType.php
Unescape View File

@ -6,28 +6,32 @@ use App\Entity\Profil;
use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType; use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType; 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\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver; 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 class RegistrationFormType extends AbstractType
{ {
public function buildForm(FormBuilderInterface $builder, array $options): void public function buildForm(FormBuilderInterface $builder, array $options): void
{ {
$builder $builder
->add('name') ->add('name', TextType::class, [
->add('agreeTerms', CheckboxType::class, [ 'label' => 'Username'
'mapped' => false,
'invalid_message' => 'You should agree to our terms.',
]) ])
->add('plainPassword', PasswordType::class, [ ->add('plainPassword', PasswordType::class, [
'label' => 'Password',
'mapped' => false, 'mapped' => false,
'attr' => ['autocomplete' => 'new-password'], 'attr' => ['autocomplete' => 'new-password'],
'invalid_message' => 'Please enter a 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 public function configureOptions(OptionsResolver $resolver): void

64
templates/registration/register.html.twig
Unescape View File

@ -3,68 +3,16 @@
{% block title %}Register{% endblock %} {% block title %}Register{% endblock %}
{% block stylesheets %} {% block stylesheets %}
<style> <link rel="stylesheet" href="{{ asset('css/components/form.css') }}">
<link rel="stylesheet" href="{{ asset('css/components/login.css') }}">
.form-container {
background-color: #ffffff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
}
.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;
}
</style>
{% endblock %} {% endblock %}
{% form_theme registrationForm 'form/theme.html.twig' %}
{% block body %} {% block body %}
<div class="form-container" > <div class="form-container" >
<h1>Register</h1> <h1>Register</h1>
{{ form(registrationForm) }}
{{ form_errors(registrationForm) }} <a href="/login">or Log in</a>
{{ form_start(registrationForm) }}
{{ form_row(registrationForm.name) }}
{{ form_row(registrationForm.plainPassword, {
label: 'Password'
}) }}
{{ form_row(registrationForm.agreeTerms) }}
<button type="submit" class="btn">Register</button>
{{ form_end(registrationForm) }}
<a href="/login"> or Login </a>
</div> </div>
{% endblock %} {% endblock %}

78
templates/security/login.html.twig
Unescape View File

@ -3,53 +3,13 @@
{% block title %}Log in!{% endblock %} {% block title %}Log in!{% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/app.css') }}"> <link rel="stylesheet" href="{{ asset('css/components/form.css') }}">
<style> <link rel="stylesheet" href="{{ asset('css/components/login.css') }}">
.form-container {
background-color: #ffffff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
}
.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;
}
</style>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="form-container"> <div class="form-container">
<h1 class="h3 mb-3 font-weight-normal">Please Sign In</h1>
<form method="post"> <form method="post">
{% if error %} {% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div> <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
@ -60,27 +20,21 @@
You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a> You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
</div> </div>
{% endif %} {% endif %}
<div id="loginForm">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <div class="form-group">
<label for="username">Name</label> <label for="username">Name</label>
<input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus> <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
<label for="password">Password</label>
<input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
{#
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
<div class="checkbox mb-3">
<label>
<input type="checkbox" name="_remember_me"> Remember me
</label>
</div> </div>
#}
<button class="btn btn-lg btn-primary" type="submit">Sign in</button> <div class="form-group">
<label for="password">Password</label>
<input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
</div>
<div>
<button class="btn btn-lg btn-primary" type="submit">Sign in</button>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
</div>
</form> </form>
<a href="/register">Or Register</a> <a href="/register">Or Register</a>

BIN
var/data.db
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save