Name check form

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]

src/app/register-business/register-business.component.html

@@ -1 +1,45 @@
-<p>register-business works!</p>
+<header>
+    <h2>
+        Business Name Application
+    </h2>
+</header>
+
+<div class="search-input-container">
+    <ng-container *ngIf="formState === 'CHECK_NAME' || formState === 'INIT_REGISTER'">
+        <section class="search-input">
+            <input type="text" placeholder="Enter your business name" [(ngModel)]="nameToCheck">
+            <button (click)="checkName()" [disabled]="!nameToCheck"> Check </button>
+        </section>
+        
+        <p class="description">
+            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?
+        </p>
+    
+        <section class="form-message" [ngClass]="{'error' : error.isError}" *ngIf="error">
+            <h5 *ngIf="error.isError"> Sorry! </h5>
+            <h5 *ngIf="!error.isError"> Yay! </h5>
+            <p> {{ error.message }} </p>
+        </section>
+    
+        <button class="proceed-button" *ngIf="formState === 'INIT_REGISTER'">
+            Proceed
+        </button>
+    </ng-container>
+
+    <section class="confirmation-box" *ngIf="formState === 'CONFIRM_INIT'">
+        <h5> {{ nameToCheck }} </h5>
+        <p class="description">
+            <input type="checkbox">
+            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!
+        </p>
+
+        <div class="actions">
+            <button>
+                Cancel
+            </button>
+            <button>
+                Proceed
+            </button>
+        </div>
+    </section>
+</div>

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;
+                }
+            }
+        }
+    }
+}

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
+            };
+        }
+    }
 
 }

src/styles.scss

@@ -21,4 +21,6 @@ button, a {
     --teal: #1e8bbc;
     --dark-grey: #7a7a7a;
     --border-grey: #e8e8e8;
+    --error: #d07a7a;
+    --success: #88b749;
 }