diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 147cfc4..572489a 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1 +1,78 @@ -

login works!

+
+ +
+

Not a Join user?

+ +
+
+
+

Log in

+ +
+ + +
+ @if (!mail.valid && mail.touched) { +

You must enter a mail.

+ } +
+ + +
+ @if (!password.valid && password.touched) { +

You must enter a password.

+ } +
+
+
+ + +
+
+
+
diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss index e69de29..2891bcc 100644 --- a/src/app/components/login/login.component.scss +++ b/src/app/components/login/login.component.scss @@ -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; +} diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index 2967c55..dfbbb99 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login/login.component.ts @@ -1,12 +1,23 @@ +import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; +import { FormsModule, NgForm } from '@angular/forms'; +import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component'; @Component({ selector: 'app-login', standalone: true, - imports: [], + imports: [FormsModule, CommonModule, FormBtnComponent], templateUrl: './login.component.html', - styleUrl: './login.component.scss' + styleUrl: './login.component.scss', }) export class LoginComponent { + loginData = { + mail: '', + password: '', + }; + onSubmit(ngForm: NgForm) { + if (ngForm.submitted && ngForm.form.valid) { + } + } } diff --git a/src/app/shared/components/buttons/form-btn/form-btn.component.scss b/src/app/shared/components/buttons/form-btn/form-btn.component.scss index fdce542..ca20668 100644 --- a/src/app/shared/components/buttons/form-btn/form-btn.component.scss +++ b/src/app/shared/components/buttons/form-btn/form-btn.component.scss @@ -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 { position: relative; display: inline-block; @@ -96,4 +141,12 @@ font-size: 18px; font-weight: 400; } + + .btn-login, + .btn-guest-login { + padding: 8px 12px; + margin: 6px; + font-size: 18px; + font-weight: 700; + } } diff --git a/src/assets/img/login/blue-line.svg b/src/assets/img/login/blue-line.svg new file mode 100644 index 0000000..9268a8d --- /dev/null +++ b/src/assets/img/login/blue-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/login/lock.svg b/src/assets/img/login/lock.svg new file mode 100644 index 0000000..5874298 --- /dev/null +++ b/src/assets/img/login/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/login/logo.svg b/src/assets/img/login/logo.svg new file mode 100644 index 0000000..30d1dea --- /dev/null +++ b/src/assets/img/login/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/img/login/mail.svg b/src/assets/img/login/mail.svg new file mode 100644 index 0000000..1774f40 --- /dev/null +++ b/src/assets/img/login/mail.svg @@ -0,0 +1,3 @@ + + +