|
| 1 | +import {Component, enableProdMode, Inject, provide} from '@angular/core'; |
| 2 | +import {bootstrap} from '@angular/platform-browser-dynamic'; |
| 3 | +import { |
| 4 | + AuthMethods, |
| 5 | + AuthProviders, |
| 6 | + defaultFirebase, |
| 7 | + AngularFire, |
| 8 | + FIREBASE_PROVIDERS, |
| 9 | + FirebaseListObservable, |
| 10 | + FirebaseApp |
| 11 | +} from '../../../dist/angularfire2'; |
| 12 | + |
| 13 | +enableProdMode(); |
| 14 | + |
| 15 | +import { COMMON_CONFIG } from '../../../src/test-config'; |
| 16 | + |
| 17 | +@Component({ |
| 18 | + template: ` |
| 19 | + <button id="logout" (click)="af.auth.logout()">Logout</button> |
| 20 | + <br><br> |
| 21 | + <blockquote> |
| 22 | + <h1>Anonymous Login</h1> |
| 23 | + <button id="login-anonymous" (click)="signInAnonymously()">Login Anonymously</button> |
| 24 | +
|
| 25 | + <p> |
| 26 | + Is Anonymous? |
| 27 | + <span id="is-anonymous"> |
| 28 | + {{ user?.isAnonymous }} |
| 29 | + </span> |
| 30 | + </p> |
| 31 | + </blockquote> |
| 32 | + <blockquote class="oauth"> |
| 33 | + <h1>OAuth Login</h1> |
| 34 | +
|
| 35 | +
|
| 36 | + <h2>OAuth Provider</h2> |
| 37 | + <select id="authProvider" #authProvider> |
| 38 | + <option selected>Twitter</option> |
| 39 | + <option>Facebook</option> |
| 40 | + <option>Google</option> |
| 41 | + <option>Github</option> |
| 42 | + </select> |
| 43 | +
|
| 44 | + <p> |
| 45 | + <label for="redirect">Redirect?</label> |
| 46 | + <input id="redirect" #redirect type="checkbox"> |
| 47 | + </p> |
| 48 | +
|
| 49 | + <p> |
| 50 | + <button (click)="signInWithOAuth(redirect.checked, authProvider.value)"> |
| 51 | + Sign In |
| 52 | + </button> |
| 53 | + </p> |
| 54 | + </blockquote> |
| 55 | +
|
| 56 | + <blockquote> |
| 57 | + <h1>Create User</h1> |
| 58 | + <input #createEmail type="email" placeholder="[email protected]"> |
| 59 | + <input #createPassword type="password" placeholder="password"> |
| 60 | + <button (click)="createUser(createEmail.value, createPassword.value)">Create</button> |
| 61 | + </blockquote> |
| 62 | +
|
| 63 | + <blockquote> |
| 64 | + <h1>Email and Password Login</h1> |
| 65 | + <input #loginEmail type="email" placeholder="[email protected]"> |
| 66 | + <input #loginPassword type="password" placeholder="password"> |
| 67 | + <button (click)="loginUser(loginEmail.value, loginPassword.value)">Login</button> |
| 68 | + </blockquote> |
| 69 | +
|
| 70 | + <blockquote> |
| 71 | + <h1>Custom Token Login</h1> |
| 72 | + <textarea #customToken type="text" placeholder="token"></textarea> |
| 73 | + <button (click)="signInWithCustomToken(customToken.value)">Login</button> |
| 74 | + </blockquote> |
| 75 | +
|
| 76 | + <hr> |
| 77 | +
|
| 78 | + <blockquote> |
| 79 | + <h2>Provider Data</h2> |
| 80 | + {{ user?.providerData && user.providerData[0] | json }} |
| 81 | + <span *ngIf="!user || !user.providerData">Not Logged In</span> |
| 82 | + </blockquote> |
| 83 | + `, |
| 84 | + selector: 'app' |
| 85 | +}) |
| 86 | +class App { |
| 87 | + user: any; |
| 88 | + questions: FirebaseListObservable<any>; |
| 89 | + constructor(public af: AngularFire) { |
| 90 | + af.auth.onAuth() |
| 91 | + .subscribe(user => { |
| 92 | + console.log('onAuth', user); |
| 93 | + this.user = user |
| 94 | + }); |
| 95 | + } |
| 96 | + |
| 97 | + signInAnonymously() { |
| 98 | + this.af.auth.login({ |
| 99 | + method: AuthMethods.Anonymous |
| 100 | + }) |
| 101 | + .then((user) => console.log(`Anonymous Login Success:`, user)) |
| 102 | + .catch(e => console.error(`Anonymous Login Failure:`, e)); |
| 103 | + } |
| 104 | + |
| 105 | + signInWithOAuth(redirect: boolean, provider: string) { |
| 106 | + this.af.auth.login({ |
| 107 | + method: redirect ? AuthMethods.Redirect : AuthMethods.Popup, |
| 108 | + provider: (<any>AuthProviders)[provider] |
| 109 | + }) |
| 110 | + .then((user) => console.log(`${provider} Login Success:`, user)) |
| 111 | + .catch(e => console.error(`${provider} Login Failure:`, e)); |
| 112 | + } |
| 113 | + |
| 114 | + createUser(email: string, password: string) { |
| 115 | + this.af.auth.createUser({ email, password }) |
| 116 | + .then((user) => console.log(`Create User Success:`, user)) |
| 117 | + .catch(e => console.error(`Create User Failure:`, e)); |
| 118 | + } |
| 119 | + |
| 120 | + loginUser(email: string, password: string) { |
| 121 | + this.af.auth.login({ email, password }, { |
| 122 | + method: AuthMethods.Password, |
| 123 | + provider: AuthProviders.Password |
| 124 | + }) |
| 125 | + .then((user) => console.log(`Password Login Success:`, user)) |
| 126 | + .catch(e => console.error(`Password Login Failure:`, e)); |
| 127 | + } |
| 128 | + |
| 129 | + signInWithCustomToken(token: string) { |
| 130 | + // TODO: this.af.auth.login({ token }); |
| 131 | + } |
| 132 | +} |
| 133 | + |
| 134 | +bootstrap(App, [ |
| 135 | + FIREBASE_PROVIDERS, |
| 136 | + defaultFirebase(COMMON_CONFIG)]).then(() => { |
| 137 | + console.log('bootstrap success'); |
| 138 | + }, (e:any) => { |
| 139 | + console.error('bootstrap failed', e); |
| 140 | + }); |
0 commit comments