# @anli/user

> ``` npm install @anli/user --save ```

Latest version **1.0.0** (published 2018-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @anli/user
pnpm add @anli/user
yarn add @anli/user
bun add @anli/user
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-05-11 |
| First published | 2018-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 115.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Su Anli |
| Maintainers | anli |

## Links

- npm: https://www.npmjs.com/package/@anli/user
- Homepage: https://github.com/anli/ionic-module-user
- npm.io page: https://npm.io/package/@anli/user

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.7.1

## Recent versions

- 1.0.0 (latest) — 2018-05-11

## README

# Ionic Module User

## Install

```
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
<user-profile-form #profileForm (onSubmit)="save($event)"></user-profile-form>

<ion-row justify-content-start padding-right padding-left>
  <button ion-button margin-top
    (click)="save(profileForm.form)" >
    Save
  </button>
</ion-row>
```

Update to `user-profile-update.ts`:

```javascript
export class LoginPage {
  ...
  // allow only login user to update profile
  ionViewCanEnter(): Promise<boolean> {
    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();
  }

```

---
_Source: https://npm.io/package/@anli/user · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
