ng-login-block
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

Login-Block

ng-login-block


Instantly add basic login forms to any app including an email verification step. This block wraps ng-login-forms inside of tabs (ng-mix-ui), which includes the following:

  • register-form, asks user for email, password, and repeat password.
  • verify-form, asks user for the passcode sent to the email.
  • login-form, asks user for email and password.
  • logout-form, session is cleared.
  • forgot-form, asks for email.
  • password-form, if code was good it then asks for a new password and to repeat it.

The register-form and the forgot-form both use the verify-form.

Just embed into any block parent and provide the domain and endpoints as props. This ng-login-block library uses ng-mix-ui, which has non-encapsulated styles, allowing you to easily style the forms and elements from the outside (or as props).

For the endpoints, you'll probably want to use 3 database tables:

  1. CODES: Aid in verifying an email address (code, email, password).
  2. USER: Validated registered users (email, password).
  3. TOKENS: Session tokens (token, email).
<ng-login-block
    domain="somedomain.com"
    forgotUrl="https://../forgot"
    forgotVerifyUrl="https://../forgot-verify"
    forgotPasswordUrl="https://../forgot-password"
    loginUrl="https://../login"
    logoutUrl="https://../logout"
    passwordUrl="https://../password"
    registerUrl="https://../register"
    registerVerifyUrl="https://../register-verify"
></ng-login-block>

domain

Just a resource for associating the session for a specific domain only. It's useful if you wish to have a shared table of users for different domains.


forgotUrl

Generate a new code (unless one is already saved) and email it.

  • Request:
  • Response:
    • { "body": { "errorMessage":null, "successMessage": "Sent code to email." } }

forgotVerifyUrl

Send the email address and try a code. If it is good, then it will proceed to the form to create a new password.

  • Request:
    • { "domain": "somedomain.com", "email", "some@email.com", "code": "CODE" }
  • Response:
    • { "body": { "errorMessage": null, "successMessage": "Code matched." } }

forgotPasswordUrl:

The new password form sends both the code and the new password. The endpoint needs to check the code and if it's good then update the user with their new password.

  • Request:
    • { "domain": "somedomain.com", "email", "some@email.com", "code": "CODE", "password": "NewPassword" }
  • Response:
    • { "body": { "errorMessage": null, "successMessage": "Code matched." } }

loginUrl:

Endpoint to check the password and return a session token if it's good. The token also needs ot be stored somewhere on the backend for checking other requests.

  • Request:
    • { "domain": "somedomain.com", "email", "some@email.com", "password": "SomePassword" }
  • Response:
    • { "body": { "errorMessage": null, "session": "#######", "successMessage": "Logged in." } }

logoutUrl:

Send the token and the endpoint to clear the session.

  • Request:
    • { "domain": "somedomain.com", "token", "#######" }
  • Response:
    • { "body": { "errorMessage": null, "session": "#######", "successMessage": "Logged out." } }

registerUrl:

Endpoint to generate a code, email it, store the password temporarily.

  • Request:
    • { "domain": "somedomain.com", "email", "some@email.com", "password": "SomePassword" }
  • Response:
    • { "body": { "errorMessage": null, "successMessage": "Saved user." } }

registerVerifyUrl:

This time the code is sent and if it's good then the user and password can be saved as a registered user.

  • Request:
    • { "domain": "somedomain.com", "email", "some@email.com", "code": "CODE" }
  • Response:
    • { "statusCode": "200", "body": { "errorMessage": null, "successMessage": "Saved user." } }

All requests (done by the library) need to go to a backend API that you provide. All requests are sent as POSTs from this library.

Dependencies (3)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i ng-login-block

    Weekly Downloads

    4

    Version

    1.0.7

    License

    none

    Unpacked Size

    47.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • 4html