``` npm install @anli/user --save ```
npm install @anli/user --save
`
`
npm install @ngrx/store @ngrx/effects @ngrx/entity --save
npm install @ngrx/store-devtools --save-dev
`
`
npm install angularfire2@5.0.0-rc.4 --save
npm install firebase@4.13.1 --save
`
`
npm install ramda --save
`
Usage
Update to src/environments/environment.ts:
`
export const environment = {
firebase: {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
}
}
`
Update to src/app/app.module.ts:
`javascript
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { UserModule } from '@anli/user';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
...
@NgModule({
...
imports: [
...
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
EffectsModule.forRoot([]),
StoreModule.forRoot({ }),
StoreDevtoolsModule.instrument({ maxAge: 25 }),
UserModule,
`
Update to user-profile-update.module.ts:
`javascript
import { ComponentsModule } from '@anli/user';
...
@NgModule({
...
imports: [
...
ComponentsModule,
`
Update to login.html:
`html
(click)="save(profileForm.form)" >
Save
`
Update to user-profile-update.ts:
`javascript
export class LoginPage {
...
// allow only login user to update profile
ionViewCanEnter(): Promise {
const promise = this.store.pipe(
select(selectCurrentUser),
map(res => R.isNil(res) ? false : true),
first(),
).toPromise();
promise.then((res) => {
if (!res) {
this.notification('Please login and try again.');
}
})
return promise;
}
// Update user profile and close page on success
save(form: FormGroup): void {
let loading = this.loadingCtrl.create({ content: 'Please wait...' });
loading.present();
this.store.dispatch(new UpdateCurrent(form.value));
this.store
.pipe(
select(selectError),
filter(res => !R.isNil(res)),
first(),
)
.subscribe((res: { ok: boolean, response?: string }) => {
loading.dismiss();
if (res.response) {
this.notification(res.response);
}
if (res.ok) {
this.navCtrl.pop();
}
});
}
notification(message: string, duration: number = 3000): void {
let toast = this.toastCtrl.create({
message,
duration,
});
toast.present();
}
``