@acknow-srl/user

Handles users and their metadata on a GraphQL server.

Usage no npm install needed!

<script type="module">
  import acknowSrlUser from 'https://cdn.skypack.dev/@acknow-srl/user';
</script>

README

User

Handles users and their metadata on a GraphQL server.

AckUserModule (Module)

Methods

  • forRoot(config: AckUserConfig): void: configure the connection to the GraphQL server.

AckUserConfig (Interface)

  • server (string): GraphQL server URL.

AckUserListOptions (Interface)

  • attrs (string[]): An array of user's attributes to read when listing all users.
  • orderBy (string): The attribute to sort the user list by. You can prepend a "-" sign to sort users in descending order.

User (Interface)

A user model. It must always have an id attribute. All other attributes are optional.

AckAvatarConfig (Interface)

Describes avatars display options.

  • rating (string): either g, pg, r or x. Please, refer to Gravatar documentation. If not provided or empty, defaults to an empty string (equivalent to g).
  • secure (boolean|null): true to force HTTP with SSL (HTTPS), false to force HTTP, null to automatically use the current protocol. Defaults to null.
  • defaultAvatar (string): default avatar type. It can be the URL to a custom stored image or a predefined Gravatar type (gravatar, gravatar_default, mm, mystery, mysteryman, mp, mystery-person, identicon, monsterid, wavatar, retro, robohash, blank, 404). Please, refer to Gravatar documentation. Defaults to an empty string (equivalent to gravatar).
  • forceDefault (boolean): true to always force the default avatar, false to use the real user's avatar (if exists). Defaults to false.

App (Interface)

  • userId (number): The user ID.
  • appId (string): The app ID.
  • data (any|null): JSON object with the app data or null (if there are no data).

AckUser (Service)

It is provided in root, so it is available to the whole app.

Methods

  • me(): Observable<User|null>: returns an Observable with the authenticated user object, if exists. Otherwise, returns an Observable with null.
  • read(options: AckUserListOptions): Observable<User[]>: returns an Observable with all users, based on the given options (see AckUserListOptions Interface). Otherwise, returns an Observable with an empty array.
  • getById(userId: number): Observable<User|null>: returns an Observable with user data based on the given user ID. If the user does not exists, returns an Observable with null.
  • avatar(hashOrUser: User|string, size: number, config: AckAvatarConfig|null): return the URL to the avatar for a given user or MD5 hash, based on a given size and other options (see the AckAvatarConfig interface).

AckApp (Service)

It is provided in root, so it is available to the whole app.

Methods

  • read(userId: number): Observable<App[]>: returns an Observable with all app data for the given user ID. Otherwise, returns returns an Observable with an empty array.
  • get(app: App): Observable<App|null>: Returns an Observable with app data based on user ID and app ID. Otherwise, returns an Observable with null.
  • create(app: App): Observable<App|null>: Create an app for a given user. Returns an Observable with the created app. Otherwise, returns returns an Observable with null.
  • update(app: App): Observable<App|null>: Updates app data based on a given user ID and app ID. Returns an Observable with the updated app. Otherwise, returns returns an Observable with null.
  • delete(app: App): Observable<string>: Delete an app based on a given user ID and app ID. Returns an Observable with the deleted internal Postgraphile ID. Otherwise, returns returns an Observable with an empty string.

Example

AckAvatar (Component)

Displays user informations, like avatar, first name, last name and registration date.

Selector

ack-avatar

Input

  • user (User|string|null): the user object or an MD5 hash. If an empty value is supplied, the avatar is calculated on unknown@gravatar.com fake e-mail address. Defaults to null.
  • size (number): size for the user's avatar, in pixels. Defaults to 80.
  • alt (string): text for the avatar image alt attribute.
  • options (AckAvatarConfig): additional options to display the user's avatar.
/**
 * 1. Import the module and all classes you need in your main module (usually app.module.ts).
 */

import { AckUserModule, AckUserConfig } from '@acknow-srl/user';

/**
 * 2. Add the module to your app imports and configure it.
 */

 const conf: AckUserConfig = {
     server: 'http://my-graphql-server-url'
 };

@NgModule({
  declarations: [
    AppComponent
    ...
  ],
  imports: [
    ...
    AckUserModule.config(conf),
    ...
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

/**
 * 3. Import the AckUser and/or AckApp services in your components or services to use it.
 */

import { AckUser, User, AckApp, App } from '@acknow-srl/user';

@Component({
    ...
})
export class MyComponent implements OnInit {

    me: User|null;

    appData: App|null;

    constructor(private userService: AckUser, private appService: AckApp) {
    }

    ngOnInit() {

        // Sets the logged in user.

        this.userService.me().subscribe(user => {
            this.me = user;

            // Sets app data based on the logged in user ID and app ID.

            this.appService.get({userId: this.me.id, appId: 'my-app-id'}).subscribe(app => {
              this.appData = app;
            });

        },
        err => {
            this.me = null;
            this.appData = null;
        });
    }

}