Merge pull request #36 from ne-peer/feat/manage

[feat -> master] scaffolding manage feature

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "^5.2.9",
     "@angular/platform-server": "^5.2.9",
     "@angular/router": "^5.2.9",
+    "@ngx-pwa/local-storage": "^5.3.0",
     "angularfire2": "^5.0.0-rc.5",
     "camelcase": "^5.0.0",
     "core-js": "^2.5.4",

src/app/app.component.css

@@ -1,5 +1,5 @@
 .container-flux {
-  min-height: 1100px;
+  /* something */
 }
 
 .sidenav-content {
@@ -13,13 +13,14 @@
 
 section.main-content {
   max-width: 1280px;
+  min-height: 70vh;
   margin: 0 auto;
   margin-bottom: 15px;
 }
 
 section.footer {
   margin-top: 80px;
-  height: 340px;
+  height: 224;
 }
 
 section.footer .footer-icon {
@@ -45,7 +46,7 @@ button.menu {
   color: #fff;
   padding-top: 8px;
   padding-bottom: 8px;
-  border-radius: 0.3em;	
+  border-radius: 0.3em;
 }
 
 .search-area {

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { LazyLoadImageModule } from 'ng-lazyload-image';
+import { LocalStorageModule } from '@ngx-pwa/local-storage';
 
 // Used material2 (for UI) Components
 import {
@@ -47,6 +48,7 @@ import { UnitAutocompleteComponent } from './components/action/unit-autocomplete
 import { ListComponent } from './components/layer/list/list.component';
 import { GoToComponent } from './components/action/snack/go-to/go-to.component';
 import { NavbarComponent } from './components/action/navbar/navbar.component';
+import { ExistComponent } from './components/user/exist/exist.component';
 
 // Firebase seittings
 const firebaseConfig = {
@@ -60,12 +62,12 @@ const firebaseConfig = {
 // Routes
 const appRoutes: Routes = [
   { path: '', redirectTo: 'idol', pathMatch: 'full' },
-  { path: 'search', component: ListComponent },
   { path: 'oauth', component: OauthComponent },
   { path: 'idol', component: DereListComponent },
   { path: 'unit', component: UnitListComponent },
   { path: 'idol/:name', component: DereDetailComponent },
   { path: 'unit/:unit', component: UnitDetailComponent },
+  { path: 'manage', component: ExistComponent },
 ];
 
 @NgModule({
@@ -82,6 +84,7 @@ const appRoutes: Routes = [
     ListComponent,
     GoToComponent,
     NavbarComponent,
+    ExistComponent,
   ],
   imports: [
     BrowserModule,
@@ -97,6 +100,7 @@ const appRoutes: Routes = [
     JsonpModule,
     FlexLayoutModule,
     LazyLoadImageModule,
+    LocalStorageModule,
     // Material2 components for UI.
     MatButtonModule,
     MatCardModule,

src/app/components/action/navbar/navbar.component.html

@@ -13,6 +13,10 @@
           <button mat-button routerLink="/unit">
             <mat-icon>group</mat-icon>ユニット一覧</button>
         </div>
+        <div fxFlex="auto">
+          <button mat-button routerLink="/manage">
+            <mat-icon>home</mat-icon>管理</button>
+        </div>
       </div>
     </div>
 
@@ -31,6 +35,10 @@
           <mat-icon>group</mat-icon>
           <span>ユニット一覧　</span>
         </button>
+        <button mat-menu-item routerLink="/manage">
+          <mat-icon>home</mat-icon>
+          <span>管理　</span>
+        </button>
       </mat-menu>
     </div>
   </mat-toolbar-row>

src/app/components/oauth/oauth.component.html

@@ -11,8 +11,8 @@ <h3>OAuth</h3>
     </button>
   <div>
     <p style="font-size:9px;color:#888;padding:12px;">
-      {{diagnostic}}
+      id = {{user?.id}}, name = {{user?.name}}
     </p>
   </div>
   <a mat-button class="link-button" routerLink="/">Close</a>
-</div>
+</div>

src/app/components/oauth/oauth.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-
 import { AngularFireAuth } from 'angularfire2/auth';
 import * as firebase from 'firebase/app';
+import { LocalStorage } from '@ngx-pwa/local-storage';
+import { User } from '../../models/store/user';
 
 @Component({
   selector: 'app-oauth',
@@ -10,38 +11,47 @@ import * as firebase from 'firebase/app';
 })
 export class OauthComponent implements OnInit {
 
-  // ログインユーザ情報
-  user;
+  private user: User;
+
+  constructor(private afAuth: AngularFireAuth, protected localStorage: LocalStorage) { }
 
-  constructor(private afAuth: AngularFireAuth) {
-    afAuth.authState.subscribe(user => {
-      if (!user) {
-        this.user = null;
+  ngOnInit() {
+    this.afAuth.authState.subscribe(res => {
+      if (!res) {
+        console.log('not logged in ');
         return;
       }
+      console.log('logged in ');
+      const user = new User(res.uid, res.displayName);
       this.user = user;
+      this.localStorage.setItem('user', user).subscribe(() => { });
     });
-  }
+  };
 
   signInWithGoogle() {
     this.afAuth.auth
       .signInWithPopup(new firebase.auth.GoogleAuthProvider())
-      .then(res => console.log(res));
+      .then(res => {
+        const user = new User(res.user.uid, res.user.displayName);
+        this.user = user;
+        this.localStorage.setItem('user', user).subscribe(() => { });
+      });
   }
 
   signInWithTwitter() {
     this.afAuth.auth
       .signInWithPopup(new firebase.auth.TwitterAuthProvider())
-      .then(res => console.log(res));
+      .then(res => {
+        const user = new User(res.user.uid, res.user.displayName);
+        this.user = user;
+        this.localStorage.setItem('user', user).subscribe(() => { });
+      });
   }
 
   signOut() {
     this.afAuth.auth.signOut();
+    this.localStorage.removeItem('user').subscribe(() => {});
+    this.user = null;
   }
 
-  ngOnInit() {
-  };
-
-  get diagnostic() { return JSON.stringify(this.user); }
-
 }

src/app/components/user/exist/exist.component.css

@@ -0,0 +1,9 @@
+.message {
+  padding: 10vh;
+  font-size: 22px;
+  color: #aaa;
+}
+
+.dd-text-small {
+  font-size: 8px;
+}

src/app/components/user/exist/exist.component.html

@@ -0,0 +1,9 @@
+<p class="lead text-center">
+  Hello <span class="text-success">{{user?.name}}</span> !!
+  <br>
+  <span class="dd-text-small">Your id is <span class="text-success">{{user?.id}}</span> .</span>
+</p>
+
+<p class="lead text-center message">
+  Sorry, this feature is work in progress.
+</p>

src/app/components/user/exist/exist.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExistComponent } from './exist.component';
+
+describe('ExistComponent', () => {
+  let component: ExistComponent;
+  let fixture: ComponentFixture<ExistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/user/exist/exist.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, CanActivate, RouterStateSnapshot, ActivatedRoute } from '@angular/router';
+import { AuthGuardService } from '../../../services/web/auth-guard.service';
+import { LocalStorage } from '@ngx-pwa/local-storage';
+import { User } from '../../../models/store/user';
+
+@Component({
+  selector: 'app-exist',
+  templateUrl: './exist.component.html',
+  styleUrls: ['./exist.component.css'],
+  providers: [AuthGuardService]
+})
+export class ExistComponent implements OnInit {
+
+  private user: User;
+
+  constructor(private authGuard: AuthGuardService, private acRouter: ActivatedRoute, private router: Router, protected localStorage: LocalStorage) { }
+
+  ngOnInit() {
+    const loggedIn: boolean = this.authGuard.canActivate(this.acRouter.snapshot, this.router.routerState.snapshot);
+
+    this.localStorage.getItem('user').subscribe(user => this.user = user);
+  }
+
+}

src/app/models/store/user.ts

@@ -0,0 +1,8 @@
+export class User {
+
+  constructor(
+      public id: string,
+      public name: string
+  ) { }
+
+}

src/app/services/web/auth-guard.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AuthGuardService } from './auth-guard.service';
+
+describe('AuthGuardService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuardService]
+    });
+  });
+
+  it('should be created', inject([AuthGuardService], (service: AuthGuardService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/web/auth-guard.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { LocalStorage } from '@ngx-pwa/local-storage';
+
+@Injectable()
+export class AuthGuardService implements CanActivate {
+
+  private loggedIn: boolean;
+
+  constructor(private router: Router, protected localStorage: LocalStorage) { }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+
+    this.localStorage.getItem('user').subscribe(user => {
+      if (user === null) {
+        // not logged in so redirect to login page with the return url
+        this.router.navigate(['/oauth'], { queryParams: { returnUrl: state.url } });
+        this.loggedIn = false;
+      }
+
+      this.loggedIn = true;
+    });
+
+    return this.loggedIn;
+  }
+
+}