initial commit

.angular-cli.json

@@ -19,7 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.sass"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -51,7 +51,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "sass",
     "component": {}
   }
 }

package.json

@@ -20,6 +20,9 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@ngrx/core": "^1.2.0",
+    "@ngrx/store": "^2.2.2",
+    "bulma": "^0.4.2",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
@@ -38,9 +41,11 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-coverage-istanbul-reporter": "^0.2.0",
+    "node-sass": "^4.5.2",
     "protractor": "~5.1.0",
+    "sass-loader": "^6.0.5",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
+    "typescript": "~2.3.1"
   }
 }

src/app/app-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const appRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/login',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes
+    )
+  ],
+  exports: [
+    RouterModule
+  ],
+})
+export class AppRoutingModule { }

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.sass']
 })
 export class AppComponent {
   title = 'app works!';

src/app/app.config.ts

@@ -0,0 +1,10 @@
+import { OpaqueToken } from '@angular/core';
+
+export let APP_CONFIG = new OpaqueToken('app.config');
+
+export const CONFIG = {
+  // apiEndpoint: 'http://192.168.1.106:1337',
+  apiEndpoint: 'http://gymcheadmin/api',
+  // imagesEndpoint: 'http://192.168.1.106:1337/images',
+  imagesEndpoint: 'http://gymcheadmin/api/images',
+};

src/app/app.module.ts

@@ -4,6 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import reducers from './shared/state/appState';
+import {AppRoutingModule} from './app-routing.module';
+import {StoreModule} from '@ngrx/store';
+
+import { APP_CONFIG, CONFIG } from './app.config';
+import {AuthenticationService} from "./shared/authentication.service";
 
 @NgModule({
   declarations: [
@@ -12,9 +18,14 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    AppRoutingModule,
+    StoreModule.provideStore(reducers),
+  ],
+  providers: [
+    { provide: APP_CONFIG, useValue: CONFIG },
+    AuthenticationService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/shared/authentication.service.ts

@@ -0,0 +1,35 @@
+import { Inject, Injectable }    from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { APP_CONFIG } from '../app.config';
+
+@Injectable()
+export class AuthenticationService {
+  private headers = new Headers({'Content-Type': 'application/json'});
+
+  constructor(
+    private http: Http, @Inject(APP_CONFIG) private config) { }
+
+  signIn(authUser): Promise<any> {
+    return this.http
+      .post(this.config.apiEndpoint + '/admin/auth/signin', JSON.stringify(authUser), {headers: this.headers})
+      .toPromise()
+      .then(() => console.log('login successful'))
+      .catch(this.handleError);
+  }
+
+  signOut(): Promise<any> {
+    return this.http
+      .get(this.config.apiEndpoint + '/admin/auth/signout', {headers: this.headers})
+      .toPromise()
+      .then(response => response)
+      .catch(this.handleError);
+  }
+
+  private handleError(error: any): Promise<any> {
+    console.error('An error occurred', error);
+    return Promise.reject(error);
+  }
+}

src/app/shared/state/appState.ts

@@ -0,0 +1,22 @@
+import '@ngrx/core/add/operator/select';
+import {compose} from '@ngrx/core/compose';
+// import {storeLogger} from 'ngrx-store-logger';
+import { combineReducers } from '@ngrx/store';
+
+import userReducer from './user/user.reducer';
+import {User} from './user/user.model';
+
+export interface AppState {
+  admin: User;
+}
+
+// uncomment the storeLogger import and this line
+// and comment out the other export default line to turn on
+// the store logger to see the actions as they flow through the store
+// turned this off by default as i found the logger kinda noisy
+
+// export default compose(storeLogger(), combineReducers)({
+
+export default compose(combineReducers)({
+  user: userReducer,
+});

src/app/shared/state/user/user.actions.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {Action} from '@ngrx/store';
+import {User} from './user.model';
+
+@Injectable()
+export class UserActions {
+  static LOAD_USER = 'LOAD_USER';
+  static CLEAR_USER = 'CLEAR_USER';
+
+  loadUser(user: User): Action {
+    return {
+      type: UserActions.LOAD_USER,
+      payload: user
+    };
+  }
+
+  clearUser(): Action {
+    return {
+      type: UserActions.CLEAR_USER
+    };
+  }
+}

src/app/shared/state/user/user.model.ts

@@ -0,0 +1,8 @@
+export class User {
+  id: string;
+  email: string;
+  name: string;
+  profileImage: string;
+  lastSignInAt: string;
+  updatedAt: string;
+}

src/app/shared/state/user/user.reducer.ts

@@ -0,0 +1,27 @@
+import { Action } from '@ngrx/store';
+
+import { User } from './user.model';
+import { UserActions } from './user.actions';
+
+const initialState: User = {
+  id: null,
+  email: null,
+  name: null,
+  profileImage: null,
+  lastSignInAt: null,
+  updatedAt: null
+};
+
+export default function reducer(state = initialState, action: Action) {
+  switch (action.type) {
+    case UserActions.LOAD_USER: {
+      return action.payload;
+    }
+    case UserActions.CLEAR_USER: {
+      return initialState;
+    }
+    default: {
+      return state;
+    }
+  }
+}

src/styles.sass

@@ -0,0 +1,4 @@
+@import "./sass/variables.sass"
+
+
+@import "../node_modules/bulma/bulma.sass"

src/tsconfig.app.json

@@ -1,6 +1,16 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "lib": [
+      "es2016",
+      "dom"
+    ],
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "baseUrl": "",

src/tsconfig.spec.json

@@ -1,6 +1,15 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
+    "outDir": "../out-tsc/spec",
     "outDir": "../out-tsc/spec",
     "module": "commonjs",
     "target": "es5",

tsconfig.json

@@ -8,7 +8,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es6",
     "typeRoots": [
       "node_modules/@types"
     ],