8: add screenshots to readme and refactor interfaces

Author: TommiCodes

README.md

@@ -49,4 +49,17 @@ Add an angular jwt package, for handling the jwt, the login etc.
 
 Add the Auth guard, to make sure only LoggedIn Users can access the Protected Module  
 `ng g g Auth`  
-then implement the CanActivate interface
+then implement the CanActivate interface
+
+### Sample Screenshots
+Login View:
+![Login View](/screenshots/login-basic.jpg?raw=true "Login View")
+
+Login View with errors displayed:
+![Login View with errors](/screenshots/login-errors.jpg?raw=true "Login View with an errors displayed")
+
+Jwt Protected Dashboard after successfull login (only for Guard and Example purposes):
+![Dashboard for example purposes](/screenshots/jwt-protected-basic-dashboard.jpg?raw=true "Dashboard for example purposes")
+
+Register Form with passwords not matching error displayed:
+![Register Form with Passwords not matching error displayed](/screenshots/register-forms-with-passwords-not-matching-hint.jpg?raw=true "Register Form with Passwords not matching error displayed")

screenshots/jwt-protected-basic-dashboard.jpg

@@ -0,0 +1,47 @@
+
+/*
+Interface for the Refresh Token (can look different, based on your backend api)
+*/
+export interface RefreshToken {
+  id: number;
+  userId: number;
+  token: string;
+  refreshCount: number;
+  expiryDate: Date;
+}
+
+/*
+Interface for the Login Response (can look different, based on your backend api)
+*/
+export interface LoginResponse {
+  accessToken: string;
+  refreshToken: RefreshToken;
+  tokenType: string;
+}
+
+/*
+Interface for the Login Request (can look different, based on your backend api)
+*/
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+/*
+Interface for the Register Request (can look different, based on your backend api)
+*/
+export interface RegisterRequest {
+  email: string;
+  username: string;
+  firstname: string;
+  lastname: string;
+  password: string;
+}
+
+/*
+Interface for the Register Response (can look different, based on your backend api)
+*/
+export interface RegisterResponse {
+  status: number;
+  message: string;
+}

screenshots/login-basic.jpg

@@ -4,38 +4,7 @@ import { Injectable } from '@angular/core';
 import { map, Observable, of, switchMap, tap } from 'rxjs';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { MatSnackBar } from '@angular/material/snack-bar';
-
-export interface RefreshToken {
-  id: number;
-  userId: number;
-  token: string;
-  refreshCount: number;
-  expiryDate: Date;
-}
-
-export interface LoginResponse {
-  accessToken: string;
-  refreshToken: RefreshToken;
-  tokenType: string;
-}
-
-export interface LoginRequest {
-  email: string;
-  password: string;
-}
-
-export interface RegisterRequest {
-  email: string;
-  username: string;
-  firstname: string;
-  lastname: string;
-  password: string;
-}
-
-export interface RegisterResponse {
-  status: number;
-  message: string;
-}
+import { LoginRequest, LoginResponse, RegisterRequest, RegisterResponse } from '../../interfaces';
 
 export const fakeLoginResponse: LoginResponse = {
   // fakeAccessToken.....should all come from real backend