Sqreem App Component
## Overview
* The App component, residing in the Sqreem Namespace, can be used as base component exclusively in the development of Sqreem Web Applications.
## Features
#### Application Bar
* The application bar, positioned fixed in the top of the page, includes the application image and name for the user to identify what app they are currently into. It also has a dropdown of user options:
* Change Password - where the Change Password modal will be shown.
* Logout - where the user can log out of his/her session.
#### Login
* The login form overlays on topmost of the screen when user session is not detected. It serves as the gateway for the user to log in to the app, renew their session (when user token expires), and reset their password (in case forgotten).
* Once a successful login takes place, the onuserready promise is resolved in the sqreem namespace's app variable and the user's access token is saved in a form of a cookie that has a total duration of seven (7) days.
#### Change Password Modal
* The Change Password modal includes a form wherein the user is expected to input his/her current password and the requested new password. The new password must be typed once again in the *Verify Password* field.
#### Report A bug Modal - *coming soon*
## Namespace Variables
* The App component makes use of the variable object *app* in the Sqreem namespace. This object includes:
* **.info** - where application ID, name and image can be get/ set.
* **.onpagesuccess** - a Promise that will be resolved when the app component is successfully loaded (regardless if user is logged in.)
* **.onuserready** - a Promise that will be resolved when a user is successfully authenticated in the app component.
* **.onuserexpire** - a Promise that will be resolved when the user's session expires (cookie expiration/ logout)
## Public Functions
* The App component has only private functions (accessible only from itself).
## Usage
#### Prerequisite
* Firstly, set application ID, name and image in your base component's init function.
```javascript
sq.ns.sqreem.app.info = {
"id": 'Application ID',
"name": 'Application Name',
"img": 'ApplicationImageLink'
}
```
#### Set methods on successful load
* In your base component's load function, you can set methods to be executed once the app component successfully loads (regardless if user is logged in.)
```javascript
sq.ns.sqreem.app.onpagesuccess.then(() => {
//functions to execute on page success
})
```
#### Set methods on successful user authentication
* In your base component's load function, you can set methods to be executed once the app component successfully authenticates a user
```javascript
sq.ns.sqreem.app.onuserready.then(() => {
//functions to execute on successful user authentication
})
```
#### Set methods on user expiration
* In your base component's load function, you can set methods to be executed once the user's session expires.
```javascript
sq.ns.sqreem.app.onuserexpire.then(() => {
//functions to execute on user expiration
})
```