├── .editorconfig
├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── angular-cli-build.js
├── angular-cli.json
├── config
├── environment.dev.ts
├── environment.js
├── environment.prod.ts
├── karma-test-shim.js
├── karma.conf.js
└── protractor.conf.js
├── e2e
├── app.e2e-spec.ts
├── app.po.ts
├── tsconfig.json
└── typings.d.ts
├── package.json
├── public
└── .npmignore
├── src
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app.routes.ts
│ ├── app.routing.ts
│ ├── auth
│ │ ├── auth.manager.ts
│ │ ├── auth.service.spec.ts
│ │ ├── auth.service.ts
│ │ └── index.ts
│ ├── dashboard
│ │ ├── dashboard.component.css
│ │ ├── dashboard.component.html
│ │ ├── dashboard.component.spec.ts
│ │ ├── dashboard.component.ts
│ │ └── index.ts
│ ├── environment.ts
│ ├── index.ts
│ ├── login
│ │ ├── index.ts
│ │ ├── login.component.css
│ │ ├── login.component.html
│ │ ├── login.component.spec.ts
│ │ └── login.component.ts
│ └── shared
│ │ └── index.ts
├── favicon.ico
├── index.html
├── main.ts
├── system-config.ts
├── tsconfig.json
└── typings.d.ts
├── tslint.json
└── typings.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | end_of_line = lf
9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 |
12 | [*.md]
13 | max_line_length = 0
14 | trim_trailing_whitespace = false
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | *.launch
16 | .settings/
17 |
18 | # misc
19 | /.sass-cache
20 | /connect.lock
21 | /coverage/*
22 | /libpeerconnection.log
23 | npm-debug.log
24 | testem.log
25 | /typings
26 |
27 | # e2e
28 | /e2e/*.js
29 | /e2e/*.map
30 |
31 | #System Files
32 | .DS_Store
33 | Thumbs.db
34 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "editor.fontSize": 18,
4 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular2-new-authentication
2 |
3 | This app is to demonstrate authentication using the new Angular^2.0.0 Router.
4 |
5 | For further details - http://tphangout.com/?p=369
6 |
7 | This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.10.
8 |
--------------------------------------------------------------------------------
/angular-cli-build.js:
--------------------------------------------------------------------------------
1 | // Angular-CLI build configuration
2 | // This file lists all the node_modules files that will be used in a build
3 | // Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
4 |
5 | /* global require, module */
6 |
7 | var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
8 |
9 | module.exports = function(defaults) {
10 | return new Angular2App(defaults, {
11 | vendorNpmFiles: [
12 | 'systemjs/dist/system-polyfills.+(js|js.map)',
13 | 'systemjs/dist/system.src.+(js|js.map)',
14 | 'zone.js/dist/**/*.+(js|js.map)',
15 | 'es6-shim/es6-shim.js',
16 | 'reflect-metadata/**/*.+(ts|js|js.map)',
17 | 'rxjs/**/*.+(js|js.map)',
18 | '@angular/**/*.+(js|js.map)'
19 | ]
20 | });
21 | };
22 |
--------------------------------------------------------------------------------
/angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "project": {
3 | "version": "1.0.0-beta.10",
4 | "name": "angular2-new-authentication"
5 | },
6 | "apps": [
7 | {
8 | "main": "src/main.ts",
9 | "tsconfig": "src/tsconfig.json",
10 | "mobile": false
11 | }
12 | ],
13 | "addons": [],
14 | "packages": [],
15 | "e2e": {
16 | "protractor": {
17 | "config": "config/protractor.conf.js"
18 | }
19 | },
20 | "test": {
21 | "karma": {
22 | "config": "config/karma.conf.js"
23 | }
24 | },
25 | "defaults": {
26 | "prefix": "app",
27 | "sourceDir": "src",
28 | "styleExt": "css",
29 | "prefixInterfaces": false,
30 | "lazyRoutePrefix": "+"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/config/environment.dev.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: false
3 | };
4 |
--------------------------------------------------------------------------------
/config/environment.js:
--------------------------------------------------------------------------------
1 | // Angular-CLI server configuration
2 | // Unrelated to environment.dev|prod.ts
3 |
4 | /* jshint node: true */
5 |
6 | module.exports = function(environment) {
7 | return {
8 | environment: environment,
9 | baseURL: '/',
10 | locationType: 'auto'
11 | };
12 | };
13 |
14 |
--------------------------------------------------------------------------------
/config/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/config/karma-test-shim.js:
--------------------------------------------------------------------------------
1 | // Test shim for Karma, needed to load files via SystemJS
2 |
3 | /*global jasmine, __karma__, window*/
4 | Error.stackTraceLimit = Infinity;
5 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
6 |
7 | __karma__.loaded = function () {
8 | };
9 |
10 | var distPath = '/base/dist/';
11 | var appPaths = ['app']; //Add all valid source code folders here
12 |
13 | function isJsFile(path) {
14 | return path.slice(-3) == '.js';
15 | }
16 |
17 | function isSpecFile(path) {
18 | return path.slice(-8) == '.spec.js';
19 | }
20 |
21 | function isAppFile(path) {
22 | return isJsFile(path) && appPaths.some(function(appPath) {
23 | var fullAppPath = distPath + appPath + '/';
24 | return path.substr(0, fullAppPath.length) == fullAppPath;
25 | });
26 | }
27 |
28 | var allSpecFiles = Object.keys(window.__karma__.files)
29 | .filter(isSpecFile)
30 | .filter(isAppFile);
31 |
32 | // Load our SystemJS configuration.
33 | System.config({
34 | baseURL: distPath
35 | });
36 |
37 | System.import('system-config.js').then(function() {
38 | // Load and configure the TestComponentBuilder.
39 | return Promise.all([
40 | System.import('@angular/core/testing'),
41 | System.import('@angular/platform-browser-dynamic/testing')
42 | ]).then(function (providers) {
43 | var testing = providers[0];
44 | var testingBrowser = providers[1];
45 |
46 | testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
47 | testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
48 | });
49 | }).then(function() {
50 | // Finally, load all spec files.
51 | // This will run the tests directly.
52 | return Promise.all(
53 | allSpecFiles.map(function (moduleName) {
54 | return System.import(moduleName);
55 | }));
56 | }).then(__karma__.start, __karma__.error);
--------------------------------------------------------------------------------
/config/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '..',
7 | frameworks: ['jasmine'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher')
11 | ],
12 | customLaunchers: {
13 | // chrome setup for travis CI using chromium
14 | Chrome_travis_ci: {
15 | base: 'Chrome',
16 | flags: ['--no-sandbox']
17 | }
18 | },
19 | files: [
20 | { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
21 | { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
22 | { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
23 | { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
24 | { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
25 | { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
26 | { pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false },
27 |
28 | { pattern: 'config/karma-test-shim.js', included: true, watched: true },
29 |
30 | // Distribution folder.
31 | { pattern: 'dist/**/*', included: false, watched: true }
32 | ],
33 | exclude: [
34 | // Vendor packages might include spec files. We don't want to use those.
35 | 'dist/vendor/**/*.spec.js'
36 | ],
37 | preprocessors: {},
38 | reporters: ['progress'],
39 | port: 9876,
40 | colors: true,
41 | logLevel: config.LOG_INFO,
42 | autoWatch: true,
43 | browsers: ['Chrome'],
44 | singleRun: false
45 | });
46 | };
47 |
--------------------------------------------------------------------------------
/config/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/docs/referenceConf.js
3 |
4 | /*global jasmine */
5 | var SpecReporter = require('jasmine-spec-reporter');
6 |
7 | exports.config = {
8 | allScriptsTimeout: 11000,
9 | specs: [
10 | '../e2e/**/*.e2e-spec.ts'
11 | ],
12 | capabilities: {
13 | 'browserName': 'chrome'
14 | },
15 | directConnect: true,
16 | baseUrl: 'http://localhost:4200/',
17 | framework: 'jasmine',
18 | jasmineNodeOpts: {
19 | showColors: true,
20 | defaultTimeoutInterval: 30000,
21 | print: function() {}
22 | },
23 | useAllAngular2AppRoots: true,
24 | beforeLaunch: function() {
25 | require('ts-node').register({
26 | project: 'e2e'
27 | });
28 | },
29 | onPrepare: function() {
30 | jasmine.getEnv().addReporter(new SpecReporter());
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('\'Angular2 New Authentication App\'', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display message saying \'app works\'', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('app works!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | export class AppPage {
2 | navigateTo() {
3 | return browser.get('/');
4 | }
5 |
6 | getParagraphText() {
7 | return element(by.css('app-root h1')).getText();
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "declaration": false,
5 | "emitDecoratorMetadata": true,
6 | "experimentalDecorators": true,
7 | "mapRoot": "",
8 | "module": "commonjs",
9 | "moduleResolution": "node",
10 | "noEmitOnError": true,
11 | "noImplicitAny": false,
12 | "rootDir": ".",
13 | "sourceMap": true,
14 | "sourceRoot": "/",
15 | "target": "es5"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/e2e/typings.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular2-new-authentication",
3 | "version": "1.0.0",
4 | "license": "MIT",
5 | "angular-cli": {},
6 | "scripts": {
7 | "start": "ng serve",
8 | "postinstall": "typings install",
9 | "lint": "tslint \"src/**/*.ts\"",
10 | "test": "ng test",
11 | "pree2e": "webdriver-manager update",
12 | "e2e": "protractor"
13 | },
14 | "private": true,
15 | "dependencies": {
16 | "@angular/common": "2.0.0",
17 | "@angular/compiler": "2.0.0",
18 | "@angular/core": "2.0.0",
19 | "@angular/forms": "2.0.0",
20 | "@angular/http": "2.0.0",
21 | "@angular/platform-browser": "2.0.0",
22 | "@angular/platform-browser-dynamic": "2.0.0",
23 | "@angular/router": "3.0.0",
24 | "@angular/upgrade": "2.0.0",
25 | "es6-shim": "0.35.1",
26 | "reflect-metadata": "0.1.8",
27 | "rxjs": "5.0.0-beta.12",
28 | "systemjs": "0.19.38",
29 | "zone.js": "0.6.23"
30 | },
31 | "devDependencies": {
32 | "angular-cli": "1.0.0-beta.10",
33 | "codelyzer": "0.0.20",
34 | "ember-cli-inject-live-reload": "1.4.1",
35 | "jasmine-core": "2.4.1",
36 | "jasmine-spec-reporter": "2.5.0",
37 | "karma": "0.13.22",
38 | "karma-chrome-launcher": "0.2.3",
39 | "karma-jasmine": "0.3.8",
40 | "protractor": "3.3.0",
41 | "ts-node": "0.5.5",
42 | "tslint": "3.11.0",
43 | "typescript": "2.0.2",
44 | "typings": "1.3.3"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/public/.npmignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajayogan/angular2-new-authentication/0a64bb72a1cb80ebb0e706197f0d9cf43a80b092/public/.npmignore
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajayogan/angular2-new-authentication/0a64bb72a1cb80ebb0e706197f0d9cf43a80b092/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{title}}
3 |
4 |
5 | Login Page
6 | |
7 | Dashboard Page
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, ComponentFixture, inject } from '@angular/core/testing';
4 | import { By } from '@angular/platform-browser';
5 | import { Component } from '@angular/core';
6 |
7 | import { AppComponent } from './app.component';
8 |
9 | describe('App: angular2-new-authentication', () => {
10 | beforeEach(() => {
11 | TestBed.configureTestingModule({
12 | imports: [AppComponent]
13 | });
14 | });
15 |
16 | it('should create the app',
17 | inject([AppComponent], (app: AppComponent) => {
18 | expect(app).toBeTruthy();
19 | }));
20 |
21 | it('should have as title \'app works!\'',
22 | inject([AppComponent], (app: AppComponent) => {
23 | expect(app.title).toEqual('app works!');
24 | }));
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | moduleId: module.id,
5 | selector: 'app-root',
6 | templateUrl: 'app.component.html',
7 | styleUrls: ['app.component.css']
8 | })
9 | export class AppComponent {
10 | title = 'app works!';
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ReactiveFormsModule, FormsModule } from '@angular/forms';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { HttpModule } from '@angular/http';
5 |
6 | import { appRouting } from './app.routing';
7 | import { AuthManager, AuthService } from './auth';
8 | import { AppComponent } from './app.component';
9 | import { LoginComponent } from './login';
10 | import { DashboardComponent } from './dashboard';
11 |
12 | @NgModule({
13 | declarations: [
14 | AppComponent,
15 | LoginComponent,
16 | DashboardComponent
17 | ],
18 | imports: [
19 | BrowserModule,
20 | FormsModule,
21 | ReactiveFormsModule,
22 | HttpModule,
23 | appRouting
24 | ],
25 | providers: [
26 | AuthManager,
27 | AuthService
28 | ],
29 | bootstrap: [AppComponent]
30 | })
31 | export class AppModule {}
--------------------------------------------------------------------------------
/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 |
3 | import { LoginComponent } from './login';
4 | import { DashboardComponent } from './dashboard';
5 | import { AuthManager } from './auth';
6 |
7 | export const appRoutes: Routes = [
8 | { path: '', redirectTo: 'login', pathMatch: 'full' },
9 | { path: 'login', component: LoginComponent, canActivate: [AuthManager] },
10 | { path: 'dashboard', component: DashboardComponent, canActivate: [AuthManager] }
11 | ];
12 |
--------------------------------------------------------------------------------
/src/app/app.routing.ts:
--------------------------------------------------------------------------------
1 | import { RouterModule } from "@angular/router";
2 | import { ModuleWithProviders } from '@angular/core';
3 |
4 | import { appRoutes } from './app.routes';
5 |
6 | export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });
7 |
--------------------------------------------------------------------------------
/src/app/auth/auth.manager.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {
3 | CanActivate,
4 | Router,
5 | ActivatedRouteSnapshot,
6 | RouterStateSnapshot
7 | } from '@angular/router';
8 |
9 | @Injectable()
10 | export class AuthManager implements CanActivate {
11 |
12 | constructor(private router: Router) {}
13 |
14 | canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
15 | if(next.url[0].path == 'login'){
16 | if(window.localStorage.getItem('auth_key')){
17 | console.log('You are already logged in');
18 | return false;
19 | }
20 | else {
21 | return true;
22 | }
23 | }
24 |
25 | if(window.localStorage.getItem('auth_key')) {
26 | return true;
27 | }
28 |
29 | console.log('You must be logged in');
30 | this.router.navigate(['/login']);
31 | return false;
32 | }
33 |
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/auth/auth.service.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 | import { TestBed, inject } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 |
5 | import { AuthService } from './auth.service';
6 |
7 | describe('Auth Service', () => {
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({
10 | imports: [AuthService]
11 | });
12 | });
13 |
14 | it('should ...',
15 | inject([AuthService], (service: AuthService) => {
16 | expect(service).toBeTruthy();
17 | }));
18 | });
19 |
--------------------------------------------------------------------------------
/src/app/auth/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, Headers } from '@angular/http';
3 |
4 | @Injectable()
5 | export class AuthService {
6 |
7 | isAuthenticated: boolean = false;
8 |
9 | constructor(private http: Http) {}
10 |
11 | authenticateNow(usercreds) {
12 | var headers = new Headers();
13 | var creds = 'name=' + usercreds.username + '&password=' + usercreds.password;
14 |
15 | headers.append('Content-Type', 'application/X-www-form-urlencoded');
16 |
17 | return new Promise((resolve) => {
18 | this.http.post('http://localhost:3333/authenticate', creds, {headers: headers}).subscribe((data) => {
19 | if(data.json().success) {
20 | window.localStorage.setItem('auth_key', data.json().token);
21 | this.isAuthenticated = true;}
22 | resolve(this.isAuthenticated);
23 | }
24 | )
25 | });
26 | }
27 |
28 | }
29 |
30 |
--------------------------------------------------------------------------------
/src/app/auth/index.ts:
--------------------------------------------------------------------------------
1 | export * from './auth.service';
2 | export * from './auth.manager';
3 |
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajayogan/angular2-new-authentication/0a64bb72a1cb80ebb0e706197f0d9cf43a80b092/src/app/dashboard/dashboard.component.css
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.html:
--------------------------------------------------------------------------------
1 |
2 | Welcome.. You're now Logged in!!
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { DashboardComponent } from './dashboard.component';
4 |
5 | describe('Component: Dashboard', () => {
6 |
7 | });
8 |
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | @Component({
5 | moduleId: module.id,
6 | selector: 'app-dashboard',
7 | templateUrl: 'dashboard.component.html',
8 | styleUrls: ['dashboard.component.css']
9 | })
10 | export class DashboardComponent implements OnInit {
11 |
12 | constructor(private router: Router) {}
13 |
14 | ngOnInit() {}
15 |
16 | logout(){
17 | window.localStorage.removeItem('auth_key');
18 | this.router.navigate(['/login']);
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/dashboard/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dashboard.component';
2 |
--------------------------------------------------------------------------------
/src/app/environment.ts:
--------------------------------------------------------------------------------
1 | // The file for the current environment will overwrite this one during build
2 | // Different environments can be found in config/environment.{dev|prod}.ts
3 | // The build system defaults to the dev environment
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
--------------------------------------------------------------------------------
/src/app/index.ts:
--------------------------------------------------------------------------------
1 | export * from './environment';
2 | export * from './app.component';
3 | export * from './app.module';
4 | export * from './app.routes';
5 | export * from './app.routing';
6 | export * from './auth';
7 | export * from './login';
8 | export * from './dashboard';
9 |
--------------------------------------------------------------------------------
/src/app/login/index.ts:
--------------------------------------------------------------------------------
1 | export * from './login.component';
2 |
--------------------------------------------------------------------------------
/src/app/login/login.component.css:
--------------------------------------------------------------------------------
1 | .center-div
2 | {
3 | top:50%;
4 | left: 50%;
5 | transform: translate3d(-50%,-50%, 0);
6 | position: absolute;
7 | }
--------------------------------------------------------------------------------
/src/app/login/login.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Login
8 |
Click to reveal
9 |
10 |
11 |
12 |
Loginclose
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |