register working
This commit is contained in:
		
							parent
							
								
									6ffd02c467
								
							
						
					
					
						commit
						20d4bfd407
					
				@ -13,17 +13,24 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
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;
 | 
					    /* height: fit-content; */
 | 
				
			||||||
 | 
					    width: 100%;
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    flex-direction: column;
 | 
				
			||||||
 | 
					    align-items: center;
 | 
				
			||||||
 | 
					    justify-content: center;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/*fix symfony template style*/
 | 
					/*fix symfony template style*/
 | 
				
			||||||
 | 
				
			|||||||
@ -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')}}">Login</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 %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -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 %}
 | 
				
			||||||
 | 
				
			|||||||
@ -1,40 +1,23 @@
 | 
				
			|||||||
{% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
 | 
					{% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
 | 
				
			||||||
body %}
 | 
					body %}
 | 
				
			||||||
<style>
 | 
					<style>
 | 
				
			||||||
    main#login {
 | 
					    main#login > form {
 | 
				
			||||||
        padding: var(--size-max);
 | 
					 | 
				
			||||||
        display: flex;
 | 
					 | 
				
			||||||
        flex-direction: row;
 | 
					 | 
				
			||||||
        align-items: center;
 | 
					 | 
				
			||||||
        justify-content: center;
 | 
					 | 
				
			||||||
        gap: var(--size-max);
 | 
					 | 
				
			||||||
        & > hr {
 | 
					 | 
				
			||||||
            width: 2px;
 | 
					 | 
				
			||||||
            height: 250px;
 | 
					 | 
				
			||||||
            border: none;
 | 
					 | 
				
			||||||
            background: var(--dark);
 | 
					 | 
				
			||||||
            border-radius: var(--radius);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    main#login > section > form {
 | 
					 | 
				
			||||||
        display: flex;
 | 
					        display: flex;
 | 
				
			||||||
        flex-direction: column;
 | 
					        flex-direction: column;
 | 
				
			||||||
        gap: var(--size-max);
 | 
					        gap: var(--size-max);
 | 
				
			||||||
 | 
					        justify-content: center;
 | 
				
			||||||
 | 
					        align-items: center;
 | 
				
			||||||
        min-width: 300px;
 | 
					        min-width: 300px;
 | 
				
			||||||
 | 
					        max-width: 10rem;
 | 
				
			||||||
 | 
					        justify-content: center;
 | 
				
			||||||
        align-items: center;
 | 
					        align-items: center;
 | 
				
			||||||
        & > label {
 | 
					        & > label {
 | 
				
			||||||
            display: none;
 | 
					            display: none;
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
        &
 | 
					        & > :is(input[type="text"], input[type="password"]) {
 | 
				
			||||||
            > :is(
 | 
					 | 
				
			||||||
                input[type="text"],
 | 
					 | 
				
			||||||
                input[type="email"],
 | 
					 | 
				
			||||||
                input[type="password"]
 | 
					 | 
				
			||||||
            ) {
 | 
					 | 
				
			||||||
            height: var(--size-max);
 | 
					            height: var(--size-max);
 | 
				
			||||||
            border-radius: var(--radius);
 | 
					            border-radius: var(--radius);
 | 
				
			||||||
            padding: var(--size-max);
 | 
					            padding: calc(var(--size-max) / 2) var(--size-max);
 | 
				
			||||||
            border: none;
 | 
					            border: none;
 | 
				
			||||||
            background: var(--grey);
 | 
					            background: var(--grey);
 | 
				
			||||||
            width: 80%;
 | 
					            width: 80%;
 | 
				
			||||||
@ -69,7 +52,7 @@ body %}
 | 
				
			|||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
        {% endif %}
 | 
					        {% endif %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <h1 class="h3 font-weight-normal mb-3">Please sign in</h1>
 | 
					        <h2>Login</h2>
 | 
				
			||||||
        <label for="username">Username</label>
 | 
					        <label for="username">Username</label>
 | 
				
			||||||
        <input
 | 
					        <input
 | 
				
			||||||
            type="text"
 | 
					            type="text"
 | 
				
			||||||
@ -78,6 +61,7 @@ body %}
 | 
				
			|||||||
            id="username"
 | 
					            id="username"
 | 
				
			||||||
            class="form-control"
 | 
					            class="form-control"
 | 
				
			||||||
            autocomplete="username"
 | 
					            autocomplete="username"
 | 
				
			||||||
 | 
					            placeholder="Username"
 | 
				
			||||||
            required
 | 
					            required
 | 
				
			||||||
            autofocus
 | 
					            autofocus
 | 
				
			||||||
        />
 | 
					        />
 | 
				
			||||||
@ -88,6 +72,7 @@ body %}
 | 
				
			|||||||
            id="password"
 | 
					            id="password"
 | 
				
			||||||
            class="form-control"
 | 
					            class="form-control"
 | 
				
			||||||
            autocomplete="current-password"
 | 
					            autocomplete="current-password"
 | 
				
			||||||
 | 
					            placeholder="Password"
 | 
				
			||||||
            required
 | 
					            required
 | 
				
			||||||
        />
 | 
					        />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -108,7 +93,11 @@ body %}
 | 
				
			|||||||
        </div>
 | 
					        </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>
 | 
					    </form>
 | 
				
			||||||
</main>
 | 
					</main>
 | 
				
			||||||
{% endblock %}
 | 
					{% endblock %}
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user