kj
/
vendor-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Dummy login page with common styles ready for rectangular button

master
kj1352 5 years ago
parent
bf5808df47
commit
bfa1a3bf6e
11 changed files with 139 additions and 6 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      angular.json
  2. +14
    -4
      src/app/app-routing.module.ts
  3. +3
    -1
      src/app/app.module.ts
  4. +3
    -0
      src/app/login/login.component.html
  5. +11
    -0
      src/app/login/login.component.scss
  6. +25
    -0
      src/app/login/login.component.spec.ts
  7. +22
    -0
      src/app/login/login.component.ts
  8. +12
    -0
      src/app/services/auth.service.spec.ts
  9. +9
    -0
      src/app/services/auth.service.ts
  10. +1
    -0
      src/index.html
  11. +38
    -0
      src/styles.scss

+ 1
- 1
angular.json View File

@@ -126,4 +126,4 @@
} }
}}, }},
"defaultProject": "vendor-app" "defaultProject": "vendor-app"
}
}

+ 14
- 4
src/app/app-routing.module.ts View File

@@ -1,11 +1,21 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';



const routes: Routes = [];
const routes: Routes = [
{
path: "",
redirectTo: "/login",
pathMatch: "full"
},
{
path: "login",
component: LoginComponent
},
];


@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule { }

+ 3
- 1
src/app/app.module.ts View File

@@ -3,10 +3,12 @@ import { NgModule } from '@angular/core';


import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';


@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent
AppComponent,
LoginComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,


+ 3
- 0
src/app/login/login.component.html View File

@@ -0,0 +1,3 @@
<div class="container">
<button class="rect-button" (click)="authenticateUser()"> Login </button>
</div>

+ 11
- 0
src/app/login/login.component.scss View File

@@ -0,0 +1,11 @@
.container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;

button {
width: 100px;
}
}

+ 25
- 0
src/app/login/login.component.spec.ts View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LoginComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 22
- 0
src/app/login/login.component.ts View File

@@ -0,0 +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']
})
export class LoginComponent implements OnInit {

constructor(
public router: Router
) { }

ngOnInit() {
}

authenticateUser() {
this.router.navigate(['login']);
}

}

+ 12
- 0
src/app/services/auth.service.spec.ts View File

@@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';

import { AuthService } from './auth.service';

describe('AuthService', () => {
beforeEach(() => TestBed.configureTestingModule({}));

it('should be created', () => {
const service: AuthService = TestBed.get(AuthService);
expect(service).toBeTruthy();
});
});

+ 9
- 0
src/app/services/auth.service.ts View File

@@ -0,0 +1,9 @@
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class AuthService {

constructor() { }
}

+ 1
- 0
src/index.html View File

@@ -7,6 +7,7 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
</head> </head>


<body> <body>


+ 38
- 0
src/styles.scss View File

@@ -1 +1,39 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */

:root {
--brand-blue: #1881e5;
--background-blue: #f5f7fa;
--brand-grey: #9a9a9a;
--brand-black: #1b1d1e;
--brand-dark-grey: #666666;
--brand-yellow: #f79319;
}


* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}

a {
text-decoration: none;
cursor: pointer;
}

button {
cursor: pointer;
}

.rect-button {
border-radius: 5px;
background-color: var(--brand-blue);
color: white;
border: 0px;
height: 50px;
font-size: 16px;
padding: 0 15px;
letter-spacing: 0.5px;
}

Write Preview
Loading…
Cancel
Save