design login page
This commit is contained in:
Chneemann
parent
87ce212451
commit
f0ff72a1b1
8 changed files with 282 additions and 3 deletions
|
|
@ -1 +1,78 @@
|
||||||
<p>login works!</p>
|
<section>
|
||||||
|
<img class="logo" src="./../../../assets/img/login/logo.svg" alt="" />
|
||||||
|
<div class="register">
|
||||||
|
<p>Not a Join user?</p>
|
||||||
|
<button onclick="loadSignupPage()">Sign up</button>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
id="form"
|
||||||
|
#taskForm="ngForm"
|
||||||
|
(ngSubmit)="onSubmit(taskForm)"
|
||||||
|
onsubmit="return false"
|
||||||
|
>
|
||||||
|
<div class="content">
|
||||||
|
<p>Log in</p>
|
||||||
|
<img src="./../../../assets/img/login/blue-line.svg" alt="" />
|
||||||
|
<div class="input-fields">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="mail"
|
||||||
|
name="mail"
|
||||||
|
#mail="ngModel"
|
||||||
|
placeholder="Email"
|
||||||
|
class="custom-input"
|
||||||
|
[(ngModel)]="loginData.mail"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="custom-img"
|
||||||
|
src="./../../../assets/img/login/mail.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="error-msg">
|
||||||
|
@if (!mail.valid && mail.touched) {
|
||||||
|
<p>You must enter a mail.</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
#password="ngModel"
|
||||||
|
placeholder="Password"
|
||||||
|
class="custom-input"
|
||||||
|
[(ngModel)]="loginData.password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="custom-img"
|
||||||
|
src="./../../../assets/img/login/lock.svg"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="error-msg">
|
||||||
|
@if (!password.valid && password.touched) {
|
||||||
|
<p>You must enter a password.</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-buttons">
|
||||||
|
<app-form-btn
|
||||||
|
[class]="'btn-login'"
|
||||||
|
[type]="'submit'"
|
||||||
|
[value]="'Log in'"
|
||||||
|
[disabled]="
|
||||||
|
mail.invalid ||
|
||||||
|
!loginData.mail ||
|
||||||
|
password.invalid ||
|
||||||
|
!loginData.password
|
||||||
|
"
|
||||||
|
></app-form-btn>
|
||||||
|
<app-form-btn
|
||||||
|
[class]="'btn-guest-login'"
|
||||||
|
[type]="'button'"
|
||||||
|
[value]="'Guest Log in'"
|
||||||
|
></app-form-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
section {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
position: absolute;
|
||||||
|
left: 57px;
|
||||||
|
top: 60px;
|
||||||
|
height: 100px;
|
||||||
|
width: 122px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register {
|
||||||
|
position: absolute;
|
||||||
|
top: 67px;
|
||||||
|
right: 100px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
p {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 32px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--dark-blue);
|
||||||
|
color: var(--white);
|
||||||
|
width: 91px;
|
||||||
|
height: 49px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
border: 0px;
|
||||||
|
transition: 125ms ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
background-color: var(--light-blue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// LOGIN
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
right: 50%;
|
||||||
|
transform: translate(50%, -50%);
|
||||||
|
width: 422px;
|
||||||
|
height: 397px;
|
||||||
|
background: var(--white);
|
||||||
|
box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 48px 115px;
|
||||||
|
p {
|
||||||
|
font-size: 61px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
padding: 12px 0 24px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-fields {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
.custom-input::-webkit-contacts-auto-fill-button {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.custom-input {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--light-gray);
|
||||||
|
padding: 12px 21px;
|
||||||
|
}
|
||||||
|
.custom-img {
|
||||||
|
&:nth-child(2) {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
&:nth-child(5) {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 88px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.custom-input:focus + .custom-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-msg {
|
||||||
|
height: 24px;
|
||||||
|
padding: 6px;
|
||||||
|
p {
|
||||||
|
color: var(--red);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,23 @@
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { FormsModule, NgForm } from '@angular/forms';
|
||||||
|
import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-login',
|
selector: 'app-login',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [],
|
imports: [FormsModule, CommonModule, FormBtnComponent],
|
||||||
templateUrl: './login.component.html',
|
templateUrl: './login.component.html',
|
||||||
styleUrl: './login.component.scss'
|
styleUrl: './login.component.scss',
|
||||||
})
|
})
|
||||||
export class LoginComponent {
|
export class LoginComponent {
|
||||||
|
loginData = {
|
||||||
|
mail: '',
|
||||||
|
password: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
onSubmit(ngForm: NgForm) {
|
||||||
|
if (ngForm.submitted && ngForm.form.valid) {
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-login {
|
||||||
|
width: fit-content;
|
||||||
|
padding: 12px 18px;
|
||||||
|
margin: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--black) !important;
|
||||||
|
background-color: var(--light-gray);
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: 700;
|
||||||
|
transition: 125ms ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
background-color: var(--light-blue) !important;
|
||||||
|
border: 1px solid var(--light-blue) !important;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&:not(:disabled) {
|
||||||
|
background-color: var(--very-dark-blue) !important;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-guest-login {
|
||||||
|
width: fit-content;
|
||||||
|
padding: 12px 18px;
|
||||||
|
margin: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--black);
|
||||||
|
background-color: var(--white);
|
||||||
|
border: 1px solid var(--black);
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: 700;
|
||||||
|
transition: 125ms ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: var(--light-blue);
|
||||||
|
border-color: var(--light-bluek);
|
||||||
|
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -96,4 +141,12 @@
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-login,
|
||||||
|
.btn-guest-login {
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin: 6px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3
src/assets/img/login/blue-line.svg
Normal file
3
src/assets/img/login/blue-line.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="154" height="3" viewBox="0 0 154 3" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M152 1.5L2 1.5" stroke="#29ABE2" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 187 B |
3
src/assets/img/login/lock.svg
Normal file
3
src/assets/img/login/lock.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2 21.5C1.45 21.5 0.979167 21.3042 0.5875 20.9125C0.195833 20.5208 0 20.05 0 19.5V9.5C0 8.95 0.195833 8.47917 0.5875 8.0875C0.979167 7.69583 1.45 7.5 2 7.5H3V5.5C3 4.11667 3.4875 2.9375 4.4625 1.9625C5.4375 0.9875 6.61667 0.5 8 0.5C9.38333 0.5 10.5625 0.9875 11.5375 1.9625C12.5125 2.9375 13 4.11667 13 5.5V7.5H14C14.55 7.5 15.0208 7.69583 15.4125 8.0875C15.8042 8.47917 16 8.95 16 9.5V19.5C16 20.05 15.8042 20.5208 15.4125 20.9125C15.0208 21.3042 14.55 21.5 14 21.5H2ZM2 19.5H14V9.5H2V19.5ZM8 16.5C8.55 16.5 9.02083 16.3042 9.4125 15.9125C9.80417 15.5208 10 15.05 10 14.5C10 13.95 9.80417 13.4792 9.4125 13.0875C9.02083 12.6958 8.55 12.5 8 12.5C7.45 12.5 6.97917 12.6958 6.5875 13.0875C6.19583 13.4792 6 13.95 6 14.5C6 15.05 6.19583 15.5208 6.5875 15.9125C6.97917 16.3042 7.45 16.5 8 16.5ZM5 7.5H11V5.5C11 4.66667 10.7083 3.95833 10.125 3.375C9.54167 2.79167 8.83333 2.5 8 2.5C7.16667 2.5 6.45833 2.79167 5.875 3.375C5.29167 3.95833 5 4.66667 5 5.5V7.5Z" fill="#A8A8A8"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
8
src/assets/img/login/logo.svg
Normal file
8
src/assets/img/login/logo.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="101" height="122" viewBox="0 0 101 122" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M71.6721 0H49.5143V25.4923H71.6721V0Z" fill="#2A3647"/>
|
||||||
|
<path d="M49.5142 46.2251H71.6721V82.1779C71.7733 90.8292 69.3112 99.3153 64.5986 106.557C59.9455 113.594 50.963 121.966 34.3446 121.966C16.2434 121.966 5.69286 113.406 0 108.715L13.9765 91.4743C19.533 96.0112 24.885 99.7435 34.4299 99.7435C41.6567 99.7435 44.5372 96.7988 46.2247 94.2307C48.5186 90.6637 49.7052 86.4923 49.6335 82.2464L49.5142 46.2251Z" fill="#2A3647"/>
|
||||||
|
<path d="M38.2137 30.1318H16.0559V52.3884H38.2137V30.1318Z" fill="#29ABE2"/>
|
||||||
|
<path d="M83.2793 111.522C83.2793 116.265 80.8761 118.815 77.5183 118.815C74.1605 118.815 71.9618 115.785 71.9618 111.762C71.9618 107.739 74.2287 104.554 77.7058 104.554C81.1829 104.554 83.2793 107.687 83.2793 111.522ZM74.5355 111.711C74.5355 114.57 75.6775 116.675 77.6376 116.675C79.5977 116.675 80.7056 114.45 80.7056 111.539C80.7056 108.988 79.6829 106.592 77.6376 106.592C75.5923 106.592 74.5355 108.903 74.5355 111.711Z" fill="#2A3647"/>
|
||||||
|
<path d="M87.6768 104.76V118.593H85.2224V104.76H87.6768Z" fill="#2A3647"/>
|
||||||
|
<path d="M90.3358 118.593V104.76H93.0629L95.9946 110.461C96.7493 111.952 97.4207 113.483 98.0058 115.049C97.8524 113.337 97.7843 111.368 97.7843 109.177V104.76H100.034V118.593H97.4945L94.5288 112.772C93.7436 111.243 93.0437 109.671 92.4323 108.064C92.4323 109.776 92.5516 111.711 92.5516 114.09V118.576L90.3358 118.593Z" fill="#2A3647"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
3
src/assets/img/login/mail.svg
Normal file
3
src/assets/img/login/mail.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2 16.5C1.45 16.5 0.979167 16.3042 0.5875 15.9125C0.195833 15.5208 0 15.05 0 14.5V2.5C0 1.95 0.195833 1.47917 0.5875 1.0875C0.979167 0.695833 1.45 0.5 2 0.5H18C18.55 0.5 19.0208 0.695833 19.4125 1.0875C19.8042 1.47917 20 1.95 20 2.5V14.5C20 15.05 19.8042 15.5208 19.4125 15.9125C19.0208 16.3042 18.55 16.5 18 16.5H2ZM18 4.5L10.525 9.175C10.4417 9.225 10.3542 9.2625 10.2625 9.2875C10.1708 9.3125 10.0833 9.325 10 9.325C9.91667 9.325 9.82917 9.3125 9.7375 9.2875C9.64583 9.2625 9.55833 9.225 9.475 9.175L2 4.5V14.5H18V4.5ZM10 7.5L18 2.5H2L10 7.5ZM2 4.75V3.275V3.3V3.2875V4.75Z" fill="#A8A8A8"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 706 B |
Loading…
Reference in a new issue