From 40285b706e337749b7000e79a9d4222af323b682 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 4 Nov 2021 12:36:23 +0530 Subject: [PATCH] Name check form --- src/app/app.module.ts | 6 +- .../register-business.component.html | 46 ++++- .../register-business.component.scss | 164 ++++++++++++++++++ .../register-business.component.ts | 33 +++- src/styles.scss | 2 + 5 files changed, 242 insertions(+), 9 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 74e901c..f007d2b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,17 +6,19 @@ import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import { TabsComponent } from './tabs/tabs.component'; import { RegisterBusinessComponent } from './register-business/register-business.component'; +import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent, LoginComponent, TabsComponent, - // RegisterBusinessComponent + RegisterBusinessComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index d320857..5c4ac74 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -1 +1,45 @@ -

register-business works!

+
+

+ Business Name Application +

+
+ +
+ +
+ + +
+ +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam nisi quia fuga nobis magnam accusamus recusandae vitae architecto fugit natus! Nostrum doloremque id laborum sequi magni ducimus perferendis quam aspernatur? +

+ +
+
Sorry!
+
Yay!
+

{{ error.message }}

+
+ + + + +
+
{{ nameToCheck }}
+

+ + Lorem, ipsum dolor sit amet consectetur adipisicing elit. At accusamus harum non dolores qui quaerat itaque architecto tenetur maiores dolor! Dolor aspernatur nemo autem et iusto deserunt officiis consectetur laboriosam! +

+ +
+ + +
+
+
\ No newline at end of file diff --git a/src/app/register-business/register-business.component.scss b/src/app/register-business/register-business.component.scss index e69de29..07812e9 100644 --- a/src/app/register-business/register-business.component.scss +++ b/src/app/register-business/register-business.component.scss @@ -0,0 +1,164 @@ +header { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 2rem; + + &::after { + content: ''; + display: block; + flex-grow: 1; + height: 2px; + background-color: var(--border-grey); + opacity: 0.7; + margin-left: 2rem; + } + + h2 { + font-size: 2.4rem; + color: var(--primary); + font-weight: 400; + } +} + +.search-input-container { + width: 60%; + margin: 0 auto; + text-align: center; + + .search-input { + display: flex; + align-items: center; + justify-content: flex-start; + background-color: white; + border-radius: 4rem; + height: 5.5rem; + border: 1px solid var(--border-grey); + width: 80%; + margin: 4rem auto 3rem; + overflow: hidden; + + input { + border: none; + background-color: transparent; + padding: 0 3rem; + font-size: 1.5rem; + color: var(--dark-grey); + letter-spacing: 0.5px; + flex-grow: 1; + + &::placeholder { + font-weight: 300; + } + } + + button { + height: 100%; + border: none; + background-color: var(--highlight); + padding: 0 4rem; + color: white; + font-size: 1.6rem; + letter-spacing: 0.5px; + border-radius: 4rem; + transition: opacity 0.3s; + + &:disabled { + opacity: 0.5; + } + } + } + + .description { + width: 75%; + margin: 0 auto; + text-align: left; + font-size: 1.2rem; + color: var(--dark-grey); + opacity: 0.6; + letter-spacing: 0.5px; + line-height: 1.4; + font-weight: 300; + } + + .form-message { + margin: 6rem auto 2rem; + line-height: 1.6; + + &.error { + p { + color: var(--error); + } + } + + h5 { + font-size: 1.8rem; + color: var(--dark-grey); + filter: brightness(80%); + font-weight: 500; + margin-bottom: 2rem; + } + + p { + font-size: 1.8rem; + font-weight: 400; + color: var(--success); + } + } + + .proceed-button { + border: none; + background-color: var(--highlight); + padding: 0 4rem; + color: white; + font-size: 1.6rem; + letter-spacing: 0.5px; + border-radius: 4rem; + height: 5rem; + } + + + .confirmation-box { + h5 { + font-size: 1.8rem; + color: var(--dark-grey); + filter: brightness(80%); + font-weight: 500; + margin: 4rem 0; + } + + .description { + width: 50%; + display: flex; + align-items: flex-start; + justify-content: flex-start; + + input { + margin: 5px 10px; + } + } + + .actions { + margin-top: 2rem; + + button { + border: none; + background-color: var(--highlight); + padding: 0 4rem; + color: white; + font-size: 1.6rem; + letter-spacing: 0.5px; + border-radius: 4rem; + height: 5rem; + vertical-align: middle; + + + &:first-child { + background-color: var(--border-grey); + color: var(--dark-grey); + margin-right: 20px; + } + } + } + } +} \ No newline at end of file diff --git a/src/app/register-business/register-business.component.ts b/src/app/register-business/register-business.component.ts index 131c935..a292eb2 100644 --- a/src/app/register-business/register-business.component.ts +++ b/src/app/register-business/register-business.component.ts @@ -1,15 +1,36 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-register-business', - templateUrl: './register-business.component.html', - styleUrls: ['./register-business.component.scss'] + selector: 'app-register-business', + templateUrl: './register-business.component.html', + styleUrls: ['./register-business.component.scss'] }) export class RegisterBusinessComponent implements OnInit { + formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | undefined = 'CONFIRM_INIT'; + nameToCheck: string = 'JK Enterprises'; + error: { + message: string, + isError: boolean, + } | undefined; - constructor() { } + constructor() { } - ngOnInit(): void { - } + ngOnInit(): void { + } + + checkName() { + if (this.nameToCheck === 'JK Enterprises') { + this.error = { + message: 'JK Enterprises is unavailable', + isError: true + }; + } else { + this.formState = 'INIT_REGISTER'; + this.error = { + message: this.nameToCheck + ' is available', + isError: false + }; + } + } } diff --git a/src/styles.scss b/src/styles.scss index 3330940..5824c20 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -21,4 +21,6 @@ button, a { --teal: #1e8bbc; --dark-grey: #7a7a7a; --border-grey: #e8e8e8; + --error: #d07a7a; + --success: #88b749; } \ No newline at end of file