Login page

src/app/app-routing.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { LoginComponent } from './login/login.component';
 
 const routes: Routes = [
     { path: '', redirectTo: 'login', pathMatch: 'full' },
     { path: 'login', component: LoginComponent },
+    { path: 'dashboard', component: DashboardComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -5,11 +5,13 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent
+    LoginComponent,
+    DashboardComponent
   ],
   imports: [
     BrowserModule,

src/app/dashboard/dashboard.component.html

@@ -0,0 +1 @@
+<p>dashboard works!</p>

src/app/dashboard/dashboard.component.spec.ts

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

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/login/login.component.html

@@ -1,22 +1,31 @@
 <div class="container">
 
-    <section class="card">
+    <div class="card-holder">
         <img src="assets/logo.png" alt="cac logo">
 
-        <div class="input-holder">
-            <input type="text" placeholder="Ex: user@catalyst.org">
-            <label> Username </label>
-        </div>
+        <section class="card">
 
-        <div class="input-holder">
-            <input type="password">
-            <label> Password </label>
-        </div>
+            <h5> Log In </h5>
 
-        <button class="button">
-            Login
-        </button>
-
-    </section>
+            <div class="input-holder">
+                <input type="text">
+                <label> Username </label>
+            </div>
+    
+            <div class="input-holder">
+                <input type="password">
+                <label> Password </label>
+            </div>
+    
+            <div class="action-buttons">
+                <a href="#"> Forgot Password? </a>
+                    
+                <button class="button" (click)="authenticateUser()">
+                    Login
+                </button>
+            </div>
+    
+        </section>
+    </div>
 
 </div>

src/app/login/login.component.scss

@@ -7,15 +7,38 @@
     justify-content: center;
 }
 
-.card {
+.card-holder {
     width: 30vw;
     
     img {
         display: block;
+        margin: 16px auto;
     }
+}
 
-    button {
-        margin-left: auto;
-        display: block;
+.card {
+    width: 100%;
+
+    h5 {
+        color: var(--primary-text);
+        font-size: 20px;
+    }
+
+    .action-buttons {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        a {
+            color: var(--secondary-text);
+            text-decoration: none;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+
+            &:hover {
+                color: var(--primary);
+            }
+        }
     }
 }

src/app/login/login.component.ts

@@ -1,15 +1,22 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+    constructor(
+        private router: Router
+    ) { }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
+
+    authenticateUser() {
+        this.router.navigate(['/dashboard']);
+    }
 
 }

src/styles.scss

@@ -13,9 +13,9 @@
     --primary: #2a7a99;
     --secondary: #f5e461;
     --secondary-contrast: #f5e461;
-    --primary-text: #1f1f1f;
+    --primary-text: #5c5c5c;
     --secondary-text: #7b7b7b;
-    --input-background: #fafafa;
+    --input-background: #f6f6f6;
     --input-border: #8b8b8b;
     --input-placeholder-text: #606060;
     --common-border-radius: 6px;
@@ -23,7 +23,7 @@
 
 .card {
     box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f;
-    padding: 16px;
+    padding: 24px;
     border-radius: var(--common-border-radius);
 }
 
@@ -45,16 +45,12 @@
     &:hover, &:active {
         box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f;
     }
-
-    &:active, &:focus {
-        background-color: var(--secondary);
-        color: var(--primary);
-    }
 }
 
 .input-holder {
     background-color: var(--input-background);
-    margin: 16px 0;
+    border-radius: var(--common-border-radius);
+    margin: 24px 0;
     display: block;
     display: flex;
     flex-direction: column-reverse;
@@ -83,10 +79,10 @@
         background-color: transparent;
         border: none;
         outline: none;
+        border: 2px solid transparent;
         border-bottom: 2px solid var(--input-border);
         padding: 0 10px;
         width: 100%;
-        transition: border-color 0.3s;
 
         &:focus {
             border-color: var(--primary);
@@ -95,7 +91,6 @@
             border-top: 0;
             border-top-right-radius: 0;
             border-top-left-radius: 0;
-            font-weight: 500;
             
             & + label {
                 color: var(--primary);