Merge branch 'main' of gitpro:ThomasRubini/ProjetSymfony

2024-02-22 10:05:38 +00:00 · 2024-02-22 10:05:38 +00:00 · 9d7daa65da
commit 9d7daa65da
parent 2aa986ab85 20d4bfd407
4 changed files with 205 additions and 62 deletions
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@ -1,24 +1,36 @@
 * {
    margin: 0;
    padding: 0;
-    font-family: 'Kulim Park', sans-serif;
-    --background: hsl(200, 5%, 15%);
-    --accent: hsl(15, 70%, 98%);
+    font-family: "Kulim Park", sans-serif;
+    --dark: hsl(200, 5%, 15%);
+    --light: hsl(15, 70%, 98%);
+    --grey: hsl(15, 6%, 92%);
    --radius: 8px;
+    --size-max: 20px;
+    --shadow: 0 0 0 1px var(--dark);
+    --shadow-hover: 0 0 0 2px var(--dark);
 }

 a {
    color: inherit;
-    text-decoration: none;
    transition: all ease-out 0.3s;
    &:hover {
        font-weight: 700;
    }
+    &.no-style {
+        text-decoration: none;
+    }
 }

 /*Main content (between header and footer)*/
 body > main {
    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*/
@ -34,8 +46,8 @@ header {

    padding: 0.75rem;

-    background-color: var(--background);
-    color: var(--accent);
+    background-color: var(--dark);
+    color: var(--light);
    height: 2rem;
 }

@ -45,23 +57,23 @@ header > form {
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
-    border: solid 2px var(--accent);
+    border: solid 2px var(--light);
    border-radius: var(--radius);

-    &>input[type=text]{
+    & > input[type="text"] {
        border: none;
        outline: none;
        background: none;
-        color: var(--accent);
+        color: var(--light);
    }
    & label > img {
        width: 20px;
        height: 20px;
        cursor: pointer;
        padding-top: 1px;
-        padding-bottom: -1px
+        padding-bottom: -1px;
    }
-    & input[type=submit]{
+    & input[type="submit"] {
        display: none;
    }
 }
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@ -16,7 +16,7 @@
    <body>
        {% block header %}
        <header>
-            <a href="{{url('index')}}">Frutti</a>
+            <a class="no-style" href="{{url('index')}}">Frutti</a>
            <form action="{{url('app_search')}}" method="get">
                <input type="text" name="q" id="q" placeholder="Search" />
                <select name="fruit" id="fruit">
@ -41,7 +41,10 @@
                    <img src="{{ asset('/styles/search.svg') }}" alt="Search" />
                </label>
            </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>
        {% endblock %}

--- a/templates/registration/register.html.twig
+++ b/templates/registration/register.html.twig
@ -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) }}

-        <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) }}
+</main>
 {% endblock %}
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@ -1,42 +1,103 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}Log in!{% endblock %}
-
-{% block body %}
+{% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
+body %}
+<style>
+    main#login > 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 {
+            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">
        {% if error %}
-            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
-        {% endif %}
-
-        {% if app.user %}
+        <div class="alert alert-danger">
+            {{ error.messageKey|trans(error.messageData, 'security') }}
+        </div>
+        {% endif %} {% if app.user %}
        <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>
        {% endif %}

-        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+        <h2>Login</h2>
        <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>
-        <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') }}"
-        >
+        />

-        {#
-            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
+        {# 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
+                <input type="checkbox" name="_remember_me" /> Remember me
            </label>
        </div>
        #}

-        <button class="btn btn-lg btn-primary" type="submit">
-            Sign in
-        </button>
+        <input type="submit" value="Sign in" />
+        <p>
+            If you don't have an account:
+            <a href="{{url('app_register')}}">register</a>.
+        </p>
    </form>
+</main>
 {% endblock %}