2 |
3 |
Status Works!
4 |
5 |
Home
6 |
7 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | title = 'app';
10 | }
11 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "baseUrl": "./",
6 | "module": "es2015",
7 | "types": []
8 | },
9 | "exclude": [
10 | "test.ts",
11 | "**/*.spec.ts"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/.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 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/e2e",
5 | "baseUrl": "./",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "types": [
9 | "jasmine",
10 | "jasminewd2",
11 | "node"
12 | ]
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/store/app.states.ts:
--------------------------------------------------------------------------------
1 | import { createFeatureSelector } from '@ngrx/store';
2 |
3 | import * as auth from './reducers/auth.reducers';
4 |
5 |
6 | export interface AppState {
7 | authState: auth.State;
8 | }
9 |
10 | export const reducers = {
11 | auth: auth.reducer
12 | };
13 |
14 | export const selectAuthState = createFeatureSelector
('auth');
15 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('angular-auth-ngrx App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('Angular + NGRX');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/cypress/integration/landing.component.spec.js:
--------------------------------------------------------------------------------
1 | describe('Landing Component', () => {
2 |
3 | it('should display the landing page', () => {
4 | cy
5 | .visit('/')
6 | .get('h1').contains('Angular + NGRX')
7 | .get('a.btn').contains('Log in')
8 | .get('a.btn').contains('Sign up')
9 | .get('a.btn').contains('Status');
10 | });
11 |
12 | });
13 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "baseUrl": "./",
6 | "module": "commonjs",
7 | "target": "es5",
8 | "types": [
9 | "jasmine",
10 | "node"
11 | ]
12 | },
13 | "files": [
14 | "test.ts"
15 | ],
16 | "include": [
17 | "**/*.spec.ts",
18 | "**/*.d.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | AngularAuthNgrx
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "target": "es5",
11 | "typeRoots": [
12 | "node_modules/@types"
13 | ],
14 | "lib": [
15 | "es2017",
16 | "dom"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/services/auth-guard.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Router, CanActivate } from '@angular/router';
3 |
4 | import { AuthService } from './auth.service';
5 |
6 |
7 | @Injectable()
8 | export class AuthGuardService implements CanActivate {
9 | constructor(
10 | public auth: AuthService,
11 | public router: Router
12 | ) {}
13 | canActivate(): boolean {
14 | if (!this.auth.getToken()) {
15 | this.router.navigateByUrl('/log-in');
16 | return false;
17 | }
18 | return true;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/components/status/status.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 |
4 | import { AppState } from '../../store/app.states';
5 | import { GetStatus } from '../../store/actions/auth.actions';
6 |
7 | @Component({
8 | selector: 'app-status',
9 | templateUrl: './status.component.html',
10 | styleUrls: ['./status.component.css']
11 | })
12 | export class StatusComponent implements OnInit {
13 |
14 | constructor(private store: Store) { }
15 |
16 | ngOnInit() {
17 | this.store.dispatch(new GetStatus);
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | Cypress.Commands.add('login', (email, password) => {
2 | cy
3 | .visit('/')
4 | .get('a.btn').contains('Log in').click()
5 | .get('form input[name="email"]').clear().type(email)
6 | .get('form input[name="password"]').clear().type(password)
7 | .get('button[type="submit"]').click();
8 | });
9 |
10 | Cypress.Commands.add('signup', (email, password) => {
11 | cy
12 | .visit('/')
13 | .get('a.btn').contains('Sign up').click()
14 | .get('form input[name="email"]').clear().type(email)
15 | .get('form input[name="password"]').clear().type(password)
16 | .get('button[type="submit"]').click();
17 | });
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /dist-server
6 | /tmp
7 | /out-tsc
8 |
9 | # dependencies
10 | /node_modules
11 |
12 | # IDEs and editors
13 | /.idea
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 | *.sublime-workspace
20 |
21 | # IDE - VSCode
22 | .vscode/*
23 | !.vscode/settings.json
24 | !.vscode/tasks.json
25 | !.vscode/launch.json
26 | !.vscode/extensions.json
27 |
28 | # misc
29 | /.sass-cache
30 | /connect.lock
31 | /coverage
32 | /libpeerconnection.log
33 | npm-debug.log
34 | testem.log
35 | /typings
36 |
37 | # e2e
38 | /e2e/*.js
39 | /e2e/*.map
40 |
41 | # System Files
42 | .DS_Store
43 | Thumbs.db
44 |
--------------------------------------------------------------------------------
/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example plugins/index.js can be used to load plugins
3 | //
4 | // You can change the location of this file or turn off loading
5 | // the plugins file with the 'pluginsFile' configuration option.
6 | //
7 | // You can read more here:
8 | // https://on.cypress.io/plugins-guide
9 | // ***********************************************************
10 |
11 | // This function is called when a project is opened or re-opened (e.g. due to
12 | // the project's config changing)
13 |
14 | module.exports = (on, config) => {
15 | // `on` is used to hook into various events Cypress emits
16 | // `config` is the resolved Cypress config
17 | }
18 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/cypress/support/index.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/index.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 |
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 |
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/cypress/integration/status.component.spec.js:
--------------------------------------------------------------------------------
1 | describe('Status Component', () => {
2 |
3 | it('should display the component if a user is logged in', () => {
4 | cy
5 | .login('test@test.com', 'test');
6 | cy
7 | .location('pathname').should('eq', '/')
8 | .get('p').contains('You logged in test@test.com!')
9 | .get('a.btn').contains('Status').click();
10 | cy
11 | .location('pathname').should('eq', '/status')
12 | .get('h1').contains('Status Works!')
13 | .get('a.btn').contains('Home');
14 | });
15 |
16 | it('should not display the component if a user is not logged in', () => {
17 | cy
18 | .visit('/')
19 | .get('a.btn').contains('Status').click();
20 | cy
21 | .location('pathname').should('eq', '/log-in')
22 | .get('h1').contains('Status Works!').should('not.be.visible');
23 | });
24 |
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/services/auth.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import { Observable } from 'rxjs/Observable';
4 |
5 | import { User } from '../models/user';
6 |
7 |
8 | @Injectable()
9 | export class AuthService {
10 | private BASE_URL = 'http://localhost:1337';
11 |
12 | constructor(private http: HttpClient) {}
13 |
14 | getToken(): string {
15 | return localStorage.getItem('token');
16 | }
17 |
18 | logIn(email: string, password: string): Observable {
19 | const url = `${this.BASE_URL}/login`;
20 | return this.http.post(url, {email, password});
21 | }
22 |
23 | signUp(email: string, password: string): Observable {
24 | const url = `${this.BASE_URL}/register`;
25 | return this.http.post(url, {email, password});
26 | }
27 |
28 | getStatus(): Observable {
29 | const url = `${this.BASE_URL}/status`;
30 | return this.http.get(url);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | reports: [ 'html', 'lcovonly' ],
20 | fixWebpackSourcePaths: true
21 | },
22 | angularCli: {
23 | environment: 'dev'
24 | },
25 | reporters: ['progress', 'kjhtml'],
26 | port: 9876,
27 | colors: true,
28 | logLevel: config.LOG_INFO,
29 | autoWatch: true,
30 | browsers: ['Chrome'],
31 | singleRun: false
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/src/app/components/landing/landing.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 | import { Observable } from 'rxjs/Observable';
4 |
5 | import { AppState, selectAuthState } from '../../store/app.states';
6 | import { LogOut } from '../../store/actions/auth.actions';
7 |
8 |
9 | @Component({
10 | selector: 'app-landing',
11 | templateUrl: './landing.component.html',
12 | styleUrls: ['./landing.component.css']
13 | })
14 | export class LandingComponent implements OnInit {
15 |
16 | getState: Observable;
17 | isAuthenticated: false;
18 | user = null;
19 | errorMessage = null;
20 |
21 | constructor(
22 | private store: Store
23 | ) {
24 | this.getState = this.store.select(selectAuthState);
25 | }
26 |
27 | ngOnInit() {
28 | this.getState.subscribe((state) => {
29 | this.isAuthenticated = state.isAuthenticated;
30 | this.user = state.user;
31 | this.errorMessage = state.errorMessage;
32 | });
33 | }
34 |
35 | logOut(): void {
36 | this.store.dispatch(new LogOut);
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Michael Herman
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/app/components/log-in/log-in.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 | import { Observable } from 'rxjs/Observable';
4 |
5 | import { User } from '../../models/user';
6 | import { AppState, selectAuthState } from '../../store/app.states';
7 | import { LogIn } from '../../store/actions/auth.actions';
8 |
9 |
10 | @Component({
11 | selector: 'app-log-in',
12 | templateUrl: './log-in.component.html',
13 | styleUrls: ['./log-in.component.css']
14 | })
15 | export class LogInComponent implements OnInit {
16 |
17 | user: User = new User();
18 | getState: Observable;
19 | errorMessage: string | null;
20 |
21 | constructor(
22 | private store: Store
23 | ) {
24 | this.getState = this.store.select(selectAuthState);
25 | }
26 |
27 | ngOnInit() {
28 | this.getState.subscribe((state) => {
29 | this.errorMessage = state.errorMessage;
30 | });
31 | }
32 |
33 | onSubmit(): void {
34 | const payload = {
35 | email: this.user.email,
36 | password: this.user.password
37 | };
38 | this.store.dispatch(new LogIn(payload));
39 | }
40 |
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/components/sign-up/sign-up.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 | import { Observable } from 'rxjs/Observable';
4 |
5 | import { User } from '../../models/user';
6 | import { AppState, selectAuthState } from '../../store/app.states';
7 | import { SignUp } from '../../store/actions/auth.actions';
8 |
9 |
10 | @Component({
11 | selector: 'app-sign-up',
12 | templateUrl: './sign-up.component.html',
13 | styleUrls: ['./sign-up.component.css']
14 | })
15 | export class SignUpComponent implements OnInit {
16 |
17 | user: User = new User();
18 | getState: Observable;
19 | errorMessage: string | null;
20 |
21 | constructor(
22 | private store: Store
23 | ) {
24 | this.getState = this.store.select(selectAuthState);
25 | }
26 |
27 | ngOnInit() {
28 | this.getState.subscribe((state) => {
29 | this.errorMessage = state.errorMessage;
30 | });
31 | }
32 |
33 | onSubmit(): void {
34 | const payload = {
35 | email: this.user.email,
36 | password: this.user.password
37 | };
38 | this.store.dispatch(new SignUp(payload));
39 | }
40 |
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/components/landing/landing.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Angular + NGRX
5 |
6 |
7 |
8 |
9 | You logged in {{user.email}}!
10 |
11 |
12 |
13 | Log in
14 | Sign up
15 |
16 |
17 |
Status
18 |
19 |
20 |
21 |
22 |
23 |
Current State
24 |
25 | - isAuthenticated - {{isAuthenticated}}
26 | - user.email - {{ user?.email || 'null'}}
27 | - user.token - {{ user?.token || 'null'}}
28 | - errorMessage - {{ errorMessage || 'null'}}
29 |
30 |
31 |
32 |
33 |
34 |
2 |
3 |
Log in
4 |
5 |
6 |
7 | {{errorMessage}}
8 |
9 |
10 |
36 |
37 | Don't have an account?
38 | Sign up!
39 |
40 |
41 |
2 |
3 |
Sign up
4 |
5 |
6 |
7 | {{errorMessage}}
8 |
9 |
10 |
36 |
37 | Already have an account?
38 | Log in!
39 |
40 |
41 |