From 84d007ce7fba29fdaa3405ed679676f0f8b31f62 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Mon, 13 May 2024 04:33:45 +0200 Subject: [PATCH] design register component --- .../login/footer/footer.component.scss | 2 + .../login/register/register.component.html | 127 ++++++++++++++++++ .../login/register/register.component.scss | 105 ++++++++++++++- .../login/register/register.component.ts | 48 ++++++- src/assets/img/login/user.svg | 3 + 5 files changed, 277 insertions(+), 8 deletions(-) create mode 100644 src/assets/img/login/user.svg diff --git a/src/app/components/login/footer/footer.component.scss b/src/app/components/login/footer/footer.component.scss index 1a561cc..d7ffdf9 100644 --- a/src/app/components/login/footer/footer.component.scss +++ b/src/app/components/login/footer/footer.component.scss @@ -24,6 +24,8 @@ } } +/*------------- RESPONSIVE -------------*/ + @media (max-height: 820px) { .footer { margin-bottom: 24x; diff --git a/src/app/components/login/register/register.component.html b/src/app/components/login/register/register.component.html index fa741eb..d6dbea7 100644 --- a/src/app/components/login/register/register.component.html +++ b/src/app/components/login/register/register.component.html @@ -1,4 +1,131 @@
+
+
+
+ +

Sign up

+ +
+
+ + @if(!registerData.name) { + + } @else { + + } +
+ @if (!name.valid && name.touched) { +

You must enter a name.

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

You must enter a mail.

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

You must enter a password.

+ } +
+ + @if(!registerData.passwordConfirm) { + + } @else { + + } +
+ @if (!passwordConfirm.valid && passwordConfirm.touched) { +

You must enter a password.

+ } +
+
+
+ +
+
+
diff --git a/src/app/components/login/register/register.component.scss b/src/app/components/login/register/register.component.scss index 028f757..69e5e51 100644 --- a/src/app/components/login/register/register.component.scss +++ b/src/app/components/login/register/register.component.scss @@ -3,10 +3,103 @@ section { height: 100vh; } -.logo { - position: absolute; - left: 57px; - top: 60px; - height: 100px; - width: 122px; +// REGISTER + +.content { + display: flex; + flex-direction: column; + align-items: center; + position: fixed; + top: 50%; + right: 50%; + transform: translate(50%, -50%); + width: 422px; + height: fit-content; + background: var(--white); + box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05); + border-radius: 30px; + padding: 48px 96px; + p { + font-size: 61px; + font-weight: 700; + position: relative; + } + img { + padding: 12px 0 24px 0; + } +} + +.headline { + position: relative; + text-align: center; + width: 100%; + app-btn-back { + position: absolute; + top: 20px; + left: -50px; + } +} + +.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: 92px; + } + &:nth-child(8) { + position: absolute; + right: 0; + top: 176px; + } + &:nth-child(11) { + position: absolute; + right: 0; + top: 262px; + } + } + .custom-input:focus + .custom-img { + display: none; + } +} + +.error-msg { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + padding: 6px; + width: 120%; + p { + color: var(--red); + font-size: 12px !important; + font-weight: 400 !important; + } +} + +.form-buttons { + display: flex; + justify-content: end; + padding: 12px 0; } diff --git a/src/app/components/login/register/register.component.ts b/src/app/components/login/register/register.component.ts index 67b58d0..9f6b57a 100644 --- a/src/app/components/login/register/register.component.ts +++ b/src/app/components/login/register/register.component.ts @@ -1,12 +1,56 @@ import { Component } from '@angular/core'; import { HeaderComponent } from '../header/header.component'; import { FooterComponent } from '../footer/footer.component'; +import { FormsModule, NgForm } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { FormBtnComponent } from '../../../shared/components/buttons/form-btn/form-btn.component'; +import { FirebaseService } from '../../../services/firebase.service'; +import { LoginService } from '../../../services/login.service'; +import { SharedService } from '../../../services/shared.service'; +import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component'; @Component({ selector: 'app-register', standalone: true, - imports: [HeaderComponent, FooterComponent], + imports: [ + HeaderComponent, + FooterComponent, + FormBtnComponent, + BtnBackComponent, + FormsModule, + CommonModule, + ], templateUrl: './register.component.html', styleUrl: './register.component.scss', }) -export class RegisterComponent {} +export class RegisterComponent { + registerData = { + name: '', + mail: '', + password: '', + passwordConfirm: '', + }; + + constructor( + private firebaseService: FirebaseService, + public loginSerivce: LoginService, + public sharedService: SharedService + ) {} + + onSubmit(ngForm: NgForm) { + this.sharedService.isBtnDisabled = true; + if (ngForm.submitted && ngForm.form.valid) { + //this.loginSerivce.register(this.registerData); + } + } + + checkIfUserEmailIsValid(emailValue: string) { + const channelNameLenght = emailValue.length; + const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/; + if (emailRegex.test(emailValue)) { + return true; + } else { + return false; + } + } +} diff --git a/src/assets/img/login/user.svg b/src/assets/img/login/user.svg new file mode 100644 index 0000000..03b1962 --- /dev/null +++ b/src/assets/img/login/user.svg @@ -0,0 +1,3 @@ + + +