DjalimSimaila/Projet-Symfony
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of gitpro:ThomasRubini/ProjetSymfony

Browse Source
This commit is contained in:
Djalim Simaila 2024-02-22 10:05:38 +00:00
commit 9d7daa65da
4 changed files with 205 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
assets/styles/app.css
View File

@ -1,24 +1,36 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Kulim Park', sans-serif; font-family: "Kulim Park", sans-serif;
--background: hsl(200, 5%, 15%); --dark: hsl(200, 5%, 15%);
--accent: hsl(15, 70%, 98%); --light: hsl(15, 70%, 98%);
--grey: hsl(15, 6%, 92%);
--radius: 8px; --radius: 8px;
--size-max: 20px;
--shadow: 0 0 0 1px var(--dark);
--shadow-hover: 0 0 0 2px var(--dark);
} }
a { a {
color: inherit; color: inherit;
text-decoration: none;
transition: all ease-out 0.3s; transition: all ease-out 0.3s;
&:hover { &:hover {
font-weight: 700; font-weight: 700;
} }
&.no-style {
text-decoration: none;
}
} }
/*Main content (between header and footer)*/ /*Main content (between header and footer)*/
body > main { body > main {
min-height: calc(100vh - ((2rem + 2 * 0.75rem) + 6rem)); min-height: calc(100vh - ((2rem + 2 * 0.75rem) + 6rem));
/* height: fit-content; */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
/*fix symfony template style*/ /*fix symfony template style*/
@ -34,8 +46,8 @@ header {
padding: 0.75rem; padding: 0.75rem;
background-color: var(--background); background-color: var(--dark);
color: var(--accent); color: var(--light);
height: 2rem; height: 2rem;
} }
@ -45,23 +57,23 @@ header > form {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 2px 8px; padding: 2px 8px;
border: solid 2px var(--accent); border: solid 2px var(--light);
border-radius: var(--radius); border-radius: var(--radius);
&>input[type=text]{ & > input[type="text"] {
border: none; border: none;
outline: none; outline: none;
background: none; background: none;
color: var(--accent); color: var(--light);
} }
& label > img { & label > img {
width: 20px; width: 20px;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
padding-top: 1px; padding-top: 1px;
padding-bottom: -1px padding-bottom: -1px;
} }
& input[type=submit]{ & input[type="submit"] {
display: none; display: none;
} }
} }

7
templates/base.html.twig
View File

@ -16,7 +16,7 @@
<body> <body>
{% block header %} {% block header %}
<header> <header>
<a href="{{url('index')}}">Frutti</a> <a class="no-style" href="{{url('index')}}">Frutti</a>
<form action="{{url('app_search')}}" method="get"> <form action="{{url('app_search')}}" method="get">
<input type="text" name="q" id="q" placeholder="Search" /> <input type="text" name="q" id="q" placeholder="Search" />
<select name="fruit" id="fruit"> <select name="fruit" id="fruit">
@ -41,7 +41,10 @@
<img src="{{ asset('/styles/search.svg') }}" alt="Search" /> <img src="{{ asset('/styles/search.svg') }}" alt="Search" />
</label> </label>
</form> </form>
<a href="{{url('app_login')}}" class="button-link">Connect</a> <div>
<a class="no-style" href="{{url('app_register')}}">Register</a>
<a class="no-style" href="{{url('app_login')}}">Login</a>
</div>
</header> </header>
{% endblock %} {% endblock %}

93
templates/registration/register.html.twig
View File

@ -1,19 +1,86 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %} {% block title %}Register{% endblock %} {% block
body %}
<style>
main#register > form {
display: flex;
flex-direction: column;
gap: var(--size-max);
justify-content: center;
align-items: center;
min-width: 300px;
max-width: 10rem;
justify-content: center;
align-items: center;
& > label:not(label[for="registration_form_agreeTerms"]) {
display: none;
}
& > :is(input[type="text"], input[type="password"]) {
height: var(--size-max);
border-radius: var(--radius);
padding: calc(var(--size-max) / 2) var(--size-max);
border: none;
background: var(--grey);
width: 80%;
}
& > input[type="submit"] {
cursor: pointer;
background: var(--light);
border: none;
border-radius: var(--radius);
box-shadow: var(--shadow);
color: var(--dark);
padding: calc(var(--size-max) - 8px) 0;
width: 70%;
height: 20%;
transition: all ease-out 0.2s;
&:hover {
box-shadow: var(--shadow-hover);
}
}
}
</style>
<main id="register">
{{ form_start(registrationForm) }} {% if app.user %}
<div class="mb-3">
You are logged in as {{ app.user.userIdentifier }},
<a href="{{ path('app_logout') }}">Logout</a>
</div>
{% endif %}
{% block title %}Register{% endblock %} <h2>Register</h2>
{{ form_errors(registrationForm.username) }}
<label for="username">Username</label>
<input
type="text"
name="{{field_name(registrationForm.username)}}"
value="{{field_value(registrationForm.username)}}"
id="username"
class="form-control"
autocomplete="username"
placeholder="Username"
max-length="180"
required
autofocus
/>
{{ form_errors(registrationForm.plainPassword) }}
<label for="password">Password</label>
<input
type="password"
name="{{field_name(registrationForm.plainPassword)}}"
class="form-control"
autocomplete="new-password"
placeholder="Password"
required
/>
{% block body %}
<h1>Register</h1>
{{ form_errors(registrationForm) }}
{{ form_start(registrationForm) }}
{{ form_row(registrationForm.username) }}
{{ form_row(registrationForm.plainPassword, {
label: 'Password'
}) }}
{{ form_row(registrationForm.agreeTerms) }} {{ form_row(registrationForm.agreeTerms) }}
<button type="submit" class="btn">Register</button> <input type="submit" value="Register" />
<p>
If you don't have an account:
<a href="{{url('app_register')}}">register</a>.
</p>
{{ form_end(registrationForm) }} {{ form_end(registrationForm) }}
</main>
{% endblock %} {% endblock %}

105
templates/security/login.html.twig
View File

@ -1,42 +1,103 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
body %}
{% block title %}Log in!{% endblock %} <style>
main#login > form {
{% block body %} display: flex;
flex-direction: column;
gap: var(--size-max);
justify-content: center;
align-items: center;
min-width: 300px;
max-width: 10rem;
justify-content: center;
align-items: center;
& > label {
display: none;
}
& > :is(input[type="text"], input[type="password"]) {
height: var(--size-max);
border-radius: var(--radius);
padding: calc(var(--size-max) / 2) var(--size-max);
border: none;
background: var(--grey);
width: 80%;
}
& > input[type="submit"] {
cursor: pointer;
background: var(--light);
border: none;
border-radius: var(--radius);
box-shadow: var(--shadow);
color: var(--dark);
padding: calc(var(--size-max) - 8px) 0;
width: 70%;
height: 20%;
transition: all ease-out 0.2s;
&:hover {
box-shadow: var(--shadow-hover);
}
}
}
</style>
<main id="login">
<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">
{% endif %} {{ error.messageKey|trans(error.messageData, 'security') }}
</div>
{% if app.user %} {% endif %} {% if app.user %}
<div class="mb-3"> <div class="mb-3">
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 %}
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <h2>Login</h2>
<label for="username">Username</label> <label for="username">Username</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"
placeholder="Username"
required
autofocus
/>
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" autocomplete="current-password" required> <input
type="password"
name="password"
id="password"
class="form-control"
autocomplete="current-password"
placeholder="Password"
required
/>
<input type="hidden" name="_csrf_token" <input
type="hidden"
name="_csrf_token"
value="{{ csrf_token('authenticate') }}" value="{{ csrf_token('authenticate') }}"
> />
{# {# Uncomment this section and add a remember_me option below your
Uncomment this section and add a remember_me option below your firewall to activate remember me functionality. firewall to activate remember me functionality. See
See https://symfony.com/doc/current/security/remember_me.html https://symfony.com/doc/current/security/remember_me.html
<div class="checkbox mb-3"> <div class="checkbox mb-3">
<label> <label>
<input type="checkbox" name="_remember_me"> Remember me <input type="checkbox" name="_remember_me" /> Remember me
</label> </label>
</div> </div>
#} #}
<button class="btn btn-lg btn-primary" type="submit"> <input type="submit" value="Sign in" />
Sign in <p>
</button> If you don't have an account:
<a href="{{url('app_register')}}">register</a>.
</p>
</form> </form>
</main>
{% endblock %} {% endblock %}