Initial commit by angular2-firebase-bootstrap generator

src/app/app.component.html

@@ -0,0 +1,16 @@
+<div class="container">
+    <h1>
+        {{title}}
+    </h1>
+    <div class="row" *ngIf="isLoggedIn()|async">
+        <app-display-user></app-display-user>
+    </div>
+    <div class="row">
+        <div *ngIf="!(isLoggedIn()|async)" class="col-md-4 col-md-offset-1">
+            <app-login-user></app-login-user>
+        </div>
+        <div *ngIf="!(isLoggedIn()|async)" class="col-md-4 col-md-offset-1">
+            <app-register-user></app-register-user>
+        </div>
+    </div>
+</div>

src/app/app.component.spec.ts

@@ -0,0 +1,41 @@
+/* tslint:disable:no-unused-variable */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {TestBed, async} from "@angular/core/testing";
+import {AppComponent} from "./app.component";
+import {AuthService} from "app/shared/auth.service";
+import {AuthServiceStub} from "app/shared/auth.service.stub";
+
+describe('AppComponent', () => {
+    beforeEach(() => {
+        let authServiceStub = new AuthServiceStub(true);
+
+        TestBed.configureTestingModule({
+            declarations: [
+                AppComponent
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA],
+            providers: [
+                {provide: AuthService, useValue: authServiceStub}
+            ]
+        });;
+    });
+
+    it('should create the app', async(() => {
+        let fixture = TestBed.createComponent(AppComponent);
+        let app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    }));
+
+    it(`should have as title 'app works!'`, async(() => {
+        let fixture = TestBed.createComponent(AppComponent);
+        let app = fixture.debugElement.componentInstance;
+        expect(app.title).toEqual('app works! - kanban2');
+    }));
+
+    it('should render title in a h1 tag', async(() => {
+        let fixture = TestBed.createComponent(AppComponent);
+        fixture.detectChanges();
+        let compiled = fixture.debugElement.nativeElement;
+        expect(compiled.querySelector('h1').textContent).toContain('app works! - kanban2');
+    }));
+});

src/app/app.component.ts

@@ -0,0 +1,19 @@
+import {Component} from "@angular/core";
+import {AuthService} from "app/shared/auth.service";
+import {Observable} from "rxjs";
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+    title = 'app works! - kanban2';
+
+    constructor(private authService: AuthService) {
+    }
+
+    isLoggedIn(): Observable<boolean> {
+        return this.authService.isLoggedIn();
+    }
+}

src/app/app.module.ts

@@ -0,0 +1,33 @@
+import {BrowserModule} from "@angular/platform-browser";
+import {NgModule} from "@angular/core";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {HttpModule} from "@angular/http";
+import {AppComponent} from "./app.component";
+import {authConfig, firebaseConfig} from "environments/firebaseConfig";
+import {AngularFireModule} from "angularfire2";
+import {AuthService} from "app/shared/auth.service";
+import {LoginUserComponent} from "app/login-user/login-user.component";
+import {DisplayUserComponent} from "app/display-user/display-user.component";
+import {RegisterUserComponent} from "app/register-user/register-user.component";
+import {AlertModule} from "ng2-bootstrap";
+
+@NgModule({
+    declarations: [
+        AppComponent,
+        DisplayUserComponent,
+        LoginUserComponent,
+        RegisterUserComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpModule,
+        AlertModule.forRoot(),
+        AngularFireModule.initializeApp(firebaseConfig, authConfig)
+    ],
+    providers: [AuthService],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

src/app/display-user/display-user.component.html

@@ -0,0 +1,20 @@
+<div class="row">
+    <div class="col-md-6 col-md-offset-3">
+        <div class="panel panel-default">
+            <div class="panel-heading">User Information</div>
+            <ul class="list-group">
+                <li class="list-group-item">Email: {{(currentUser()|async).email}}</li>
+                <li class="list-group-item">Display Name: {{(currentUser()|async).displayName}}</li>
+                <li class="list-group-item">Uid: {{(currentUser()|async).uid}}</li>
+                <li class="list-group-item">Provider Id: {{(currentUser()|async).providerId}}</li>
+                <li class="list-group-item" *ngIf="(currentUser()|async).photoURL"><img
+                        [src]="(currentUser()|async).photoURL"/></li>
+            </ul>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-3 col-md-offset-5">
+        <a href="#" class="btn btn-lg btn-primary btn-block" (click)="logout()">Log out</a>
+    </div>
+</div>

src/app/display-user/display-user.component.spec.ts

@@ -0,0 +1,42 @@
+/* tslint:disable:no-unused-variable */
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {DisplayUserComponent} from "./display-user.component";
+import {AsyncSubject, Observable, ReplaySubject} from "rxjs";
+import {FormsModule} from "@angular/forms";
+import {AuthService} from "app/shared/auth.service";
+import {UserInfo} from "app/shared/user-info";
+import {By} from "@angular/platform-browser";
+import {AuthServiceStub} from "app/shared/auth.service.stub";
+
+describe('DisplayUserComponent', () => {
+
+    let component: DisplayUserComponent;
+    let fixture: ComponentFixture<DisplayUserComponent>;
+
+    beforeEach(async(() => {
+        let authServiceStub = new AuthServiceStub(true);
+
+        TestBed.configureTestingModule({
+            imports: [FormsModule],
+            declarations: [DisplayUserComponent],
+            providers: [
+                {provide: AuthService, useValue: authServiceStub}
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DisplayUserComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should display userinfo when logged in', () => {
+        expect(component).toBeTruthy();
+        let elements = fixture.debugElement.queryAll(By.css(".list-group-item"));
+        expect(elements[0].nativeElement.textContent).toContain("Email: my-email");
+        expect(elements[1].nativeElement.textContent).toContain("Display Name: my-display-name");
+        expect(elements[2].nativeElement.textContent).toContain("Uid: my-uid");
+        expect(elements[3].nativeElement.textContent).toContain("Provider Id: my-provider-id");
+    });
+});

src/app/display-user/display-user.component.ts

@@ -0,0 +1,22 @@
+import {Component, OnInit} from "@angular/core";
+import {AuthService} from "app/shared/auth.service";
+import {UserInfo} from "app/shared/user-info";
+import {Observable} from "rxjs";
+
+@Component({
+    selector: 'app-display-user',
+    templateUrl: './display-user.component.html',
+    styleUrls: ['./display-user.component.css']
+})
+export class DisplayUserComponent {
+
+    constructor(private authService: AuthService) {}
+
+    currentUser(): Observable<UserInfo> {
+        return this.authService.currentUser();
+    }
+
+    logout() {
+        this.authService.logout();
+    }
+}

src/app/index.ts

@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';

src/app/login-user/login-user.component.css

@@ -0,0 +1,33 @@
+
+.login-or {
+    position: relative;
+    font-size: 18px;
+    color: #aaa;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.span-or {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: -2px;
+    margin-left: -25px;
+    background-color: #fff;
+    width: 50px;
+    text-align: center;
+}
+
+.hr-or {
+    background-color: #cdcdcd;
+    height: 1px;
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+}
+
+h3 {
+    text-align: center;
+    line-height: 300%;
+}

src/app/login-user/login-user.component.html

@@ -0,0 +1,39 @@
+<h3>Please Log In</h3>
+<div class="row">
+    <div class="col-xs-6 col-sm-6 col-md-6">
+        <a href="#" class="btn btn-lg btn-primary btn-block" (click)="loginVia('twitter')">Twitter</a>
+    </div>
+    <div class="col-xs-6 col-sm-6 col-md-6">
+        <a href="#" class="btn btn-lg btn-info btn-block" (click)="loginVia('google')">Google</a>
+    </div>
+</div>
+<div class="login-or">
+    <hr class="hr-or">
+    <span class="span-or">or</span>
+</div>
+
+<form [formGroup]="form" role="form" (ngSubmit)="login(form.value)" novalidate>
+    <div class="form-group" [class.has-error]="email.invalid && email.touched">
+        <label for="email">Email</label>
+        <input [formControl]="email" required type="text" class="form-control" id="email" name="email">
+        <div class="help-block">
+            <ul class="list-unstyled">
+                <li *ngIf="email.valid || email.pristine">Enter your email address</li>
+                <li *ngIf="email.dirty && email.hasError('required')">An email address is required</li>
+            </ul>
+        </div>
+    </div>
+    <div class="form-group" [class.has-error]="password.invalid && password.touched">
+        <label for="password">Password</label>
+        <input [formControl]="password" type="password" class="form-control" id="password" name="password">
+        <div class="help-block">
+            <ul class="list-unstyled">
+                <li *ngIf="password.valid || password.pristine">Enter your password</li>
+                <li *ngIf="password.dirty && password.hasError('required')">A password is required</li>
+            </ul>
+        </div>
+    </div>
+    <button type="submit" class="btn btn btn-primary">
+        Log In
+    </button>
+</form>

src/app/login-user/login-user.component.spec.ts

@@ -0,0 +1,39 @@
+/* tslint:disable:no-unused-variable */
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {LoginUserComponent} from "./login-user.component";
+import {AuthService} from "app/shared/auth.service";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {AsyncSubject, Observable, ReplaySubject} from "rxjs";
+import {UserInfo} from "app/shared/user-info";
+import {AuthServiceStub} from "app/shared/auth.service.stub";
+
+describe('LoginUserComponent', () => {
+    let component: LoginUserComponent;
+    let fixture: ComponentFixture<LoginUserComponent>;
+
+    beforeEach(async(() => {
+        let authServiceStub = new AuthServiceStub(true);
+
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule,
+                ReactiveFormsModule
+            ],
+            declarations: [LoginUserComponent],
+            providers: [
+                {provide: AuthService, useValue: authServiceStub}
+            ]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LoginUserComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/login-user/login-user.component.ts

@@ -0,0 +1,35 @@
+import {Component} from "@angular/core";
+import {Observable} from "rxjs";
+import {AuthService} from "app/shared/auth.service";
+import {FormBuilder, Validators, AbstractControl, FormGroup} from "@angular/forms";
+
+@Component({
+    selector: 'app-login-user',
+    templateUrl: './login-user.component.html',
+    styleUrls: ['./login-user.component.css']
+})
+export class LoginUserComponent {
+    form: FormGroup;
+    email: AbstractControl;
+    password: AbstractControl;
+
+    constructor(private authService: AuthService, private fb: FormBuilder) {
+        this.form = fb.group({
+            'email': ['', Validators.required],
+            'password': ['', Validators.required]
+        });
+        this.email = this.form.controls['email'];
+        this.password = this.form.controls['password'];
+    }
+
+    login(value: any) {
+        if (this.form.valid) {
+            this.authService.login(this.email.value, this.password.value);
+            this.form.reset();
+        }
+    }
+
+    loginVia(provider: string) {
+        this.authService.loginViaProvider(provider);
+    }
+}

src/app/register-user/register-user.component.css

@@ -0,0 +1,37 @@
+.main {
+    max-width: 320px;
+    margin: 0 auto;
+}
+
+.login-or {
+    position: relative;
+    font-size: 18px;
+    color: #aaa;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.span-or {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: -2px;
+    margin-left: -25px;
+    background-color: #fff;
+    width: 50px;
+    text-align: center;
+}
+
+.hr-or {
+    background-color: #cdcdcd;
+    height: 1px;
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+}
+
+h3 {
+    text-align: center;
+    line-height: 300%;
+}

src/app/register-user/register-user.component.html

@@ -0,0 +1,56 @@
+<h3>Register</h3>
+<form [formGroup]="form" role="form" (ngSubmit)="onSubmit(form.value)" novalidate>
+    <div class="form-group" [class.has-error]="name.invalid && name.touched">
+        <label for="name" class="control-label">Name</label>
+        <input [formControl]="name" required type="text" class="form-control" id="name" name="name">
+        <div class="help-block">
+            <ul class="list-unstyled">
+                <li *ngIf="name.valid || name.pristine">Enter your name</li>
+                <li *ngIf="name.dirty && name.hasError('required')">A name is required</li>
+            </ul>
+        </div>
+    </div>
+    <div class="form-group" [class.has-error]="email.invalid && email.touched">
+        <label for="email" class="control-label">Email</label>
+        <input [formControl]="email" required type="email" class="form-control" id="email" name="email">
+        <div class="help-block">
+            <ul class="list-unstyled">
+                <li *ngIf="email.valid || email.pristine">Enter your email address</li>
+                <li *ngIf="email.dirty && email.hasError('required')">An email address is required</li>
+                <li *ngIf="email.dirty && email.hasError('pattern')">Please enter a valid email address</li>
+            </ul>
+        </div>
+    </div>
+    <div class="form-group" [class.has-error]="password.invalid && password.touched">
+        <label for="password">Password</label>
+        <input [formControl]="password" type="password" required class="form-control" id="password" name="password">
+        <div class="help-block">
+            <ul class="list-unstyled">
+                <li *ngIf="password.dirty && password.valid || password.pristine">Enter your password</li>
+                <li *ngIf="password.dirty && password.hasError('required')">A password is required</li>
+            </ul>
+        </div>
+    </div>
+    <div class="form-group"
+         [class.has-error]="(password2.invalid || form.hasError('mismatchedPasswords')) && password2.touched">
+        <label for="password2">Repeat Password</label>
+        <input [formControl]="password2" type="password" required class="form-control" id="password2"
+               name="password2">
+        <div class="help-block">
+            <ul class="list-unstyled">
+                <li *ngIf="(password2.valid && !form.hasError('mismatchedPasswords')) || password2.pristine">Repeat
+                    your
+                    password
+                </li>
+                <li *ngIf="password2.dirty && password2.hasError('required')">A password is required</li>
+                <li *ngIf="password2.dirty && password2.valid && form.hasError('mismatchedPasswords')">Passwords
+                    don't
+                    match
+                </li>
+            </ul>
+        </div>
+    </div>
+    <button type="submit" class="btn btn btn-primary">
+        Register
+    </button>
+</form>

src/app/register-user/register-user.component.spec.ts

@@ -0,0 +1,37 @@
+/* tslint:disable:no-unused-variable */
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import {RegisterUserComponent} from "./register-user.component";
+import {ReactiveFormsModule, FormsModule} from "@angular/forms";
+import {AuthService} from "app/shared/auth.service";
+import {AuthServiceStub} from "app/shared/auth.service.stub";
+
+describe('RegisterUserComponent', () => {
+    let component: RegisterUserComponent;
+    let fixture: ComponentFixture<RegisterUserComponent>;
+
+    beforeEach(async(() => {
+        let authServiceStub = new AuthServiceStub(true);
+
+        TestBed.configureTestingModule({
+            declarations: [RegisterUserComponent],
+            imports: [
+                FormsModule,
+                ReactiveFormsModule
+            ],
+            providers: [
+                {provide: AuthService, useValue: authServiceStub}
+            ]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RegisterUserComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/register-user/register-user.component.ts

@@ -0,0 +1,61 @@
+import {Component, OnInit} from "@angular/core";
+import {AuthService} from "app/shared/auth.service";
+import {Observable} from "rxjs";
+import {FormGroup, AbstractControl, FormBuilder, Validators} from "@angular/forms";
+
+@Component({
+    selector: 'app-register-user',
+    templateUrl: './register-user.component.html',
+    styleUrls: ['./register-user.component.css']
+})
+export class RegisterUserComponent implements OnInit {
+    form: FormGroup;
+    email: AbstractControl;
+    name: AbstractControl;
+    password: AbstractControl;
+    password2: AbstractControl;
+
+    constructor(private authService: AuthService,
+                private fb: FormBuilder) {
+        this.form = fb.group({
+            'name': ['', Validators.required],
+            'email': ['', Validators.compose([
+                Validators.required,
+                Validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)]
+            )],
+            'password': ['', Validators.required],
+            'password2': ['', Validators.required]
+        }, {validator: this.matchingPasswords('password', 'password2')});
+        this.name = this.form.controls['name'];
+        this.email = this.form.controls['email'];
+        this.password = this.form.controls['password'];
+        this.password2 = this.form.controls['password2'];
+    }
+
+    ngOnInit(): void {
+    }
+
+    isLoggedIn(): Observable<boolean> {
+        return this.authService.isLoggedIn();
+    }
+
+    onSubmit(value: any) {
+        if (this.form.valid) {
+            this.authService.createUser(this.email.value, this.password.value, this.name.value);
+            this.form.reset();
+        }
+    }
+
+    matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
+        return (group: FormGroup): {[key: string]: any} => {
+            let password = group.controls[passwordKey];
+            let confirmPassword = group.controls[confirmPasswordKey];
+
+            if (password.value !== confirmPassword.value) {
+                return {
+                    mismatchedPasswords: true
+                };
+            }
+        }
+    }
+}

src/app/shared/auth.service.stub.ts

@@ -0,0 +1,34 @@
+import {AsyncSubject, Observable, ReplaySubject} from "rxjs";
+import {UserInfo} from "app/shared/user-info";
+
+export class AuthServiceStub {
+
+    constructor(private loggedin: boolean) {
+    }
+
+    login(email: string, password: string) {
+    }
+
+    currentUser(): Observable<UserInfo> {
+        let userInfo = new UserInfo();
+        userInfo.displayName = "my-display-name";
+        userInfo.email = "my-email";
+        userInfo.uid = "my-uid";
+        userInfo.isAnonymous = false;
+        userInfo.photoURL = "my-photo-url";
+        userInfo.providerId = "my-provider-id";
+
+        let replaySubject = new ReplaySubject();
+        if (this.loggedin) {
+            replaySubject.next(userInfo);
+        }
+        return replaySubject;
+    }
+
+    isLoggedIn(): Observable<boolean> {
+        let isLoggedInBS = new AsyncSubject<boolean>();
+        isLoggedInBS.next(true);
+        isLoggedInBS.complete();
+        return isLoggedInBS;
+    }
+}

src/app/shared/auth.service.ts

@@ -0,0 +1,124 @@
+import {Injectable, EventEmitter, Output} from "@angular/core";
+import {User} from "firebase";
+import {AngularFireAuth, AuthProviders, AuthMethods} from "angularfire2";
+import {BehaviorSubject} from "rxjs/BehaviorSubject";
+import {UserInfo} from "./user-info";
+import {Observable, Subject, ReplaySubject, AsyncSubject} from "rxjs";
+
+@Injectable()
+export class AuthService {
+    private userInfoSubject: ReplaySubject<UserInfo>;
+    private auth: User;
+
+    constructor(private angularFireAuth: AngularFireAuth) {
+        this.initUserInfoSubject();
+        // console.log("AuthService");
+        angularFireAuth.subscribe(auth => {
+            // console.log("auth: ", JSON.stringify(auth));
+            let userInfo = new UserInfo();
+            if (auth != null) {
+                this.auth = auth.auth;
+                userInfo.isAnonymous = auth.auth.isAnonymous;
+                userInfo.email = auth.auth.email;
+                userInfo.displayName = auth.auth.displayName;
+                userInfo.providerId = auth.auth.providerId;
+                userInfo.photoURL = auth.auth.photoURL;
+                userInfo.uid = auth.auth.uid;
+            } else {
+                this.auth = null;
+                userInfo.isAnonymous = true;
+            }
+            this.userInfoSubject.next(userInfo);
+        });
+    }
+
+    login(email: string, password: string) {
+        // console.log("login: ", email);
+        this.initUserInfoSubject();
+        this.angularFireAuth.login({email: email, password: password});
+    }
+
+    private initUserInfoSubject() {
+        this.userInfoSubject = new ReplaySubject<UserInfo>(1);
+    }
+
+    currentUser(): Observable<UserInfo> {
+        return this.userInfoSubject.asObservable();
+    }
+
+    logout() {
+        this.initUserInfoSubject();
+        this.angularFireAuth.logout();
+    }
+
+    isLoggedIn(): Observable<boolean> {
+        let isLoggedInBS = new AsyncSubject<boolean>();
+        this.userInfoSubject.subscribe(ui => {
+            // console.log("isLoggedIn: anonymous=" + ui.isAnonymous);
+                isLoggedInBS.next(!ui.isAnonymous);
+                isLoggedInBS.complete();
+            // setTimeout(() => {
+            // }, 0);
+        });
+        return isLoggedInBS;
+    }
+
+    updateDisplayName(displayName: string): Observable<string> {
+        let result = new Subject<string>();
+        //noinspection TypeScriptUnresolvedFunction
+        this.auth.updateProfile({displayName: displayName, photoURL: null}).then(a => {
+            result.next("success");
+        }).catch(err => result.error(err));
+        return result;
+    }
+
+    createUser(email: string, password: string, displayName: string) {
+        //noinspection TypeScriptUnresolvedFunction
+        this.angularFireAuth.createUser({email: email, password: password})
+            .then(auth => auth.auth.updateProfile({displayName: displayName, photoURL: null}));
+    }
+
+    updateEmail(email: string): Observable<string> {
+        let result = new Subject<string>();
+        //noinspection TypeScriptUnresolvedFunction
+        this.auth.updateEmail(email).then(a => {
+            result.next("success");
+        }).catch(err => result.error(err));
+        return result.asObservable();
+    }
+
+    updatePassword(password: string): Observable<string> {
+        let result = new Subject<string>();
+        //noinspection TypeScriptUnresolvedFunction
+        this.auth.updatePassword(password).then(a => {
+            result.next("success");
+        }).catch(err => result.error(err));
+        return result.asObservable();
+    }
+
+    loginViaProvider(provider: string): Observable<String> {
+        let result = new Subject<string>();
+        if (provider === "google") {
+            //noinspection TypeScriptUnresolvedFunction
+            this.angularFireAuth
+                .login({provider: AuthProviders.Google, method: AuthMethods.Popup})
+                //noinspection TypeScriptUnresolvedFunction
+                .  //noinspection TypeScriptUnresolvedFunction
+                then(auth => result.next("success"))
+                        .catch(err => result.error(err));
+            return result.asObservable();
+        }
+        else if (provider === "twitter") {
+            //noinspection TypeScriptUnresolvedFunction
+            this.angularFireAuth
+                .login({provider: AuthProviders.Twitter, method: AuthMethods.Popup})
+                //noinspection TypeScriptUnresolvedFunction
+                .  //noinspection TypeScriptUnresolvedFunction
+                then(auth => result.next("success"))
+                        .catch(err => result.error(err));
+            return result.asObservable();
+        }
+        result.error("Not a supported authentication method: " + provider)
+        return result.asObservable();
+    }
+}

src/app/shared/user-info.ts

@@ -0,0 +1,8 @@
+export class UserInfo {
+    isAnonymous: boolean;
+    email: string;
+    displayName: string;
+    photoURL?: string;
+    providerId: string;
+    uid: string;
+}

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};

src/environments/firebaseConfig.ts

@@ -0,0 +1,17 @@
+
+import {AuthMethods, AuthProviders} from "angularfire2";
+
+
+export const firebaseConfig = {
+    // Paste all this from the Firebase console...
+    apiKey: "***REMOVED***",
+    authDomain: "***REMOVED***",
+    databaseURL: "***REMOVED***",
+    storageBucket: "***REMOVED***",
+    messagingSenderId: "***REMOVED***"
+};
+
+export const authConfig = {
+    provider: AuthProviders.Password,
+    method: AuthMethods.Password
+};

src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>kanban2</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,12 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/polyfills.ts

@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

src/test.ts

@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+let context = require.context('./', true, /\.spec\.ts/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

src/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": "",
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

src/typings.d.ts

@@ -0,0 +1,2 @@
+// Typings reference file, you can add your own global typings here
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html