Extract form inputs into components

src/app/app.module.ts

@@ -15,6 +15,9 @@ import { CheckStatusComponent } from './widgets/check-status/check-status.compon
 import { TableComponent } from './widgets/table/table.component';
 import { KeyValueHolderComponent } from './widgets/key-value-holder/key-value-holder.component';
 import { FileComponent } from './widgets/file/file.component';
+import { DateInputComponent } from './widgets/form/date-input/date-input.component';
+import { SelectInputComponent } from './widgets/form/select-input/select-input.component';
+import { GenericInputComponent } from './widgets/form/generic-input/generic-input.component';
 
 @NgModule({
   declarations: [
@@ -29,7 +32,10 @@ import { FileComponent } from './widgets/file/file.component';
     CheckStatusComponent,
     TableComponent,
     KeyValueHolderComponent,
-    FileComponent
+    FileComponent,
+    DateInputComponent,
+    SelectInputComponent,
+    GenericInputComponent
   ],
   imports: [
     BrowserModule,

src/app/pages/login/login.component.html

@@ -6,15 +6,17 @@
     <section class="form">
         <h2> Login </h2>
 
-        <div class="input-holder">
-            <input type="email" placeholder="johndoe@mail.com">
-            <label> Email ID </label>
-        </div>
+        <app-generic-input
+            type="email"
+            placeholder="johndoe@mail.com"
+            label="Email ID"
+        ></app-generic-input>
 
-        <div class="input-holder">
-            <input type="password" placeholder="Do not share password with others">
-            <label> Password </label>
-        </div>
+        <app-generic-input
+            type="password"
+            placeholder="Do not share password with others"
+            label="Password"
+        ></app-generic-input>
 
         <div class="other-actions">
             <label for="remember-me"> <input id="remember-me" type="checkbox"> Remember me </label>

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

@@ -41,23 +41,25 @@
     <section class="form">
         <div class="input-holder" *ngFor="let registerInput of registerForm">
             <ng-container *ngIf="registerInput.type === 'date'">
-                <input type="date">
-                <img src="assets/icons/calendar-fill.svg" alt="calendar icon">
+                <app-date-input
+                    [label]="registerInput.name"
+                ></app-date-input>
             </ng-container>
     
             <ng-container *ngIf="registerInput.type === 'select'">
-                <select *ngIf="registerInput.options">
-                    <option *ngFor="let option of registerInput.options" value="option"> {{ option }} </option>
-                </select>
-                
-                <img src="assets/icons/chevron-down.svg" alt="calendar icon">
+                <app-select-input
+                    [label]="registerInput.name"
+                    [options]="registerInput.options"
+                ></app-select-input>
             </ng-container>
     
             <ng-container *ngIf="registerInput.type === 'text' || registerInput.type === 'email' || registerInput.type === 'number'">
-                <input [type]="registerInput.type" [placeholder]="registerInput.placeholder">
+                <app-generic-input
+                    [label]="registerInput.name"
+                    [type]="registerInput.type" 
+                    [placeholder]="registerInput.placeholder"
+                ></app-generic-input>
             </ng-container>
-
-            <label> {{ registerInput.name }}: </label>
         </div>
     </section>
     
@@ -93,7 +95,7 @@
             </div>
         </div>
 
-        <div class="input-holder">            
+        <div class="year-select-input-holder input-holder">
             <select [(ngModel)]="noOfYears">
                 <option *ngFor="let year of years" [value]="year"> {{ year }} </option>
             </select>            

src/app/pages/register-business/register-business.component.scss

@@ -118,6 +118,61 @@
     }
 }
 
+.year-select-input-holder {
+    width: 100%;
+    margin: 1.5rem 0;
+    position: relative;    
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;    
+
+    label {
+        font-size: 1.4rem;
+        background-color: white;
+        color: var(--primary);
+        position: absolute;
+        top: 2.2rem;
+        left: -0.5rem;
+        padding: 0 0.5rem;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        transform: translate(2.5rem, -3rem);
+    }
+
+    select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        text-indent: 1px;
+        text-overflow: '';
+
+        display: block;
+        width: 100%;
+        border-radius: 4rem;
+        height: 5.5rem;
+        border: 1px solid var(--border-grey);
+        padding: 0 2rem;
+        font-size: 1.5rem;
+        letter-spacing: 0.5px;
+        color: var(--dark-grey);
+        background-color: white;
+
+        &:focus {
+            border-color: var(--highlight);
+
+            &~label {
+                color: var(--highlight);
+            }
+        }
+    }
+
+    img {
+        position: relative;
+        transform: translateX(-4rem);
+        pointer-events: none;
+        background-color: white;
+    }
+}
+
 
 .payment-container {
     padding: 1rem;

src/app/pages/register-business/register-business.component.ts

@@ -1,10 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-
-interface Plan {
-    name: string,
-    amount: number,
-    range: string,
-}
+import { DateInputProperties } from 'src/app/widgets/form/date-input/date-input.component';
+import { GenericInputProperties } from 'src/app/widgets/form/generic-input/generic-input.component';
+import { SelectInputProperties } from 'src/app/widgets/form/select-input/select-input.component';
 
 @Component({
     selector: 'app-register-business',
@@ -32,27 +29,29 @@ export class RegisterBusinessComponent implements OnInit {
     paymentChild: Window | null = null;
     childCheck: number | undefined;
 
-    registerForm: Array<{
-        name: string,
-        type: 'date' | 'select' | 'text' | 'email' | 'number',
-        placeholder?: string,
-        options?: Array<string>,
-    }> = [{
+    registerForm: Array<SelectInputProperties|DateInputProperties|GenericInputProperties> = [{
         name: 'Entity Type',
         type: 'select',
-        options: ['BUSINESS', 'LOCAL COMPANY', 
-        'LIMITED LIABILITY PARTNERSHIP', 'FOREIGN COMPANY', 
-        'LIMITED PARTNERSHIP', 'PUBLIC ACCOUNTING FIRM']
+        options: [
+            'BUSINESS', 
+            'LOCAL COMPANY', 
+            'LIMITED LIABILITY PARTNERSHIP', 
+            'FOREIGN COMPANY', 
+            'LIMITED PARTNERSHIP', 
+            'PUBLIC ACCOUNTING FIRM'
+        ]
     }, {
         name: 'Date of Incorporation',
         type: 'date'
     }, {
         name: 'Company Category',
         type: 'select',
-        options: ['PUBLIC COMPANY LIMITED BY SHARES', 
-        'PUBLIC COMPANY LIMITED BY GUARANTEE', 
-        'PRIVATE COMPANY LIMITED BY SHARES', 
-        'EXEMPT PRIVATE COMPANY LIMITED BY SHARES']
+        options: [
+            'PUBLIC COMPANY LIMITED BY SHARES', 
+            'PUBLIC COMPANY LIMITED BY GUARANTEE', 
+            'PRIVATE COMPANY LIMITED BY SHARES', 
+            'EXEMPT PRIVATE COMPANY LIMITED BY SHARES'
+        ]
     }, {
         name: 'Company Suffix',
         type: 'select',

src/app/widgets/form/date-input/date-input.component.html

@@ -0,0 +1,6 @@
+<div class="input-holder">
+    <input type="date">
+    <img src="../../../../assets/icons/calendar-fill.svg" alt="calendar icon">
+
+    <label> {{ label }}: </label>
+</div>

src/app/widgets/form/date-input/date-input.component.scss

@@ -0,0 +1,52 @@
+
+
+
+.input-holder {
+    width: 100%;
+    margin: 1.5rem 0;
+    position: relative;    
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;    
+
+    label {
+        font-size: 1.4rem;
+        background-color: white;
+        color: var(--primary);
+        position: absolute;
+        top: 2.2rem;
+        left: -0.5rem;
+        padding: 0 0.5rem;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        transform: translate(2.5rem, -3rem);
+    }
+
+    input {
+        display: block;
+        width: 100%;
+        border-radius: 4rem;
+        height: 5.5rem;
+        border: 1px solid var(--border-grey);
+        padding: 0 2rem;
+        font-size: 1.5rem;
+        letter-spacing: 0.5px;
+        color: var(--dark-grey);
+        background-color: white;
+
+        &:focus {
+            border-color: var(--highlight);
+
+            &~label {
+                color: var(--highlight);
+            }
+        }
+    }
+
+    img {
+        position: relative;
+        transform: translateX(-4rem);
+        pointer-events: none;
+        background-color: white;
+    }
+}

src/app/widgets/form/date-input/date-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateInputComponent } from './date-input.component';
+
+describe('DateInputComponent', () => {
+  let component: DateInputComponent;
+  let fixture: ComponentFixture<DateInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DateInputComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DateInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widgets/form/date-input/date-input.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+export interface DateInputProperties {
+    name: string,
+    type: 'date',
+}
+
+@Component({
+  selector: 'app-date-input',
+  templateUrl: './date-input.component.html',
+  styleUrls: ['./date-input.component.scss']
+})
+export class DateInputComponent implements OnInit {
+    @Input() label = '';
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}

src/app/widgets/form/generic-input/generic-input.component.html

@@ -0,0 +1,5 @@
+<div class="input-holder">
+    <input [type]="type" [placeholder]="placeholder">
+
+    <label> {{ label }}: </label>
+</div>

src/app/widgets/form/generic-input/generic-input.component.scss

@@ -0,0 +1,52 @@
+
+
+
+.input-holder {
+    width: 100%;
+    margin: 1.5rem 0;
+    position: relative;    
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;    
+
+    label {
+        font-size: 1.4rem;
+        background-color: white;
+        color: var(--primary);
+        position: absolute;
+        top: 2.2rem;
+        left: -0.5rem;
+        padding: 0 0.5rem;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        transform: translate(2.5rem, -3rem);
+    }
+
+    input {
+        display: block;
+        width: 100%;
+        border-radius: 4rem;
+        height: 5.5rem;
+        border: 1px solid var(--border-grey);
+        padding: 0 2rem;
+        font-size: 1.5rem;
+        letter-spacing: 0.5px;
+        color: var(--dark-grey);
+        background-color: white;
+
+        &:focus {
+            border-color: var(--highlight);
+
+            &~label {
+                color: var(--highlight);
+            }
+        }
+    }
+
+    img {
+        position: relative;
+        transform: translateX(-4rem);
+        pointer-events: none;
+        background-color: white;
+    }
+}

src/app/widgets/form/generic-input/generic-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GenericInputComponent } from './generic-input.component';
+
+describe('GenericInputComponent', () => {
+  let component: GenericInputComponent;
+  let fixture: ComponentFixture<GenericInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GenericInputComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GenericInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widgets/form/generic-input/generic-input.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+export interface GenericInputProperties {
+    name: string,
+    type: 'text' | 'email' | 'number' | 'password',
+    placeholder?: string,
+}
+
+@Component({
+  selector: 'app-generic-input',
+  templateUrl: './generic-input.component.html',
+  styleUrls: ['./generic-input.component.scss']
+})
+export class GenericInputComponent implements OnInit {
+    @Input() label = '';
+    @Input() placeholder: string|undefined;
+    @Input() type: 'text'|'email'|'number'|'password' = 'text';
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}

src/app/widgets/form/select-input/select-input.component.html

@@ -0,0 +1,9 @@
+<div class="input-holder">
+    <select>
+        <option *ngFor="let option of options" [value]="option"> {{ option }} </option>
+    </select>
+    
+    <img src="../../../../assets/icons/chevron-down.svg" alt="calendar icon">
+
+    <label> {{ label }}: </label>
+</div>

src/app/widgets/form/select-input/select-input.component.scss

@@ -0,0 +1,54 @@
+.input-holder {
+    width: 100%;
+    margin: 1.5rem 0;
+    position: relative;    
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;    
+
+    label {
+        font-size: 1.4rem;
+        background-color: white;
+        color: var(--primary);
+        position: absolute;
+        top: 2.2rem;
+        left: -0.5rem;
+        padding: 0 0.5rem;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        transform: translate(2.5rem, -3rem);
+    }
+
+    select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        text-indent: 1px;
+        text-overflow: '';
+
+        display: block;
+        width: 100%;
+        border-radius: 4rem;
+        height: 5.5rem;
+        border: 1px solid var(--border-grey);
+        padding: 0 2rem;
+        font-size: 1.5rem;
+        letter-spacing: 0.5px;
+        color: var(--dark-grey);
+        background-color: white;
+
+        &:focus {
+            border-color: var(--highlight);
+
+            &~label {
+                color: var(--highlight);
+            }
+        }
+    }
+
+    img {
+        position: relative;
+        transform: translateX(-4rem);
+        pointer-events: none;
+        background-color: white;
+    }
+}

src/app/widgets/form/select-input/select-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectInputComponent } from './select-input.component';
+
+describe('SelectInputComponent', () => {
+  let component: SelectInputComponent;
+  let fixture: ComponentFixture<SelectInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SelectInputComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widgets/form/select-input/select-input.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+export interface SelectInputProperties {
+    name: string,
+    type: 'select',
+    options: Array<string>,
+}
+
+@Component({
+  selector: 'app-select-input',
+  templateUrl: './select-input.component.html',
+  styleUrls: ['./select-input.component.scss']
+})
+export class SelectInputComponent implements OnInit {
+    @Input() label = '';
+    @Input() options: Array<string> = [];
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}

src/styles.scss

@@ -114,62 +114,4 @@ button, a {
         cursor: not-allowed;
         opacity: 0.5;
     }
-}
-
-
-.input-holder {
-    width: 100%;
-    margin: 1.5rem 0;
-    position: relative;    
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;    
-
-    label {
-        font-size: 1.4rem;
-        background-color: white;
-        color: var(--primary);
-        position: absolute;
-        top: 2.2rem;
-        left: -0.5rem;
-        padding: 0 0.5rem;
-        font-weight: 400;
-        letter-spacing: 0.5px;
-        transform: translate(2.5rem, -3rem);
-    }
-
-    input, select {
-        display: block;
-        width: 100%;
-        border-radius: 4rem;
-        height: 5.5rem;
-        border: 1px solid var(--border-grey);
-        padding: 0 2rem;
-        font-size: 1.5rem;
-        letter-spacing: 0.5px;
-        color: var(--dark-grey);
-        background-color: white;
-
-        &:focus {
-            border-color: var(--highlight);
-
-            &~label {
-                color: var(--highlight);
-            }
-        }
-    }
-
-    select {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        text-indent: 1px;
-        text-overflow: '';
-    }
-
-    img {
-        position: relative;
-        transform: translateX(-4rem);
-        pointer-events: none;
-        background-color: white;
-    }
 }