fix(server): prevent delete base currency

feat: setup e2e

.github/workflows/e2e.yml

@@ -0,0 +1,68 @@
+name: E2E
+on:
+  push:
+    branches:
+      - main
+      - develop
+    paths:
+      - '**.ts'
+      - '**.tsx'
+      - '**/tsconfig.json'
+      - 'yarn.lock'
+      - '.github/workflows/e2e.yml'
+  pull_request:
+    paths:
+      - '**.ts'
+      - '**.tsx'
+      - '**/tsconfig.json'
+      - 'yarn.lock'
+      - '.github/workflows/e2e.yml'
+
+defaults:
+  run:
+    shell: 'bash'
+
+jobs:
+  test_setup:
+    name: Test setup
+    runs-on: ubuntu-latest
+    outputs:
+      preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
+    steps:
+      - name: Wait for Vercel preview deployment to be ready
+        uses: patrickedqvist/wait-for-vercel-preview@v1.3.1
+        id: waitForVercelPreviewDeployment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          max_timeout: 3000
+
+  test_e2e:
+    runs-on: ubuntu-latest
+    needs: test_setup
+    name: Playwright tests
+    timeout-minutes: 15
+    environment: ${{ vars.ENVIRONMENT_STAGE }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14 # Need for npm >=7.7
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install Playwright with deps
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npm run test:e2e
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: ${{ needs.test_setup.outputs.preview_url }}
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: test-results/
+          retention-days: 30

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 data
-.env
+.env
+test-results/

CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [0.8.3] - 06-04-2023
+
+`@bigcaptial/monorepo`
+
+- Switch to AGPL license to protect application's networks. by @abouolia
+
+`@bigcapital/webapp`
+
+### Added
+
+- Improve the style of authentication pages. by @abouolia
+- Remove the phone number field from the authentication pages. by @abouolia
+- Remove the phone number field from the users management. by @abouolia
+- Add all countries options to the setup page. by @abouolia
+
+### Fixed
+
+- Fix intent type of reset password success toast.
+
+`@bigcapital/server`
+
+### Added
+
+- Remove the phone number field from the authentication service. by @abouolia
+- Remove the phone number field from the users service. by @abouolia
+
 ## [0.8.1] - 26-03-2023
 
 `@bigcaptial/monorepo`

docker-compose.prod.yml

@@ -40,7 +40,7 @@ services:
     environment:
       # Mail
       - MAIL_HOST=${MAIL_HOST}
-      - MAIL_USERNAME=${MAIL_USERNAM}
+      - MAIL_USERNAME=${MAIL_USERNAME}
       - MAIL_PASSWORD=${MAIL_PASSWORD}
       - MAIL_PORT=${MAIL_PORT}
       - MAIL_SECURE=${MAIL_SECURE}
@@ -77,24 +77,26 @@ services:
     build:
       context: ./
       dockerfile: docker/migration/Dockerfile
-      args:
-        - DB_HOST=mysql
-        - DB_USER=${DB_USER}
-        - DB_PASSWORD=${DB_PASSWORD}
-        - DB_CHARSET=${DB_CHARSET}
-        - SYSTEM_DB_NAME=${SYSTEM_DB_NAME}
+    environment:
+      - DB_HOST=mysql
+      - DB_USER=${DB_USER}
+      - DB_PASSWORD=${DB_PASSWORD}
+      - DB_CHARSET=${DB_CHARSET}
+      - SYSTEM_DB_NAME=${SYSTEM_DB_NAME}
+    depends_on:
+      - mysql
 
   mysql:
     container_name: bigcapital-mysql
     build:
       context: ./docker/mysql
-      args:
-        - MYSQL_DATABASE=${SYSTEM_DB_NAME}
-        - MYSQL_USER=${DB_NAME}
-        - MYSQL_PASSWORD=${DB_PASSWORD}
-        - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
+    environment:
+      - MYSQL_DATABASE=${SYSTEM_DB_NAME}
+      - MYSQL_USER=${DB_USER}
+      - MYSQL_PASSWORD=${DB_PASSWORD}
+      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
     volumes:
-      - ./data/mysql/:/var/lib/mysql
+      - mysql:/var/lib/mysql
     expose:
       - '3306'
 
@@ -104,7 +106,7 @@ services:
     expose:
       - '27017'
     volumes:
-      - ./data/mongo/:/var/lib/mongodb
+      - mongo:/var/lib/mongodb
 
   redis:
     container_name: bigcapital-redis
@@ -113,4 +115,18 @@ services:
     expose:
       - "6379"
     volumes:
-      - ./data/redis:/data
+      - redis:/data
+
+# Volumes
+volumes:
+  mysql:
+    name: bigcapital_prod_mysql
+    driver: local
+
+  mongo:
+    name: bigcapital_prod_mongo
+    driver: local
+
+  redis:
+    name: bigcapital_prod_redis
+    driver: local

docker-compose.yml

@@ -9,13 +9,13 @@ services:
   mysql:
     build:
       context: ./docker/mysql
-      args:
-        - MYSQL_DATABASE=${SYSTEM_DB_NAME}
-        - MYSQL_USER=${DB_NAME}
-        - MYSQL_PASSWORD=${DB_PASSWORD}
-        - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
+    environment:
+      - MYSQL_DATABASE=${SYSTEM_DB_NAME}
+      - MYSQL_USER=${DB_USER}
+      - MYSQL_PASSWORD=${DB_PASSWORD}
+      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
     volumes:
-      - ./data/mysql/:/var/lib/mysql
+      - mysql:/var/lib/mysql
     expose:
       - '3306'
     ports:
@@ -26,7 +26,7 @@ services:
     expose:
       - '27017'
     volumes:
-      - ./data/mongo/:/var/lib/mongodb
+      - mongo:/var/lib/mongodb
     ports:
       - '27017:27017'
 
@@ -36,4 +36,18 @@ services:
     expose:
       - "6379"
     volumes:
-      - ./data/redis:/data
+      - redis:/data
+
+# Volumes
+volumes:
+  mysql:
+    name: bigcapital_dev_mysql
+    driver: local
+
+  mongo:
+    name: bigcapital_dev_mongo
+    driver: local
+
+  redis:
+    name: bigcapital_dev_redis
+    driver: local

docker/mysql/Dockerfile

@@ -1,9 +1,8 @@
 FROM mysql:5.7
 
+USER root
 ADD my.cnf /etc/mysql/conf.d/my.cnf
 
-RUN chown -R mysql:root /var/lib/mysql/
-
 ARG MYSQL_DATABASE=default_database
 ARG MYSQL_USER=default_user
 ARG MYSQL_PASSWORD=secret
@@ -14,5 +13,14 @@ ENV MYSQL_USER=$MYSQL_USER
 ENV MYSQL_PASSWORD=$MYSQL_PASSWORD
 ENV MYSQL_ROOT_PASSWORD=$MYSQL_ROOT_PASSWORD
 
+# Copy init sql file with env vars and then the script will substitute the variables.
+COPY ./init.sql /scripts/init.template.sql
+COPY ./docker-entrypoint.sh /docker-entrypoint-initdb.d/docker-initialize.sh
+
+# The scripts in the docker-entrypoint-initdb.d/ directory are executed as
+# the mysql user inside the MySQL Docker container.
+RUN chown -R mysql:root /docker-entrypoint-initdb.d
+RUN chown -R mysql:root /scripts
+
 CMD ["mysqld"]
 EXPOSE 3306

docker/mysql/docker-entrypoint.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# chmod u+rwx /scripts/init.template.sql
+cp /scripts/init.template.sql /scripts/init.sql
+
+# Replace environment variables in SQL files with their values
+if [ -n "$MYSQL_USER" ]; then
+    sed -i "s/{MYSQL_USER}/$MYSQL_USER/g" /scripts/init.sql
+fi
+if [ -n "$MYSQL_PASSWORD" ]; then
+    sed -i "s/{MYSQL_PASSWORD}/$MYSQL_PASSWORD/g" /scripts/init.sql
+fi
+if [ -n "$MYSQL_DATABASE" ]; then
+    sed -i "s/{MYSQL_DATABASE}/$MYSQL_DATABASE/g" /scripts/init.sql
+fi
+
+# Execute SQL file
+mysql -u root -p$MYSQL_ROOT_PASSWORD < /scripts/init.sql

docker/mysql/init.sql

@@ -0,0 +1,2 @@
+GRANT ALL PRIVILEGES ON *.* TO '{MYSQL_USER}'@'%' IDENTIFIED BY '{MYSQL_PASSWORD}' WITH GRANT OPTION;
+FLUSH PRIVILEGES;

e2e/authentication.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect, Page } from '@playwright/test';
+
+let authPage: Page;
+
+test.describe('authentication', () => {
+  test.beforeAll(async ({ browser }) => {
+    authPage = await browser.newPage();
+  });
+
+  test.describe('login', () => {
+    test.beforeAll(async () => {
+      await authPage.goto('/auth/login');
+    });
+    test('should show the login page.', async () => {
+      await expect(authPage.locator('body')).toContainText(
+        "Don't have an account? Sign up"
+      );
+    });
+    test('should email and password be required.', async () => {
+      await authPage.getByRole('button', { name: 'Log in' }).click();
+
+      await expect(authPage.locator('form')).toContainText(
+        'Email is a required field'
+      );
+      await expect(authPage.locator('form')).toContainText(
+        'Password is a required field'
+      );
+    });
+    test('should go to the register page when click on sign up link', async () => {
+      await authPage.getByRole('link', { name: 'Sign up' }).click();
+      await expect(authPage.url()).toContain('/auth/register');
+    });
+  });
+
+  test.describe('register', () => {
+    test.beforeAll(async () => {
+      await authPage.goto('/auth/register');
+    });
+    test('should first name, last name, email and password be required.', async () => {
+      await authPage.getByRole('button', { name: 'Register' }).click();
+
+      await expect(authPage.locator('form')).toContainText(
+        'First name is a required field'
+      );
+      await expect(authPage.locator('form')).toContainText(
+        'Last name is a required field'
+      );
+      await expect(authPage.locator('form')).toContainText(
+        'Email is a required field'
+      );
+      await expect(authPage.locator('form')).toContainText(
+        'Password is a required field'
+      );
+    });
+  });
+
+  test.describe('reset password', () => {
+    test.beforeAll(async () => {
+      await authPage.goto('/auth/send_reset_password');
+    });
+    test('should email be required.', async () => {
+      await authPage.getByRole('button', { name: 'Reset Password' }).click();
+      await expect(authPage.locator('form')).toContainText(
+        'Email is a required field'
+      );
+    });
+  });
+});

package-lock.json

@@ -941,6 +941,23 @@
         "esquery": "^1.0.1"
       }
     },
+    "@playwright/test": {
+      "version": "1.32.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
+      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "requires": {
+        "@types/node": "*",
+        "fsevents": "2.3.2",
+        "playwright-core": "1.32.3"
+      },
+      "dependencies": {
+        "playwright-core": {
+          "version": "1.32.3",
+          "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
+          "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg=="
+        }
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -986,8 +1003,7 @@
     "@types/node": {
       "version": "18.14.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.6.tgz",
-      "integrity": "sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==",
-      "dev": true
+      "integrity": "sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -2304,6 +2320,12 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "dev:server": "lerna run dev --scope \"@bigcapital/server\"",
     "build:server": "lerna run build --scope \"@bigcapital/server\"",
     "serve:server": "lerna run serve --scope \"@bigcapital/server\"",
+    "test:e2e": "playwright test",
     "prepare": "husky install"
   },
   "workspaces": [
@@ -21,7 +22,8 @@
     "@commitlint/config-lerna-scopes": "^17.4.2",
     "husky": "^8.0.3",
     "lerna": "^6.4.1",
-    "@commitlint/cli": "^17.4.2"
+    "@commitlint/cli": "^17.4.2",
+    "@playwright/test": "^1.32.3"
   },
   "engines": {
     "node": "14.x"
@@ -30,6 +32,5 @@
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
-  },
-  "dependencies": {}
+  }
 }

packages/server/src/api/controllers/Authentication.ts

@@ -1,26 +1,23 @@
 import { Request, Response, Router } from 'express';
 import { check, ValidationChain } from 'express-validator';
 import { Service, Inject } from 'typedi';
-import countries from 'country-codes-list';
-import parsePhoneNumber from 'libphonenumber-js';
 import BaseController from '@/api/controllers/BaseController';
 import asyncMiddleware from '@/api/middleware/asyncMiddleware';
-import AuthenticationService from '@/services/Authentication';
 import { ILoginDTO, ISystemUser, IRegisterDTO } from '@/interfaces';
 import { ServiceError, ServiceErrors } from '@/exceptions';
 import { DATATYPES_LENGTH } from '@/data/DataTypes';
 import LoginThrottlerMiddleware from '@/api/middleware/LoginThrottlerMiddleware';
-import config from '@/config';
+import AuthenticationApplication from '@/services/Authentication/AuthApplication';
 
 @Service()
 export default class AuthenticationController extends BaseController {
   @Inject()
-  authService: AuthenticationService;
+  private authApplication: AuthenticationApplication;
 
   /**
    * Constructor method.
    */
-  router() {
+  public router() {
     const router = Router();
 
     router.post(
@@ -56,9 +53,10 @@ export default class AuthenticationController extends BaseController {
   }
 
   /**
-   * Login schema.
+   * Login validation schema.
+   * @returns {ValidationChain[]}
    */
-  get loginSchema(): ValidationChain[] {
+  private get loginSchema(): ValidationChain[] {
     return [
       check('crediential').exists().isEmail(),
       check('password').exists().isLength({ min: 5 }),
@@ -66,9 +64,10 @@ export default class AuthenticationController extends BaseController {
   }
 
   /**
-   * Register schema.
+   * Register validation schema.
+   * @returns {ValidationChain[]}
    */
-  get registerSchema(): ValidationChain[] {
+  private get registerSchema(): ValidationChain[] {
     return [
       check('first_name')
         .exists()
@@ -89,71 +88,20 @@ export default class AuthenticationController extends BaseController {
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('phone_number')
-        .exists()
-        .isString()
-        .trim()
-        .escape()
-        .custom(this.phoneNumberValidator)
-        .isLength({ max: DATATYPES_LENGTH.STRING }),
       check('password')
         .exists()
         .isString()
         .trim()
         .escape()
         .isLength({ max: DATATYPES_LENGTH.STRING }),
-      check('country')
-        .exists()
-        .isString()
-        .trim()
-        .escape()
-        .custom(this.countryValidator)
-        .isLength({ max: DATATYPES_LENGTH.STRING }),
     ];
   }
 
-  /**
-   * Country validator.
-   */
-  countryValidator(value, { req }) {
-    const {
-      countries: { whitelist, blacklist },
-    } = config.registration;
-    const foundCountry = countries.findOne('countryCode', value);
-
-    if (!foundCountry) {
-      throw new Error('The country code is invalid.');
-    }
-    if (
-      // Focus with me! In case whitelist is not empty and the given coutry is not
-      // in whitelist throw the error.
-      //
-      // Or in case the blacklist is not empty and the given country exists
-      // in the blacklist throw the goddamn error.
-      (whitelist.length > 0 && whitelist.indexOf(value) === -1) ||
-      (blacklist.length > 0 && blacklist.indexOf(value) !== -1)
-    ) {
-      throw new Error('The country code is not supported yet.');
-    }
-    return true;
-  }
-
-  /**
-   * Phone number validator.
-   */
-  phoneNumberValidator(value, { req }) {
-    const phoneNumber = parsePhoneNumber(value, req.body.country);
-
-    if (!phoneNumber || !phoneNumber.isValid()) {
-      throw new Error('Phone number is invalid with the given country code.');
-    }
-    return true;
-  }
-
   /**
    * Reset password schema.
+   * @returns {ValidationChain[]}
    */
-  get resetPasswordSchema(): ValidationChain[] {
+  private get resetPasswordSchema(): ValidationChain[] {
     return [
       check('password')
         .exists()
@@ -170,8 +118,9 @@ export default class AuthenticationController extends BaseController {
 
   /**
    * Send reset password validation schema.
+   * @returns {ValidationChain[]}
    */
-  get sendResetPasswordSchema(): ValidationChain[] {
+  private get sendResetPasswordSchema(): ValidationChain[] {
     return [check('email').exists().isEmail().trim().escape()];
   }
 
@@ -180,11 +129,11 @@ export default class AuthenticationController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
-  async login(req: Request, res: Response, next: Function): Response {
+  private async login(req: Request, res: Response, next: Function): Response {
     const userDTO: ILoginDTO = this.matchedBodyData(req);
 
     try {
-      const { token, user, tenant } = await this.authService.signIn(
+      const { token, user, tenant } = await this.authApplication.signIn(
         userDTO.crediential,
         userDTO.password
       );
@@ -199,13 +148,11 @@ export default class AuthenticationController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
-  async register(req: Request, res: Response, next: Function) {
+  private async register(req: Request, res: Response, next: Function) {
     const registerDTO: IRegisterDTO = this.matchedBodyData(req);
 
     try {
-      const registeredUser: ISystemUser = await this.authService.register(
-        registerDTO
-      );
+      await this.authApplication.signUp(registerDTO);
 
       return res.status(200).send({
         type: 'success',
@@ -222,11 +169,11 @@ export default class AuthenticationController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
-  async sendResetPassword(req: Request, res: Response, next: Function) {
+  private async sendResetPassword(req: Request, res: Response, next: Function) {
     const { email } = this.matchedBodyData(req);
 
     try {
-      await this.authService.sendResetPassword(email);
+      await this.authApplication.sendResetPassword(email);
 
       return res.status(200).send({
         code: 'SEND_RESET_PASSWORD_SUCCESS',
@@ -244,12 +191,12 @@ export default class AuthenticationController extends BaseController {
    * @param {Request} req
    * @param {Response} res
    */
-  async resetPassword(req: Request, res: Response, next: Function) {
+  private async resetPassword(req: Request, res: Response, next: Function) {
     const { token } = req.params;
     const { password } = req.body;
 
     try {
-      await this.authService.resetPassword(token, password);
+      await this.authApplication.resetPassword(token, password);
 
       return res.status(200).send({
         type: 'RESET_PASSWORD_SUCCESS',
@@ -263,7 +210,7 @@ export default class AuthenticationController extends BaseController {
   /**
    * Handles the service errors.
    */
-  handlerErrors(error, req: Request, res: Response, next: Function) {
+  private handlerErrors(error, req: Request, res: Response, next: Function) {
     if (error instanceof ServiceError) {
       if (
         ['INVALID_DETAILS', 'invalid_password'].indexOf(error.errorType) !== -1
@@ -295,18 +242,10 @@ export default class AuthenticationController extends BaseController {
           errors: [{ type: 'EMAIL.NOT.REGISTERED', code: 500 }],
         });
       }
-    }
-    if (error instanceof ServiceErrors) {
-      const errorReasons = [];
-
-      if (error.hasType('PHONE_NUMBER_EXISTS')) {
-        errorReasons.push({ type: 'PHONE_NUMBER_EXISTS', code: 100 });
-      }
-      if (error.hasType('EMAIL_EXISTS')) {
-        errorReasons.push({ type: 'EMAIL.EXISTS', code: 200 });
-      }
-      if (errorReasons.length > 0) {
-        return res.boom.badRequest(null, { errors: errorReasons });
+      if (error.errorType === 'EMAIL_EXISTS') {
+        return res.status(400).send({
+          errors: [{ type: 'EMAIL.EXISTS', code: 600 }],
+        });
       }
     }
     next(error);

packages/server/src/api/controllers/InviteUsers.ts

@@ -11,10 +11,10 @@ import AcceptInviteUserService from '@/services/InviteUsers/AcceptInviteUser';
 @Service()
 export default class InviteUsersController extends BaseController {
   @Inject()
-  inviteUsersService: InviteTenantUserService;
+  private inviteUsersService: InviteTenantUserService;
 
   @Inject()
-  acceptInviteService: AcceptInviteUserService;
+  private acceptInviteService: AcceptInviteUserService;
 
   /**
    * Routes that require authentication.
@@ -68,13 +68,13 @@ export default class InviteUsersController extends BaseController {
 
   /**
    * Invite DTO schema validation.
+   * @returns {ValidationChain[]}
    */
-  get inviteUserDTO() {
+  private get inviteUserDTO() {
     return [
       check('first_name').exists().trim().escape(),
       check('last_name').exists().trim().escape(),
-      check('phone_number').exists().trim().escape(),
-      check('password').exists().trim().escape(),
+      check('password').exists().trim().escape().isLength({ min: 5 }),
       param('token').exists().trim().escape(),
     ];
   }
@@ -85,17 +85,13 @@ export default class InviteUsersController extends BaseController {
    * @param {Response} res - Response object.
    * @param {NextFunction} next - Next function.
    */
-  async sendInvite(req: Request, res: Response, next: Function) {
+  private async sendInvite(req: Request, res: Response, next: Function) {
     const sendInviteDTO = this.matchedBodyData(req);
     const { tenantId } = req;
     const { user } = req;
 
     try {
-      const { invite } = await this.inviteUsersService.sendInvite(
-        tenantId,
-        sendInviteDTO,
-        user
-      );
+      await this.inviteUsersService.sendInvite(tenantId, sendInviteDTO, user);
       return res.status(200).send({
         type: 'success',
         code: 'INVITE.SENT.SUCCESSFULLY',
@@ -112,7 +108,7 @@ export default class InviteUsersController extends BaseController {
    * @param {Response} res - Response object.
    * @param {NextFunction} next - Next function.
    */
-  async resendInvite(req: Request, res: Response, next: NextFunction) {
+  private async resendInvite(req: Request, res: Response, next: NextFunction) {
     const { tenantId, user } = req;
     const { userId } = req.params;
 
@@ -135,7 +131,7 @@ export default class InviteUsersController extends BaseController {
    * @param {Response} res -
    * @param {NextFunction} next -
    */
-  async accept(req: Request, res: Response, next: Function) {
+  private async accept(req: Request, res: Response, next: Function) {
     const inviteUserInput: IInviteUserInput = this.matchedBodyData(req, {
       locations: ['body'],
       includeOptionals: true,
@@ -161,7 +157,7 @@ export default class InviteUsersController extends BaseController {
    * @param {Response} res -
    * @param {NextFunction} next -
    */
-  async invited(req: Request, res: Response, next: Function) {
+  private async invited(req: Request, res: Response, next: Function) {
     const { token } = req.params;
 
     try {
@@ -181,7 +177,12 @@ export default class InviteUsersController extends BaseController {
   /**
    * Handles the service error.
    */
-  handleServicesError(error, req: Request, res: Response, next: Function) {
+  private handleServicesError(
+    error,
+    req: Request,
+    res: Response,
+    next: Function
+  ) {
     if (error instanceof ServiceError) {
       if (error.errorType === 'EMAIL_EXISTS') {
         return res.status(400).send({

packages/server/src/api/controllers/Organization.ts

@@ -8,18 +8,12 @@ import JWTAuth from '@/api/middleware/jwtAuth';
 import TenancyMiddleware from '@/api/middleware/TenancyMiddleware';
 import AttachCurrentTenantUser from '@/api/middleware/AttachCurrentTenantUser';
 import OrganizationService from '@/services/Organization/OrganizationService';
-import {
-  ACCEPTED_CURRENCIES,
-  MONTHS,
-  ACCEPTED_LOCALES,
-} from '@/services/Organization/constants';
+import { MONTHS, ACCEPTED_LOCALES } from '@/services/Organization/constants';
 import { DATE_FORMATS } from '@/services/Miscellaneous/DateFormats/constants';
 
 import { ServiceError } from '@/exceptions';
 import BaseController from '@/api/controllers/BaseController';
 
-const ACCEPTED_LOCATIONS = ['libya'];
-
 @Service()
 export default class OrganizationController extends BaseController {
   @Inject()
@@ -65,8 +59,8 @@ export default class OrganizationController extends BaseController {
     return [
       check('name').exists().trim(),
       check('industry').optional().isString(),
-      check('location').exists().isString().isIn(ACCEPTED_LOCATIONS),
-      check('base_currency').exists().isIn(ACCEPTED_CURRENCIES),
+      check('location').exists().isString().isISO31661Alpha2(),
+      check('base_currency').exists().isISO4217(),
       check('timezone').exists().isIn(moment.tz.names()),
       check('fiscal_year').exists().isIn(MONTHS),
       check('language').exists().isString().isIn(ACCEPTED_LOCALES),

packages/server/src/api/controllers/Users.ts

@@ -47,7 +47,6 @@ export default class UsersController extends BaseController {
         check('first_name').exists(),
         check('last_name').exists(),
         check('email').exists().isEmail(),
-        check('phone_number').optional().isMobilePhone(),
         check('role_id').exists().isNumeric().toInt(),
       ],
       this.validationResult,

packages/server/src/commands/bigcapital.ts

@@ -4,6 +4,7 @@ import color from 'colorette';
 import argv from 'getopts';
 import Knex from 'knex';
 import { knexSnakeCaseMappers } from 'objection';
+import '../before';
 import config from '../config';
 
 function initSystemKnex() {

packages/server/src/database/migrations/20230405232607_drop_phone_number_from_users.js

@@ -0,0 +1,9 @@
+exports.up = function (knex) {
+  return knex.schema.table('users', (table) => {
+    table.dropColumn('phone_number');
+  });
+};
+
+exports.down = function (knex) {
+  return knex.schema.table('users', (table) => {});
+};

packages/server/src/interfaces/Authentication.ts

@@ -1,29 +1,77 @@
 import { ISystemUser } from './User';
 import { ITenant } from './Tenancy';
+import { SystemUser } from '@/system/models';
 
 export interface IRegisterDTO {
-  firstName: string,
-  lastName: string,
-  email: string,
-  password: string,
-  organizationName: string,
-};
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  organizationName: string;
+}
 
 export interface ILoginDTO {
-  crediential: string,
-  password: string,
-};
+  crediential: string;
+  password: string;
+}
 
 export interface IPasswordReset {
-  id: number,
-  email: string,
-  token: string,
-  createdAt: Date,
-};
+  id: number;
+  email: string;
+  token: string;
+  createdAt: Date;
+}
 
 export interface IAuthenticationService {
-  signIn(emailOrPhone: string, password: string): Promise<{ user: ISystemUser, token: string, tenant: ITenant }>;
+  signIn(
+    email: string,
+    password: string
+  ): Promise<{ user: ISystemUser; token: string; tenant: ITenant }>;
   register(registerDTO: IRegisterDTO): Promise<ISystemUser>;
   sendResetPassword(email: string): Promise<IPasswordReset>;
   resetPassword(token: string, password: string): Promise<void>;
+}
+
+export interface IAuthSigningInEventPayload {
+  email: string;
+  password: string;
+  user: ISystemUser;
+}
+
+export interface IAuthSignedInEventPayload {
+  email: string;
+  password: string;
+  user: ISystemUser;
+}
+
+export interface IAuthSigningUpEventPayload {
+  signupDTO: IRegisterDTO;
+}
+
+export interface IAuthSignedUpEventPayload {
+  signupDTO: IRegisterDTO;
+  tenant: ITenant;
+  user: ISystemUser;
+}
+
+export interface IAuthSignInPOJO {
+  user: ISystemUser;
+  token: string;
+  tenant: ITenant;
+}
+
+export interface IAuthResetedPasswordEventPayload {
+  user: SystemUser;
+  token: string;
+  password: string;
+}
+
+
+export interface IAuthSendingResetPassword {
+  user: ISystemUser,
+  token: string;
+}
+export interface IAuthSendedResetPassword {
+  user: ISystemUser,
+  token: string;
 }

packages/server/src/interfaces/User.ts

@@ -9,7 +9,6 @@ export interface ISystemUser extends Model {
   active: boolean;
   password: string;
   email: string;
-  phoneNumber: string;
 
   roleId: number;
   tenantId: number;
@@ -26,7 +25,6 @@ export interface ISystemUserDTO {
   firstName: string;
   lastName: string;
   password: string;
-  phoneNumber: string;
   active: boolean;
   email: string;
   roleId?: number;
@@ -35,7 +33,6 @@ export interface ISystemUserDTO {
 export interface IEditUserDTO {
   firstName: string;
   lastName: string;
-  phoneNumber: string;
   active: boolean;
   email: string;
   roleId: number;
@@ -44,7 +41,6 @@ export interface IEditUserDTO {
 export interface IInviteUserInput {
   firstName: string;
   lastName: string;
-  phoneNumber: string;
   password: string;
 }
 export interface IUserInvite {
@@ -111,7 +107,6 @@ export interface ITenantUser {
   id?: number;
   firstName: string;
   lastName: string;
-  phoneNumber: string;
   active: boolean;
   email: string;
   roleId?: number;

packages/server/src/jobs/ResetPasswordMail.ts

@@ -1,5 +1,5 @@
 import { Container, Inject } from 'typedi';
-import AuthenticationService from '@/services/Authentication';
+import AuthenticationService from '@/services/Authentication/AuthApplication';
 
 export default class WelcomeEmailJob {
   /**

packages/server/src/jobs/WelcomeSMS.ts

@@ -1,5 +1,5 @@
 import { Container, Inject } from 'typedi';
-import AuthenticationService from '@/services/Authentication';
+import AuthenticationService from '@/services/Authentication/AuthApplication';
 
 export default class WelcomeSMSJob {
   /**

packages/server/src/jobs/welcomeEmail.ts

@@ -1,5 +1,5 @@
 import { Container } from 'typedi';
-import AuthenticationService from '@/services/Authentication';
+import AuthenticationService from '@/services/Authentication/AuthApplication';
 
 export default class WelcomeEmailJob {
   /**

packages/server/src/services/Authentication/AuthApplication.ts

@@ -0,0 +1,56 @@
+import { Service, Inject, Container } from 'typedi';
+import { IRegisterDTO, ISystemUser, IPasswordReset } from '@/interfaces';
+import { AuthSigninService } from './AuthSignin';
+import { AuthSignupService } from './AuthSignup';
+import { AuthSendResetPassword } from './AuthSendResetPassword';
+
+@Service()
+export default class AuthenticationApplication {
+  @Inject()
+  private authSigninService: AuthSigninService;
+
+  @Inject()
+  private authSignupService: AuthSignupService;
+
+  @Inject()
+  private authResetPasswordService: AuthSendResetPassword;
+
+  /**
+   * Signin and generates JWT token.
+   * @throws {ServiceError}
+   * @param {string} email - Email address.
+   * @param {string} password - Password.
+   * @return {Promise<{user: IUser, token: string}>}
+   */
+  public async signIn(email: string, password: string) {
+    return this.authSigninService.signIn(email, password);
+  }
+
+  /**
+   * Signup a new user.
+   * @param {IRegisterDTO} signupDTO
+   * @returns {Promise<ISystemUser>}
+   */
+  public async signUp(signupDTO: IRegisterDTO): Promise<ISystemUser> {
+    return this.authSignupService.signUp(signupDTO);
+  }
+
+  /**
+   * Generates and retrieve password reset token for the given user email.
+   * @param {string} email
+   * @return {<Promise<IPasswordReset>}
+   */
+  public async sendResetPassword(email: string): Promise<IPasswordReset> {
+    return this.authResetPasswordService.sendResetPassword(email);
+  }
+
+  /**
+   * Resets a user password from given token.
+   * @param {string} token - Password reset token.
+   * @param {string} password - New Password.
+   * @return {Promise<void>}
+   */
+  public async resetPassword(token: string, password: string): Promise<void> {
+    return this.authResetPasswordService.resetPassword(token, password);
+  }
+}

packages/server/src/services/Authentication/AuthSendResetPassword.ts

@@ -0,0 +1,130 @@
+import { Inject, Service } from 'typedi';
+import uniqid from 'uniqid';
+import moment from 'moment';
+import config from '@/config';
+import {
+  IAuthResetedPasswordEventPayload,
+  IAuthSendedResetPassword,
+  IAuthSendingResetPassword,
+  IPasswordReset,
+  ISystemUser,
+} from '@/interfaces';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
+import { PasswordReset } from '@/system/models';
+import { ERRORS } from './_constants';
+import { ServiceError } from '@/exceptions';
+import { hashPassword } from '@/utils';
+
+@Service()
+export class AuthSendResetPassword {
+  @Inject()
+  private eventPublisher: EventPublisher;
+
+  @Inject('repositories')
+  private sysRepositories: any;
+
+  /**
+   * Generates and retrieve password reset token for the given user email.
+   * @param {string} email
+   * @return {<Promise<IPasswordReset>}
+   */
+  public async sendResetPassword(email: string): Promise<PasswordReset> {
+    const user = await this.validateEmailExistance(email);
+
+    const token: string = uniqid();
+
+    // Triggers sending reset password event.
+    await this.eventPublisher.emitAsync(events.auth.sendingResetPassword, {
+      user,
+      token,
+    } as IAuthSendingResetPassword);
+
+    // Delete all stored tokens of reset password that associate to the give email.
+    this.deletePasswordResetToken(email);
+
+    // Creates a new password reset row with unique token.
+    const passwordReset = await PasswordReset.query().insert({ email, token });
+
+    // Triggers sent reset password event.
+    await this.eventPublisher.emitAsync(events.auth.sendResetPassword, {
+      user,
+      token,
+    } as IAuthSendedResetPassword);
+
+    return passwordReset;
+  }
+
+  /**
+   * Resets a user password from given token.
+   * @param {string} token - Password reset token.
+   * @param {string} password - New Password.
+   * @return {Promise<void>}
+   */
+  public async resetPassword(token: string, password: string): Promise<void> {
+    const { systemUserRepository } = this.sysRepositories;
+
+    // Finds the password reset token.
+    const tokenModel: IPasswordReset = await PasswordReset.query().findOne(
+      'token',
+      token
+    );
+    // In case the password reset token not found throw token invalid error..
+    if (!tokenModel) {
+      throw new ServiceError(ERRORS.TOKEN_INVALID);
+    }
+    // Different between tokne creation datetime and current time.
+    if (
+      moment().diff(tokenModel.createdAt, 'seconds') >
+      config.resetPasswordSeconds
+    ) {
+      // Deletes the expired token by expired token email.
+      await this.deletePasswordResetToken(tokenModel.email);
+      throw new ServiceError(ERRORS.TOKEN_EXPIRED);
+    }
+    const user = await systemUserRepository.findOneByEmail(tokenModel.email);
+
+    if (!user) {
+      throw new ServiceError(ERRORS.USER_NOT_FOUND);
+    }
+    const hashedPassword = await hashPassword(password);
+
+    await systemUserRepository.update(
+      { password: hashedPassword },
+      { id: user.id }
+    );
+    // Deletes the used token.
+    await this.deletePasswordResetToken(tokenModel.email);
+
+    // Triggers `onResetPassword` event.
+    await this.eventPublisher.emitAsync(events.auth.resetPassword, {
+      user,
+      token,
+      password,
+    } as IAuthResetedPasswordEventPayload);
+  }
+
+  /**
+   * Deletes the password reset token by the given email.
+   * @param {string} email
+   * @returns {Promise}
+   */
+  private async deletePasswordResetToken(email: string) {
+    return PasswordReset.query().where('email', email).delete();
+  }
+
+  /**
+   * Validates the given email existance on the storage.
+   * @throws {ServiceError}
+   * @param {string} email - email address.
+   */
+  private async validateEmailExistance(email: string): Promise<ISystemUser> {
+    const { systemUserRepository } = this.sysRepositories;
+    const userByEmail = await systemUserRepository.findOneByEmail(email);
+
+    if (!userByEmail) {
+      throw new ServiceError(ERRORS.EMAIL_NOT_FOUND);
+    }
+    return userByEmail;
+  }
+}

packages/server/src/services/Authentication/AuthSignin.ts

@@ -0,0 +1,103 @@
+import { Container, Inject } from 'typedi';
+import { cloneDeep } from 'lodash';
+import { Tenant } from '@/system/models';
+import {
+  IAuthSignedInEventPayload,
+  IAuthSigningInEventPayload,
+  IAuthSignInPOJO,
+  ISystemUser,
+} from '@/interfaces';
+import { ServiceError } from '@/exceptions';
+import events from '@/subscribers/events';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import { generateToken } from './_utils';
+import { ERRORS } from './_constants';
+
+@Inject()
+export class AuthSigninService {
+  @Inject()
+  private eventPublisher: EventPublisher;
+
+  @Inject('repositories')
+  private sysRepositories: any;
+
+  /**
+   * Validates the given email and password.
+   * @param {ISystemUser} user
+   * @param {string} email
+   * @param {string} password
+   */
+  public async validateSignIn(
+    user: ISystemUser,
+    email: string,
+    password: string
+  ) {
+    const loginThrottler = Container.get('rateLimiter.login');
+
+    // Validate if the user is not exist.
+    if (!user) {
+      await loginThrottler.hit(email);
+      throw new ServiceError(ERRORS.INVALID_DETAILS);
+    }
+    // Validate if the given user's password is wrong.
+    if (!user.verifyPassword(password)) {
+      await loginThrottler.hit(email);
+      throw new ServiceError(ERRORS.INVALID_DETAILS);
+    }
+    // Validate if the given user is inactive.
+    if (!user.active) {
+      throw new ServiceError(ERRORS.USER_INACTIVE);
+    }
+  }
+
+  /**
+   * Signin and generates JWT token.
+   * @throws {ServiceError}
+   * @param {string} email - Email address.
+   * @param {string} password - Password.
+   * @return {Promise<{user: IUser, token: string}>}
+   */
+  public async signIn(
+    email: string,
+    password: string
+  ): Promise<IAuthSignInPOJO> {
+    const { systemUserRepository } = this.sysRepositories;
+
+    // Finds the user of the given email address.
+    const user = await systemUserRepository.findOneByEmail(email);
+
+    // Validate the given email and password.
+    await this.validateSignIn(user, email, password);
+
+    // Triggers on signing-in event.
+    await this.eventPublisher.emitAsync(events.auth.signingIn, {
+      email,
+      password,
+      user,
+    } as IAuthSigningInEventPayload);
+
+    const token = generateToken(user);
+
+    // Update the last login at of the user.
+    await systemUserRepository.patchLastLoginAt(user.id);
+
+    // Triggers `onSignIn` event.
+    await this.eventPublisher.emitAsync(events.auth.signIn, {
+      email,
+      password,
+      user,
+    } as IAuthSignedInEventPayload);
+
+    const tenant = await Tenant.query()
+      .findById(user.tenantId)
+      .withGraphFetched('metadata');
+
+    // Keep the user object immutable.
+    const outputUser = cloneDeep(user);
+
+    // Remove password property from user object.
+    Reflect.deleteProperty(outputUser, 'password');
+
+    return { user: outputUser, token, tenant };
+  }
+}

packages/server/src/services/Authentication/AuthSignup.ts

@@ -0,0 +1,77 @@
+import { omit } from 'lodash';
+import moment from 'moment';
+import { ServiceError } from '@/exceptions';
+import {
+  IAuthSignedUpEventPayload,
+  IAuthSigningUpEventPayload,
+  IRegisterDTO,
+  ISystemUser,
+} from '@/interfaces';
+import { ERRORS } from './_constants';
+import { Inject } from 'typedi';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import TenantsManagerService from '../Tenancy/TenantsManager';
+import events from '@/subscribers/events';
+import { hashPassword } from '@/utils';
+
+export class AuthSignupService {
+  @Inject()
+  private eventPublisher: EventPublisher;
+
+  @Inject('repositories')
+  private sysRepositories: any;
+
+  @Inject()
+  private tenantsManager: TenantsManagerService;
+
+  /**
+   * Registers a new tenant with user from user input.
+   * @throws {ServiceErrors}
+   * @param {IRegisterDTO} signupDTO
+   * @returns {Promise<ISystemUser>}
+   */
+  public async signUp(signupDTO: IRegisterDTO): Promise<ISystemUser> {
+    const { systemUserRepository } = this.sysRepositories;
+
+    // Validates the given email uniqiness.
+    await this.validateEmailUniqiness(signupDTO.email);
+
+    const hashedPassword = await hashPassword(signupDTO.password);
+
+    // Triggers signin up event.
+    await this.eventPublisher.emitAsync(events.auth.signingUp, {
+      signupDTO,
+    } as IAuthSigningUpEventPayload);
+
+    const tenant = await this.tenantsManager.createTenant();
+    const registeredUser = await systemUserRepository.create({
+      ...omit(signupDTO, 'country'),
+      active: true,
+      password: hashedPassword,
+      tenantId: tenant.id,
+      inviteAcceptedAt: moment().format('YYYY-MM-DD'),
+    });
+    // Triggers signed up event.
+    await this.eventPublisher.emitAsync(events.auth.signUp, {
+      signupDTO,
+      tenant,
+      user: registeredUser,
+    } as IAuthSignedUpEventPayload);
+
+    return registeredUser;
+  }
+
+  /**
+   * Validates email uniqiness on the storage.
+   * @throws {ServiceErrors}
+   * @param  {string} email - Email address
+   */
+  private async validateEmailUniqiness(email: string) {
+    const { systemUserRepository } = this.sysRepositories;
+    const isEmailExists = await systemUserRepository.findOneByEmail(email);
+
+    if (isEmailExists) {
+      throw new ServiceError(ERRORS.EMAIL_EXISTS);
+    }
+  }
+}

packages/server/src/services/Authentication/_constants.ts

@@ -0,0 +1,10 @@
+export const ERRORS = {
+  INVALID_DETAILS: 'INVALID_DETAILS',
+  USER_INACTIVE: 'USER_INACTIVE',
+  EMAIL_NOT_FOUND: 'EMAIL_NOT_FOUND',
+  TOKEN_INVALID: 'TOKEN_INVALID',
+  USER_NOT_FOUND: 'USER_NOT_FOUND',
+  TOKEN_EXPIRED: 'TOKEN_EXPIRED',
+  PHONE_NUMBER_EXISTS: 'PHONE_NUMBER_EXISTS',
+  EMAIL_EXISTS: 'EMAIL_EXISTS',
+};

packages/server/src/services/Authentication/_utils.ts

@@ -0,0 +1,22 @@
+import JWT from 'jsonwebtoken';
+import { ISystemUser } from '@/interfaces';
+import config from '@/config';
+
+/**
+ * Generates JWT token for the given user.
+ * @param {ISystemUser} user
+ * @return {string} token
+ */
+export const generateToken = (user: ISystemUser): string => {
+  const today = new Date();
+  const exp = new Date(today);
+  exp.setDate(today.getDate() + 60);
+
+  return JWT.sign(
+    {
+      id: user.id, // We are gonna use this in the middleware 'isAuth'
+      exp: exp.getTime() / 1000,
+    },
+    config.jwtSecret
+  );
+};

packages/server/src/services/Authentication/index.ts

@@ -1,322 +0,0 @@
-import { Service, Inject, Container } from 'typedi';
-import JWT from 'jsonwebtoken';
-import uniqid from 'uniqid';
-import { omit, cloneDeep } from 'lodash';
-import moment from 'moment';
-import { PasswordReset, Tenant } from '@/system/models';
-import {
-  IRegisterDTO,
-  ITenant,
-  ISystemUser,
-  IPasswordReset,
-  IAuthenticationService,
-} from '@/interfaces';
-import { hashPassword } from 'utils';
-import { ServiceError, ServiceErrors } from '@/exceptions';
-import config from '@/config';
-import events from '@/subscribers/events';
-import AuthenticationMailMessages from '@/services/Authentication/AuthenticationMailMessages';
-import TenantsManager from '@/services/Tenancy/TenantsManager';
-import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
-
-const ERRORS = {
-  INVALID_DETAILS: 'INVALID_DETAILS',
-  USER_INACTIVE: 'USER_INACTIVE',
-  EMAIL_NOT_FOUND: 'EMAIL_NOT_FOUND',
-  TOKEN_INVALID: 'TOKEN_INVALID',
-  USER_NOT_FOUND: 'USER_NOT_FOUND',
-  TOKEN_EXPIRED: 'TOKEN_EXPIRED',
-  PHONE_NUMBER_EXISTS: 'PHONE_NUMBER_EXISTS',
-  EMAIL_EXISTS: 'EMAIL_EXISTS',
-};
-@Service()
-export default class AuthenticationService implements IAuthenticationService {
-  @Inject('logger')
-  logger: any;
-
-  @Inject()
-  eventPublisher: EventPublisher;
-
-  @Inject()
-  mailMessages: AuthenticationMailMessages;
-
-  @Inject('repositories')
-  sysRepositories: any;
-
-  @Inject()
-  tenantsManager: TenantsManager;
-
-  /**
-   * Signin and generates JWT token.
-   * @throws  {ServiceError}
-   * @param  {string} emailOrPhone - Email or phone number.
-   * @param  {string} password - Password.
-   * @return {Promise<{user: IUser, token: string}>}
-   */
-  public async signIn(
-    emailOrPhone: string,
-    password: string
-  ): Promise<{
-    user: ISystemUser;
-    token: string;
-    tenant: ITenant;
-  }> {
-    this.logger.info('[login] Someone trying to login.', {
-      emailOrPhone,
-      password,
-    });
-    const { systemUserRepository } = this.sysRepositories;
-    const loginThrottler = Container.get('rateLimiter.login');
-
-    // Finds the user of the given email or phone number.
-    const user = await systemUserRepository.findByCrediential(emailOrPhone);
-
-    if (!user) {
-      // Hits the loging throttler to the given crediential.
-      await loginThrottler.hit(emailOrPhone);
-
-      this.logger.info('[login] invalid data');
-      throw new ServiceError(ERRORS.INVALID_DETAILS);
-    }
-
-    this.logger.info('[login] check password validation.', {
-      emailOrPhone,
-      password,
-    });
-    if (!user.verifyPassword(password)) {
-      // Hits the loging throttler to the given crediential.
-      await loginThrottler.hit(emailOrPhone);
-
-      throw new ServiceError(ERRORS.INVALID_DETAILS);
-    }
-    if (!user.active) {
-      this.logger.info('[login] user inactive.', { userId: user.id });
-      throw new ServiceError(ERRORS.USER_INACTIVE);
-    }
-
-    this.logger.info('[login] generating JWT token.', { userId: user.id });
-    const token = this.generateToken(user);
-
-    this.logger.info('[login] updating user last login at.', {
-      userId: user.id,
-    });
-    await systemUserRepository.patchLastLoginAt(user.id);
-
-    this.logger.info('[login] Logging success.', { user, token });
-
-    // Triggers `onLogin` event.
-    await this.eventPublisher.emitAsync(events.auth.login, {
-      emailOrPhone,
-      password,
-      user,
-    });
-    const tenant = await Tenant.query().findById(user.tenantId).withGraphFetched('metadata');
-
-    // Keep the user object immutable.
-    const outputUser = cloneDeep(user);
-
-    // Remove password property from user object.
-    Reflect.deleteProperty(outputUser, 'password');
-
-    return { user: outputUser, token, tenant };
-  }
-
-  /**
-   * Validates email and phone number uniqiness on the storage.
-   * @throws {ServiceErrors}
-   * @param  {IRegisterDTO} registerDTO - Register data object.
-   */
-  private async validateEmailAndPhoneUniqiness(registerDTO: IRegisterDTO) {
-    const { systemUserRepository } = this.sysRepositories;
-
-    const isEmailExists = await systemUserRepository.findOneByEmail(
-      registerDTO.email
-    );
-    const isPhoneExists = await systemUserRepository.findOneByPhoneNumber(
-      registerDTO.phoneNumber
-    );
-    const errorReasons: ServiceError[] = [];
-
-    if (isPhoneExists) {
-      this.logger.info('[register] phone number exists on the storage.');
-      errorReasons.push(new ServiceError(ERRORS.PHONE_NUMBER_EXISTS));
-    }
-    if (isEmailExists) {
-      this.logger.info('[register] email exists on the storage.');
-      errorReasons.push(new ServiceError(ERRORS.EMAIL_EXISTS));
-    }
-    if (errorReasons.length > 0) {
-      throw new ServiceErrors(errorReasons);
-    }
-  }
-
-  /**
-   * Registers a new tenant with user from user input.
-   * @throws {ServiceErrors}
-   * @param {IUserDTO} user
-   */
-  public async register(registerDTO: IRegisterDTO): Promise<ISystemUser> {
-    this.logger.info('[register] Someone trying to register.');
-    await this.validateEmailAndPhoneUniqiness(registerDTO);
-
-    this.logger.info('[register] Creating a new tenant organization.');
-    const tenant = await this.newTenantOrganization();
-
-    this.logger.info('[register] Trying hashing the password.');
-    const hashedPassword = await hashPassword(registerDTO.password);
-
-    const { systemUserRepository } = this.sysRepositories;
-    const registeredUser = await systemUserRepository.create({
-      ...omit(registerDTO, 'country'),
-      active: true,
-      password: hashedPassword,
-      tenantId: tenant.id,
-      inviteAcceptedAt: moment().format('YYYY-MM-DD'),
-    });
-    // Triggers `onRegister` event.
-    await this.eventPublisher.emitAsync(events.auth.register, {
-      registerDTO,
-      tenant,
-      user: registeredUser,
-    });
-    return registeredUser;
-  }
-
-  /**
-   * Generates and insert new tenant organization id.
-   * @async
-   * @return {Promise<ITenant>}
-   */
-  private async newTenantOrganization(): Promise<ITenant> {
-    return this.tenantsManager.createTenant();
-  }
-
-  /**
-   * Validate the given email existance on the storage.
-   * @throws {ServiceError}
-   * @param  {string} email - email address.
-   */
-  private async validateEmailExistance(email: string): Promise<ISystemUser> {
-    const { systemUserRepository } = this.sysRepositories;
-    const userByEmail = await systemUserRepository.findOneByEmail(email);
-
-    if (!userByEmail) {
-      this.logger.info('[send_reset_password] The given email not found.');
-      throw new ServiceError(ERRORS.EMAIL_NOT_FOUND);
-    }
-    return userByEmail;
-  }
-
-  /**
-   * Generates and retrieve password reset token for the given user email.
-   * @param {string} email
-   * @return {<Promise<IPasswordReset>}
-   */
-  public async sendResetPassword(email: string): Promise<IPasswordReset> {
-    this.logger.info('[send_reset_password] Trying to send reset password.');
-    const user = await this.validateEmailExistance(email);
-
-    // Delete all stored tokens of reset password that associate to the give email.
-    this.logger.info(
-      '[send_reset_password] trying to delete all tokens by email.'
-    );
-    this.deletePasswordResetToken(email);
-
-    const token: string = uniqid();
-
-    this.logger.info('[send_reset_password] insert the generated token.');
-    const passwordReset = await PasswordReset.query().insert({ email, token });
-
-    // Triggers `onSendResetPassword` event.
-    await this.eventPublisher.emitAsync(events.auth.sendResetPassword, {
-      user,
-      token,
-    });
-    return passwordReset;
-  }
-
-  /**
-   * Resets a user password from given token.
-   * @param {string} token - Password reset token.
-   * @param {string} password - New Password.
-   * @return {Promise<void>}
-   */
-  public async resetPassword(token: string, password: string): Promise<void> {
-    const { systemUserRepository } = this.sysRepositories;
-
-    // Finds the password reset token.
-    const tokenModel: IPasswordReset = await PasswordReset.query().findOne(
-      'token',
-      token
-    );
-    // In case the password reset token not found throw token invalid error..
-    if (!tokenModel) {
-      this.logger.info('[reset_password] token invalid.');
-      throw new ServiceError(ERRORS.TOKEN_INVALID);
-    }
-    // Different between tokne creation datetime and current time.
-    if (
-      moment().diff(tokenModel.createdAt, 'seconds') >
-      config.resetPasswordSeconds
-    ) {
-      this.logger.info('[reset_password] token expired.');
-
-      // Deletes the expired token by expired token email.
-      await this.deletePasswordResetToken(tokenModel.email);
-      throw new ServiceError(ERRORS.TOKEN_EXPIRED);
-    }
-    const user = await systemUserRepository.findOneByEmail(tokenModel.email);
-
-    if (!user) {
-      throw new ServiceError(ERRORS.USER_NOT_FOUND);
-    }
-    const hashedPassword = await hashPassword(password);
-
-    this.logger.info('[reset_password] saving a new hashed password.');
-    await systemUserRepository.update(
-      { password: hashedPassword },
-      { id: user.id }
-    );
-
-    // Deletes the used token.
-    await this.deletePasswordResetToken(tokenModel.email);
-
-    // Triggers `onResetPassword` event.
-    await this.eventPublisher.emitAsync(events.auth.resetPassword, {
-      user,
-      token,
-      password,
-    });
-    this.logger.info('[reset_password] reset password success.');
-  }
-
-  /**
-   * Deletes the password reset token by the given email.
-   * @param  {string} email
-   * @returns {Promise}
-   */
-  private async deletePasswordResetToken(email: string) {
-    this.logger.info('[reset_password] trying to delete all tokens by email.');
-    return PasswordReset.query().where('email', email).delete();
-  }
-
-  /**
-   * Generates JWT token for the given user.
-   * @param {ISystemUser} user
-   * @return {string} token
-   */
-  generateToken(user: ISystemUser): string {
-    const today = new Date();
-    const exp = new Date(today);
-    exp.setDate(today.getDate() + 60);
-
-    this.logger.silly(`Sign JWT for userId: ${user.id}`);
-    return JWT.sign(
-      {
-        id: user.id, // We are gonna use this in the middleware 'isAuth'
-        exp: exp.getTime() / 1000,
-      },
-      config.jwtSecret
-    );
-  }
-}

packages/server/src/services/Currencies/CurrenciesService.ts

@@ -1,18 +1,15 @@
 import { Inject, Service } from 'typedi';
-import { uniq } from 'lodash';
-
 import {
   ICurrencyEditDTO,
   ICurrencyDTO,
   ICurrenciesService,
   ICurrency,
 } from '@/interfaces';
-import {
-  EventDispatcher,
-  EventDispatcherInterface,
-} from 'decorators/eventDispatcher';
 import { ServiceError } from '@/exceptions';
 import TenancyService from '@/services/Tenancy/TenancyService';
+import { Tenant } from '@/system/models';
+import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
+import { CurrencyTransformer } from './CurrencyTransformer';
 
 const ERRORS = {
   CURRENCY_NOT_FOUND: 'currency_not_found',
@@ -23,14 +20,11 @@ const ERRORS = {
 
 @Service()
 export default class CurrenciesService implements ICurrenciesService {
-  @Inject('logger')
-  logger: any;
-
-  @EventDispatcher()
-  eventDispatcher: EventDispatcherInterface;
+  @Inject()
+  private tenancy: TenancyService;
 
   @Inject()
-  tenancy: TenancyService;
+  private transformer: TransformerInjectable;
 
   /**
    * Retrieve currency by given currency code or throw not found error.
@@ -105,7 +99,7 @@ export default class CurrenciesService implements ICurrenciesService {
    */
   public async newCurrency(tenantId: number, currencyDTO: ICurrencyDTO) {
     const { Currency } = this.tenancy.models(tenantId);
-  
+
     // Validate currency code uniquiness.
     await this.validateCurrencyCodeUniquiness(
       tenantId,
@@ -141,13 +135,15 @@ export default class CurrenciesService implements ICurrenciesService {
    * @param {number} tenantId
    * @param {string} currencyCode
    */
-  validateCannotDeleteBaseCurrency(tenantId: number, currencyCode: string) {
-    const settings = this.tenancy.settings(tenantId);
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-    if (baseCurrency === currencyCode) {
+  private async validateCannotDeleteBaseCurrency(
+    tenantId: number,
+    currencyCode: string
+  ) {
+    const tenant = await Tenant.query()
+      .findById(tenantId)
+      .withGraphFetched('metadata');
+
+    if (tenant.metadata.baseCurrency === currencyCode) {
       throw new ServiceError(ERRORS.CANNOT_DELETE_BASE_CURRENCY);
     }
   }
@@ -156,7 +152,7 @@ export default class CurrenciesService implements ICurrenciesService {
    * Delete the given currency code.
    * @param {number} tenantId
    * @param {string} currencyCode
-   * @return {Promise<}
+   * @return {Promise<void>}
    */
   public async deleteCurrency(
     tenantId: number,
@@ -180,19 +176,13 @@ export default class CurrenciesService implements ICurrenciesService {
   public async listCurrencies(tenantId: number): Promise<ICurrency[]> {
     const { Currency } = this.tenancy.models(tenantId);
 
-    const settings = this.tenancy.settings(tenantId);
-    const baseCurrency = settings.get({
-      group: 'organization',
-      key: 'base_currency',
-    });
-
     const currencies = await Currency.query().onBuild((query) => {
       query.orderBy('createdAt', 'ASC');
     });
-    const formattedCurrencies = currencies.map((currency) => ({
-      isBaseCurrency: baseCurrency === currency.currencyCode,
-      ...currency,
-    }));
-    return formattedCurrencies;
+    return this.transformer.transform(
+      tenantId,
+      currencies,
+      new CurrencyTransformer()
+    );
   }
 }

packages/server/src/services/Currencies/CurrencyTransformer.ts

@@ -0,0 +1,19 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+
+export class CurrencyTransformer extends Transformer {
+  /**
+   * Include these attributes to sale invoice object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return ['isBaseCurrency'];
+  };
+
+  /**
+   * Detarmines whether the currency is base currency.
+   * @returns {boolean}
+   */
+  public isBaseCurrency(currency): boolean {
+    return this.context.organization.baseCurrency === currency.currencyCode;
+  }
+}

packages/server/src/services/InviteUsers/AcceptInviteUser.ts

@@ -3,8 +3,6 @@ import moment from 'moment';
 import { ServiceError } from '@/exceptions';
 import { Invite, SystemUser, Tenant } from '@/system/models';
 import { hashPassword } from 'utils';
-import TenancyService from '@/services/Tenancy/TenancyService';
-import InviteUsersMailMessages from '@/services/InviteUsers/InviteUsersMailMessages';
 import events from '@/subscribers/events';
 import {
   IAcceptInviteEventPayload,
@@ -12,29 +10,13 @@ import {
   ICheckInviteEventPayload,
   IUserInvite,
 } from '@/interfaces';
-import TenantsManagerService from '@/services/Tenancy/TenantsManager';
 import { ERRORS } from './constants';
 import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 
 @Service()
 export default class AcceptInviteUserService {
   @Inject()
-  eventPublisher: EventPublisher;
-
-  @Inject()
-  tenancy: TenancyService;
-
-  @Inject('logger')
-  logger: any;
-
-  @Inject()
-  mailMessages: InviteUsersMailMessages;
-
-  @Inject('repositories')
-  sysRepositories: any;
-
-  @Inject()
-  tenantsManager: TenantsManagerService;
+  private eventPublisher: EventPublisher;
 
   /**
    * Accept the received invite.
@@ -50,9 +32,6 @@ export default class AcceptInviteUserService {
     // Retrieve the invite token or throw not found error.
     const inviteToken = await this.getInviteTokenOrThrowError(token);
 
-    // Validates the user phone number.
-    await this.validateUserPhoneNumberNotExists(inviteUserDTO.phoneNumber);
-
     // Hash the given password.
     const hashedPassword = await hashPassword(inviteUserDTO.password);
 

packages/server/src/services/Organization/constants.ts

@@ -14,8 +14,6 @@ export const DATE_FORMATS = [
   'MMMM dd, YYYY',
   'EEE, MMMM dd, YYYY',
 ];
-export const ACCEPTED_CURRENCIES = Object.keys(currencies);
-
 export const MONTHS = [
   'january',
   'february',

packages/server/src/services/Users/UsersService.ts

@@ -17,20 +17,17 @@ import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
 
 @Service()
 export default class UsersService {
-  @Inject('logger')
-  logger: any;
-
   @Inject('repositories')
-  repositories: any;
+  private repositories: any;
 
   @Inject()
-  rolesService: RolesService;
+  private rolesService: RolesService;
 
   @Inject()
-  tenancy: HasTenancyService;
+  private tenancy: HasTenancyService;
 
   @Inject()
-  eventPublisher: EventPublisher;
+  private eventPublisher: EventPublisher;
 
   /**
    * Creates a new user.
@@ -46,7 +43,7 @@ export default class UsersService {
     authorizedUser: ISystemUser
   ): Promise<any> {
     const { User } = this.tenancy.models(tenantId);
-    const { email, phoneNumber } = editUserDTO;
+    const { email } = editUserDTO;
 
     // Retrieve the tenant user or throw not found service error.
     const oldTenantUser = await this.getTenantUserOrThrowError(
@@ -62,9 +59,6 @@ export default class UsersService {
     // Validate user email should be unique.
     await this.validateUserEmailUniquiness(tenantId, email, userId);
 
-    // Validate user phone number should be unique.
-    await this.validateUserPhoneNumberUniqiness(tenantId, phoneNumber, userId);
-
     // Retrieve the given role or throw not found service error.
     const role = await this.rolesService.getRoleOrThrowError(
       tenantId,
@@ -295,27 +289,6 @@ export default class UsersService {
     }
   };
 
-  /**
-   * Validate user phone number should be unique.
-   * @param {string} phoneNumber -
-   * @param {number} userId -
-   */
-  private validateUserPhoneNumberUniqiness = async (
-    tenantId: number,
-    phoneNumber: string,
-    userId: number
-  ) => {
-    const { User } = this.tenancy.models(tenantId);
-
-    const userByPhoneNumber = await User.query()
-      .findOne('phone_number', phoneNumber)
-      .whereNot('id', userId);
-
-    if (userByPhoneNumber) {
-      throw new ServiceError(ERRORS.PHONE_NUMBER_ALREADY_EXIST);
-    }
-  };
-
   /**
    * Validate the authorized user cannot mutate its role.
    * @param {ITenantUser} oldTenantUser 

packages/server/src/subscribers/Authentication/ResetLoginThrottle.ts

@@ -1,27 +1,29 @@
 import { Container, Service } from 'typedi';
 import events from '@/subscribers/events';
+import { IAuthSignedInEventPayload } from '@/interfaces';
 
 @Service()
 export default class ResetLoginThrottleSubscriber {
   /**
    * Attaches events with handlers.
-   * @param bus 
+   * @param bus
    */
   public attach(bus) {
-    bus.subscribe(events.auth.login, this.resetLoginThrottleOnceSuccessLogin);
+    bus.subscribe(events.auth.signIn, this.resetLoginThrottleOnceSuccessLogin);
   }
 
   /**
    * Resets the login throttle once the login success.
+   * @param {IAuthSignedInEventPayload} payload -
    */
-  private async resetLoginThrottleOnceSuccessLogin(payload) {
-    const { emailOrPhone, password, user } = payload;
-
+  private async resetLoginThrottleOnceSuccessLogin(
+    payload: IAuthSignedInEventPayload
+  ) {
+    const { email, user } = payload;
     const loginThrottler = Container.get('rateLimiter.login');
 
     // Reset the login throttle by the given email and phone number.
     await loginThrottler.reset(user.email);
-    await loginThrottler.reset(user.phoneNumber);
-    await loginThrottler.reset(emailOrPhone);
+    await loginThrottler.reset(email);
   }
 }

packages/server/src/subscribers/Authentication/SendWelcomeMail.ts

@@ -10,14 +10,14 @@ export default class AuthSendWelcomeMailSubscriber {
    * Attaches events with handlers.
    */
   public attach(bus) {
-    bus.subscribe(events.auth.register, this.sendWelcomeEmailOnceUserRegister);
+    bus.subscribe(events.auth.signUp, this.sendWelcomeEmailOnceUserRegister);
   }
 
   /**
    * Sends welcome email once the user register.
    */
   private sendWelcomeEmailOnceUserRegister = async (payload) => {
-    const { registerDTO, tenant, user } = payload;
+    const { tenant, user } = payload;
 
     // Send welcome mail to the user.
     await this.agenda.now('welcome-email', {

packages/server/src/subscribers/events.ts

@@ -3,10 +3,17 @@ export default {
    * Authentication service.
    */
   auth: {
-    login: 'onLogin',
-    register: 'onRegister',
+    signIn: 'onSignIn',
+    signingIn: 'onSigningIn',
+
+    signUp: 'onSignUp',
+    signingUp: 'onSigningUp',
+
+    sendingResetPassword: 'onSendingResetPassword',
     sendResetPassword: 'onSendResetPassword',
+
     resetPassword: 'onResetPassword',
+    resetingPassword: 'onResetingPassword'
   },
 
   /**

packages/server/src/system/migrations/20230405011450_drop_phone_number_column_from_users_table.js

@@ -0,0 +1,9 @@
+exports.up = function (knex) {
+  return knex.schema.table('users', (table) => {
+    table.dropColumn('phone_number');
+  });
+};
+
+exports.down = function (knex) {
+  return knex.schema.table('users', (table) => {});
+};

packages/webapp/src/components/App.tsx

@@ -13,7 +13,7 @@ import AppIntlLoader from './AppIntlLoader';
 import PrivateRoute from '@/components/Guards/PrivateRoute';
 import GlobalErrors from '@/containers/GlobalErrors/GlobalErrors';
 import DashboardPrivatePages from '@/components/Dashboard/PrivatePages';
-import Authentication from '@/components/Authentication';
+import { Authentication } from '@/containers/Authentication/Authentication';
 
 import { SplashScreen, DashboardThemeProvider } from '../components';
 import { queryConfig } from '../hooks/query/base';

packages/webapp/src/components/Authentication.tsx

@@ -1,62 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import { Redirect, Route, Switch, Link, useLocation } from 'react-router-dom';
-import BodyClassName from 'react-body-classname';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import authenticationRoutes from '@/routes/authentication';
-import { Icon, FormattedMessage as T } from '@/components';
-import { useIsAuthenticated } from '@/hooks/state';
-import '@/style/pages/Authentication/Auth.scss';
-
-function PageFade(props) {
-  return <CSSTransition {...props} classNames="authTransition" timeout={500} />;
-}
-
-export default function AuthenticationWrapper({ ...rest }) {
-  const to = { pathname: '/' };
-  const location = useLocation();
-  const isAuthenticated = useIsAuthenticated();
-  const locationKey = location.pathname;
-
-  return (
-    <>
-      {isAuthenticated ? (
-        <Redirect to={to} />
-      ) : (
-        <BodyClassName className={'authentication'}>
-          <div class="authentication-page">
-            <a
-              href={'http://bigcapital.ly'}
-              className={'authentication-page__goto-bigcapital'}
-            >
-              <T id={'go_to_bigcapital_com'} />
-            </a>
-
-            <div class="authentication-page__form-wrapper">
-              <div class="authentication-insider">
-                <div className={'authentication-insider__logo-section'}>
-                  <Icon icon="bigcapital" height={37} width={214} />
-                </div>
-
-                <TransitionGroup>
-                  <PageFade key={locationKey}>
-                    <Switch>
-                      {authenticationRoutes.map((route, index) => (
-                        <Route
-                          key={index}
-                          path={route.path}
-                          exact={route.exact}
-                          component={route.component}
-                        />
-                      ))}
-                    </Switch>
-                  </PageFade>
-                </TransitionGroup>
-              </div>
-            </div>
-          </div>
-        </BodyClassName>
-      )}
-    </>
-  );
-}

packages/webapp/src/constants/languagesOptions.tsx

@@ -3,5 +3,4 @@ import intl from 'react-intl-universal';
 
 export const getLanguages = () => [
   { name: intl.get('english'), value: 'en' },
-  { name: intl.get('arabic'), value: 'ar' },
 ];

packages/webapp/src/containers/Authentication/AuthCopyright.tsx

@@ -1,20 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import moment from 'moment';
-import intl from 'react-intl-universal';
 import { Icon } from '@/components/Icon';
 
 export default function AuthCopyright() {
-  return (
-    <div class="auth-copyright">
-      <div class="auth-copyright__text">
-        {intl.get('all_rights_reserved', {
-          pre: moment().subtract(1, 'years').year(),
-          current: moment().get('year'),
-        })}
-      </div>
-
-      <Icon width={122} height={22} icon={'bigcapital'} />
-    </div>
-  );
+  return <Icon width={122} height={22} icon={'bigcapital'} />;
 }

packages/webapp/src/containers/Authentication/AuthInsider.tsx

@@ -1,6 +1,8 @@
 // @ts-nocheck
 import React from 'react';
+import styled from 'styled-components';
 import AuthCopyright from './AuthCopyright';
+import { AuthInsiderContent, AuthInsiderCopyright } from './_components';
 
 /**
  * Authentication insider page.
@@ -9,16 +11,21 @@ export default function AuthInsider({
   logo = true,
   copyright = true,
   children,
+  classNames,
 }) {
   return (
-    <div class="authentication-insider__content">
-      <div class="authentication-insider__form">
-        { children }
-      </div>
+    <AuthInsiderContent>
+      <AuthInsiderContentWrap className={classNames?.content}>
+        {children}
+      </AuthInsiderContentWrap>
 
-      <div class="authentication-insider__footer">
-        <AuthCopyright />
-      </div>
-    </div>
+      {copyright && (
+        <AuthInsiderCopyright className={classNames?.copyrightWrap}>
+          <AuthCopyright />
+        </AuthInsiderCopyright>
+      )}
+    </AuthInsiderContent>
   );
 }
+
+const AuthInsiderContentWrap = styled.div``;

packages/webapp/src/containers/Authentication/Authentication.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+import React from 'react';
+import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
+import BodyClassName from 'react-body-classname';
+import styled from 'styled-components';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+import authenticationRoutes from '@/routes/authentication';
+import { Icon, FormattedMessage as T } from '@/components';
+import { useIsAuthenticated } from '@/hooks/state';
+
+import '@/style/pages/Authentication/Auth.scss';
+
+export function Authentication() {
+  const to = { pathname: '/' };
+  const location = useLocation();
+  const isAuthenticated = useIsAuthenticated();
+  const locationKey = location.pathname;
+
+  if (isAuthenticated) {
+    return <Redirect to={to} />;
+  }
+  return (
+    <BodyClassName className={'authentication'}>
+      <AuthPage>
+        <AuthInsider>
+          <AuthLogo>
+            <Icon icon="bigcapital" height={37} width={214} />
+          </AuthLogo>
+
+          <TransitionGroup>
+            <CSSTransition
+              timeout={500}
+              key={locationKey}
+              classNames="authTransition"
+            >
+              <Switch>
+                {authenticationRoutes.map((route, index) => (
+                  <Route
+                    key={index}
+                    path={route.path}
+                    exact={route.exact}
+                    component={route.component}
+                  />
+                ))}
+              </Switch>
+            </CSSTransition>
+          </TransitionGroup>
+        </AuthInsider>
+      </AuthPage>
+    </BodyClassName>
+  );
+}
+
+const AuthPage = styled.div``;
+const AuthInsider = styled.div`
+  width: 384px;
+  margin: 0 auto;
+  margin-bottom: 40px;
+  padding-top: 80px;
+`;
+
+const AuthLogo = styled.div`
+  text-align: center;
+  margin-bottom: 40px;
+`;

packages/webapp/src/containers/Authentication/InviteAcceptForm.tsx

@@ -4,13 +4,21 @@ import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { useHistory } from 'react-router-dom';
 import { Intent, Position } from '@blueprintjs/core';
-import { FormattedMessage as T } from '@/components';
 import { isEmpty } from 'lodash';
 
 import { useInviteAcceptContext } from './InviteAcceptProvider';
 import { AppToaster } from '@/components';
 import { InviteAcceptSchema } from './utils';
 import InviteAcceptFormContent from './InviteAcceptFormContent';
+import { AuthInsiderCard } from './_components';
+
+const initialValues = {
+  organization_name: '',
+  invited_email: '',
+  first_name: '',
+  last_name: '',
+  password: '',
+};
 
 export default function InviteAcceptForm() {
   const history = useHistory();
@@ -19,9 +27,8 @@ export default function InviteAcceptForm() {
   const { inviteAcceptMutate, inviteMeta, token } = useInviteAcceptContext();
 
   // Invite value.
-  const inviteValue = {
-    organization_name: '',
-    invited_email: '',
+  const inviteFormValue = {
+    ...initialValues,
     ...(!isEmpty(inviteMeta)
       ? {
           invited_email: inviteMeta.email,
@@ -33,19 +40,17 @@ export default function InviteAcceptForm() {
   // Handle form submitting.
   const handleSubmit = (values, { setSubmitting, setErrors }) => {
     inviteAcceptMutate([values, token])
-      .then((response) => {
+      .then(() => {
         AppToaster.show({
           message: intl.getHTML(
             'congrats_your_account_has_been_created_and_invited',
             {
-              organization_name: inviteValue.organization_name,
+              organization_name: inviteMeta.organizationName,
             },
           ),
-
           intent: Intent.SUCCESS,
         });
         history.push('/auth/login');
-        setSubmitting(false);
       })
       .catch(
         ({
@@ -80,23 +85,13 @@ export default function InviteAcceptForm() {
   };
 
   return (
-    <div className={'invite-form'}>
-      <div className={'authentication-page__label-section'}>
-        <h3>
-          <T id={'welcome_to_bigcapital'} />
-        </h3>
-        <p>
-          <T id={'enter_your_personal_information'} />{' '}
-          <b>{inviteValue.organization_name}</b> <T id={'organization'} />
-        </p>
-      </div>
-
+    <AuthInsiderCard>
       <Formik
         validationSchema={InviteAcceptSchema}
-        initialValues={inviteValue}
+        initialValues={inviteFormValue}
         onSubmit={handleSubmit}
         component={InviteAcceptFormContent}
       />
-    </div>
+    </AuthInsiderCard>
   );
 }

packages/webapp/src/containers/Authentication/InviteAcceptFormContent.tsx

@@ -1,110 +1,73 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useState } from 'react';
 import intl from 'react-intl-universal';
-import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
-import { Form, ErrorMessage, FastField, useFormikContext } from 'formik';
+import { Button, InputGroup, Intent } from '@blueprintjs/core';
+import { Form, useFormikContext } from 'formik';
 import { Link } from 'react-router-dom';
-import { Col, Row, FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { Tooltip2 } from '@blueprintjs/popover2';
+import styled from 'styled-components';
+
+import {
+  Col,
+  FFormGroup,
+  FInputGroup,
+  Row,
+  FormattedMessage as T,
+} from '@/components';
 import { useInviteAcceptContext } from './InviteAcceptProvider';
-import { PasswordRevealer } from './components';
+import { AuthSubmitButton } from './_components';
 
 /**
  * Invite user form.
  */
 export default function InviteUserFormContent() {
-  // Invite accept context.
-  const { inviteMeta } = useInviteAcceptContext();
+  const [showPassword, setShowPassword] = useState<boolean>(false);
 
-  // Formik context.
+  const { inviteMeta } = useInviteAcceptContext();
   const { isSubmitting } = useFormikContext();
 
-  const [passwordType, setPasswordType] = React.useState('password');
-
   // Handle password revealer changing.
-  const handlePasswordRevealerChange = React.useCallback(
-    (shown) => {
-      const type = shown ? 'text' : 'password';
-      setPasswordType(type);
-    },
-    [setPasswordType],
+  const handleLockClick = () => {
+    setShowPassword(!showPassword);
+  };
+  const lockButton = (
+    <Tooltip2 content={`${showPassword ? 'Hide' : 'Show'} Password`}>
+      <Button
+        icon={showPassword ? 'unlock' : 'lock'}
+        intent={Intent.WARNING}
+        minimal={true}
+        onClick={handleLockClick}
+        small={true}
+      />
+    </Tooltip2>
   );
 
   return (
     <Form>
       <Row>
         <Col md={6}>
-          <FastField name={'first_name'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'first_name'} />}
-                className={'form-group--first_name'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'first_name'} />}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'first_name'} label={<T id={'first_name'} />}>
+            <FInputGroup name={'first_name'} large={true} />
+          </FFormGroup>
         </Col>
 
         <Col md={6}>
-          <FastField name={'last_name'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'last_name'} />}
-                className={'form-group--last_name'}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'last_name'} />}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'last_name'} label={<T id={'last_name'} />}>
+            <FInputGroup name={'last_name'} large={true} />
+          </FFormGroup>
         </Col>
       </Row>
 
-      <FastField name={'phone_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'phone_number'} />}
-            className={'form-group--phone_number'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'phone_number'} />}
-          >
-            <InputGroup intent={inputIntent({ error, touched })} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'password'} label={<T id={'password'} />}>
+        <FInputGroup
+          name={'password'}
+          large={true}
+          rightElement={lockButton}
+          type={showPassword ? 'text' : 'password'}
+        />
+      </FFormGroup>
 
-      <FastField name={'password'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'password'} />}
-            labelInfo={
-              <PasswordRevealer onChange={handlePasswordRevealerChange} />
-            }
-            className={'form-group--password has-password-revealer'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'password'} />}
-          >
-            <InputGroup
-              lang={true}
-              type={passwordType}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
-      <div className={'invite-form__statement-section'}>
+      <InviteAcceptFooterParagraphs>
         <p>
           <T id={'you_email_address_is'} /> <b>{inviteMeta.email},</b> <br />
           <T id={'you_will_use_this_address_to_sign_in_to_bigcapital'} />
@@ -115,18 +78,25 @@ export default function InviteUserFormContent() {
             privacy: (msg) => <Link>{msg}</Link>,
           })}
         </p>
-      </div>
+      </InviteAcceptFooterParagraphs>
 
-      <div className={'authentication-page__submit-button-wrap'}>
-        <Button
-          intent={Intent.PRIMARY}
-          type="submit"
-          fill={true}
-          loading={isSubmitting}
-        >
-          <T id={'create_account'} />
-        </Button>
-      </div>
+      <InviteAuthSubmitButton
+        intent={Intent.PRIMARY}
+        type="submit"
+        fill={true}
+        large={true}
+        loading={isSubmitting}
+      >
+        <T id={'create_account'} />
+      </InviteAuthSubmitButton>
     </Form>
   );
 }
+
+const InviteAcceptFooterParagraphs = styled.div`
+  opacity: 0.8;
+`;
+
+const InviteAuthSubmitButton = styled(AuthSubmitButton)`
+  margin-top: 1.6rem;
+`;

packages/webapp/src/containers/Authentication/InviteAcceptProvider.tsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useInviteMetaByToken, useAuthInviteAccept } from '@/hooks/query';
 import { InviteAcceptLoading } from './components';
-import { useHistory } from 'react-router-dom';
 
 const InviteAcceptContext = createContext();
 
@@ -22,11 +22,10 @@ function InviteAcceptProvider({ token, ...props }) {
   const { mutateAsync: inviteAcceptMutate } = useAuthInviteAccept({
     retry: false,
   });
-
   // History context.
   const history = useHistory();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (inviteMetaError) { history.push('/auth/login'); }
   }, [history, inviteMetaError]);
 

packages/webapp/src/containers/Authentication/Login.tsx

@@ -1,14 +1,25 @@
 // @ts-nocheck
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { Formik } from 'formik';
-import { AppToaster as Toaster, FormattedMessage as T } from '@/components';
+import { Link } from 'react-router-dom';
 
+import { AppToaster as Toaster, FormattedMessage as T } from '@/components';
 import AuthInsider from '@/containers/Authentication/AuthInsider';
 import { useAuthLogin } from '@/hooks/query';
 
 import LoginForm from './LoginForm';
 import { LoginSchema, transformLoginErrorsToToasts } from './utils';
+import {
+  AuthFooterLinks,
+  AuthFooterLink,
+  AuthInsiderCard,
+} from './_components';
+
+const initialValues = {
+  crediential: '',
+  password: '',
+  keepLoggedIn: false
+};
 
 /**
  * Login page.
@@ -38,34 +49,32 @@ export default function Login() {
 
   return (
     <AuthInsider>
-      <div className="login-form">
-        <div className={'authentication-page__label-section'}>
-          <h3>
-            <T id={'log_in'} />
-          </h3>
-          {/* <T id={'need_bigcapital_account'} />
-          <Link to="/auth/register">
-            {' '}
-            <T id={'create_an_account'} />
-          </Link> */}
-        </div>
-
+      <AuthInsiderCard>
         <Formik
-          initialValues={{
-            crediential: '',
-            password: '',
-          }}
+          initialValues={initialValues}
           validationSchema={LoginSchema}
           onSubmit={handleSubmit}
           component={LoginForm}
         />
+      </AuthInsiderCard>
 
-        <div class="authentication-page__footer-links">
-          <Link to={'/auth/send_reset_password'}>
-            <T id={'forget_my_password'} />
-          </Link>
-        </div>
-      </div>
+      <LoginFooterLinks />
     </AuthInsider>
   );
 }
+
+function LoginFooterLinks() {
+  return (
+    <AuthFooterLinks>
+      <AuthFooterLink>
+        Don't have an account? <Link to={'/auth/register'}>Sign up</Link>
+      </AuthFooterLink>
+
+      <AuthFooterLink>
+        <Link to={'/auth/send_reset_password'}>
+          <T id={'forget_my_password'} />
+        </Link>
+      </AuthFooterLink>
+    </AuthFooterLinks>
+  );
+}

packages/webapp/src/containers/Authentication/LoginForm.tsx

@@ -1,89 +1,63 @@
 // @ts-nocheck
-import React from 'react';
-import {
-  Button,
-  InputGroup,
-  Intent,
-  FormGroup,
-  Checkbox,
-} from '@blueprintjs/core';
-import { Form, ErrorMessage, Field } from 'formik';
-import { T } from '@/components';
-import { inputIntent } from '@/utils';
-import { PasswordRevealer } from './components';
+import React, { useState } from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { Form } from 'formik';
+import { Tooltip2 } from '@blueprintjs/popover2';
+
+import { FFormGroup, FInputGroup, FCheckbox, T } from '@/components';
+import { AuthSubmitButton } from './_components';
 
 /**
  * Login form.
  */
 export default function LoginForm({ isSubmitting }) {
-  const [passwordType, setPasswordType] = React.useState('password');
+  const [showPassword, setShowPassword] = useState<boolean>(false);
 
   // Handle password revealer changing.
-  const handlePasswordRevealerChange = React.useCallback(
-    (shown) => {
-      const type = shown ? 'text' : 'password';
-      setPasswordType(type);
-    },
-    [setPasswordType],
+  const handleLockClick = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const lockButton = (
+    <Tooltip2 content={`${showPassword ? 'Hide' : 'Show'} Password`}>
+      <Button
+        icon={showPassword ? 'unlock' : 'lock'}
+        intent={Intent.WARNING}
+        minimal={true}
+        onClick={handleLockClick}
+        small={true}
+      />
+    </Tooltip2>
   );
 
   return (
-    <Form className={'authentication-page__form'}>
-      <Field name={'crediential'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'email_or_phone_number'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'crediential'} />}
-            className={'form-group--crediential'}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              large={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </Field>
+    <Form>
+      <FFormGroup name={'crediential'} label={<T id={'email_address'} />}>
+        <FInputGroup name={'crediential'} large={true} />
+      </FFormGroup>
 
-      <Field name={'password'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'password'} />}
-            labelInfo={
-              <PasswordRevealer onChange={handlePasswordRevealerChange} />
-            }
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'password'} />}
-            className={'form-group--password has-password-revealer'}
-          >
-            <InputGroup
-              large={true}
-              intent={inputIntent({ error, touched })}
-              type={passwordType}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup name={'password'} label={<T id={'password'} />}>
+        <FInputGroup
+          name={'password'}
+          large={true}
+          type={showPassword ? 'text' : 'password'}
+          rightElement={lockButton}
+        />
+      </FFormGroup>
 
-      <div className={'login-form__checkbox-section'}>
-        <Checkbox large={true} className={'checkbox--remember-me'}>
-          <T id={'keep_me_logged_in'} />
-        </Checkbox>
-      </div>
+      <FCheckbox name={'keepLoggedIn'}>
+        <T id={'keep_me_logged_in'} />
+      </FCheckbox>
 
-      <div className={'authentication-page__submit-button-wrap'}>
-        <Button
-          type={'submit'}
-          intent={Intent.PRIMARY}
-          fill={true}
-          lang={true}
-          loading={isSubmitting}
-        >
-          <T id={'log_in'} />
-        </Button>
-      </div>
+      <AuthSubmitButton
+        type={'submit'}
+        intent={Intent.PRIMARY}
+        fill={true}
+        large={true}
+        loading={isSubmitting}
+      >
+        <T id={'log_in'} />
+      </AuthSubmitButton>
     </Form>
   );
 }

packages/webapp/src/containers/Authentication/Register.tsx

@@ -11,6 +11,18 @@ import { useAuthLogin, useAuthRegister } from '@/hooks/query/authentication';
 
 import RegisterForm from './RegisterForm';
 import { RegisterSchema, transformRegisterErrorsToForm } from './utils';
+import {
+  AuthFooterLinks,
+  AuthFooterLink,
+  AuthInsiderCard,
+} from './_components';
+
+const initialValues = {
+  first_name: '',
+  last_name: '',
+  email: '',
+  password: '',
+};
 
 /**
  * Register form.
@@ -19,18 +31,6 @@ export default function RegisterUserForm() {
   const { mutateAsync: authLoginMutate } = useAuthLogin();
   const { mutateAsync: authRegisterMutate } = useAuthRegister();
 
-  const initialValues = useMemo(
-    () => ({
-      first_name: '',
-      last_name: '',
-      email: '',
-      phone_number: '',
-      password: '',
-      country: 'LY',
-    }),
-    [],
-  );
-
   const handleSubmit = (values, { setSubmitting, setErrors }) => {
     authRegisterMutate(values)
       .then((response) => {
@@ -66,24 +66,32 @@ export default function RegisterUserForm() {
 
   return (
     <AuthInsider>
-      <div className={'register-form'}>
-        <div className={'authentication-page__label-section'}>
-          <h3>
-            <T id={'register_a_new_organization'} />
-          </h3>
-          <T id={'you_have_a_bigcapital_account'} />
-          <Link to="/auth/login">
-            <T id={'login'} />
-          </Link>
-        </div>
-
+      <AuthInsiderCard>
         <Formik
           initialValues={initialValues}
           validationSchema={RegisterSchema}
           onSubmit={handleSubmit}
           component={RegisterForm}
         />
-      </div>
+      </AuthInsiderCard>
+
+      <RegisterFooterLinks />
     </AuthInsider>
   );
 }
+
+function RegisterFooterLinks() {
+  return (
+    <AuthFooterLinks>
+      <AuthFooterLink>
+        Return to <Link to={'/auth/login'}>Sign In</Link>
+      </AuthFooterLink>
+
+      <AuthFooterLink>
+        <Link to={'/auth/send_reset_password'}>
+          <T id={'forget_my_password'} />
+        </Link>
+      </AuthFooterLink>
+    </AuthFooterLinks>
+  );
+}

packages/webapp/src/containers/Authentication/RegisterForm.tsx

@@ -1,148 +1,101 @@
 // @ts-nocheck
 import React from 'react';
+import { Form } from 'formik';
 import intl from 'react-intl-universal';
-import {
-  Button,
-  InputGroup,
-  Intent,
-  FormGroup,
-  Spinner,
-} from '@blueprintjs/core';
-import { ErrorMessage, Field, Form } from 'formik';
-import { FormattedMessage as T } from '@/components';
+import { Intent, Button } from '@blueprintjs/core';
 import { Link } from 'react-router-dom';
-import { Row, Col, If } from '@/components';
-import { PasswordRevealer } from './components';
-import { inputIntent } from '@/utils';
+import { Tooltip2 } from '@blueprintjs/popover2';
+import styled from 'styled-components';
+
+import {
+  FFormGroup,
+  FInputGroup,
+  Row,
+  Col,
+  FormattedMessage as T,
+} from '@/components';
+import { AuthSubmitButton, AuthenticationLoadingOverlay } from './_components';
 
 /**
  * Register form.
  */
 export default function RegisterForm({ isSubmitting }) {
-  const [passwordType, setPasswordType] = React.useState('password');
+  const [showPassword, setShowPassword] = React.useState<boolean>(false);
 
   // Handle password revealer changing.
-  const handlePasswordRevealerChange = React.useCallback(
-    (shown) => {
-      const type = shown ? 'text' : 'password';
-      setPasswordType(type);
-    },
-    [setPasswordType],
+  const handleLockClick = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const lockButton = (
+    <Tooltip2 content={`${showPassword ? 'Hide' : 'Show'} Password`}>
+      <Button
+        icon={showPassword ? 'unlock' : 'lock'}
+        intent={Intent.WARNING}
+        minimal={true}
+        onClick={handleLockClick}
+        small={true}
+      />
+    </Tooltip2>
   );
 
   return (
-    <Form className={'authentication-page__form'}>
+    <RegisterFormRoot>
       <Row className={'name-section'}>
         <Col md={6}>
-          <Field name={'first_name'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'first_name'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'first_name'} />}
-                className={'form-group--first-name'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </Field>
+          <FFormGroup name={'first_name'} label={<T id={'first_name'} />}>
+            <FInputGroup name={'first_name'} large={true} />
+          </FFormGroup>
         </Col>
 
         <Col md={6}>
-          <Field name={'last_name'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'last_name'} />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'last_name'} />}
-                className={'form-group--last-name'}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </Field>
+          <FFormGroup name={'last_name'} label={<T id={'last_name'} />}>
+            <FInputGroup name={'last_name'} large={true} />
+          </FFormGroup>
         </Col>
       </Row>
 
-      <Field name={'phone_number'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'phone_number'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'phone_number'} />}
-            className={'form-group--phone-number'}
-          >
-            <InputGroup intent={inputIntent({ error, touched })} {...field} />
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup name={'email'} label={<T id={'email'} />}>
+        <FInputGroup name={'email'} large={true} />
+      </FFormGroup>
 
-      <Field name={'email'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'email'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'email'} />}
-            className={'form-group--email'}
-          >
-            <InputGroup intent={inputIntent({ error, touched })} {...field} />
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup name={'password'} label={<T id={'password'} />}>
+        <FInputGroup
+          name={'password'}
+          type={showPassword ? 'text' : 'password'}
+          rightElement={lockButton}
+          large={true}
+        />
+      </FFormGroup>
 
-      <Field name={'password'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'password'} />}
-            labelInfo={
-              <PasswordRevealer onChange={handlePasswordRevealerChange} />
-            }
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'password'} />}
-            className={'form-group--password has-password-revealer'}
-          >
-            <InputGroup
-              lang={true}
-              type={passwordType}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </Field>
+      <TermsConditionsText>
+        {intl.getHTML('signing_in_or_creating', {
+          terms: (msg) => <Link>{msg}</Link>,
+          privacy: (msg) => <Link>{msg}</Link>,
+        })}
+      </TermsConditionsText>
 
-      <div className={'register-form__agreement-section'}>
-        <p>
-          {intl.getHTML('signing_in_or_creating', {
-            terms: (msg) => <Link>{msg}</Link>,
-            privacy: (msg) => <Link>{msg}</Link>,
-          })}
-        </p>
-      </div>
+      <AuthSubmitButton
+        className={'btn-register'}
+        intent={Intent.PRIMARY}
+        type="submit"
+        fill={true}
+        large={true}
+        loading={isSubmitting}
+      >
+        <T id={'register'} />
+      </AuthSubmitButton>
 
-      <div className={'authentication-page__submit-button-wrap'}>
-        <Button
-          className={'btn-register'}
-          intent={Intent.PRIMARY}
-          type="submit"
-          fill={true}
-          loading={isSubmitting}
-        >
-          <T id={'register'} />
-        </Button>
-      </div>
-
-      <If condition={isSubmitting}>
-        <div class="authentication-page__loading-overlay">
-          <Spinner size={50} />
-        </div>
-      </If>
-    </Form>
+      {isSubmitting && <AuthenticationLoadingOverlay />}
+    </RegisterFormRoot>
   );
 }
+
+const TermsConditionsText = styled.p`
+  opacity: 0.8;
+  margin-bottom: 1.4rem;
+`;
+
+const RegisterFormRoot = styled(Form)`
+  position: relative;
+`;

packages/webapp/src/containers/Authentication/ResetPassword.tsx

@@ -4,14 +4,23 @@ import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent, Position } from '@blueprintjs/core';
 import { Link, useParams, useHistory } from 'react-router-dom';
-import { AppToaster, FormattedMessage as T } from '@/components';
 
+import { AppToaster } from '@/components';
 import { useAuthResetPassword } from '@/hooks/query';
-
 import AuthInsider from '@/containers/Authentication/AuthInsider';
 
+import {
+  AuthFooterLink,
+  AuthFooterLinks,
+  AuthInsiderCard,
+} from './_components';
 import ResetPasswordForm from './ResetPasswordForm';
 import { ResetPasswordSchema } from './utils';
+
+const initialValues = {
+  password: '',
+  confirm_password: '',
+};
 /**
  * Reset password page.
  */
@@ -22,22 +31,13 @@ export default function ResetPassword() {
   // Authentication reset password.
   const { mutateAsync: authResetPasswordMutate } = useAuthResetPassword();
 
-  // Initial values of the form.
-  const initialValues = useMemo(
-    () => ({
-      password: '',
-      confirm_password: '',
-    }),
-    [],
-  );
-
   // Handle the form submitting.
   const handleSubmit = (values, { setSubmitting }) => {
     authResetPasswordMutate([token, values])
       .then((response) => {
         AppToaster.show({
           message: intl.get('password_successfully_updated'),
-          intent: Intent.DANGER,
+          intent: Intent.SUCCESS,
           position: Position.BOTTOM,
         });
         history.push('/auth/login');
@@ -64,24 +64,30 @@ export default function ResetPassword() {
 
   return (
     <AuthInsider>
-      <div className={'submit-np-form'}>
-        <div className={'authentication-page__label-section'}>
-          <h3>
-            <T id={'choose_a_new_password'} />
-          </h3>
-          <T id={'you_remembered_your_password'} />{' '}
-          <Link to="/auth/login">
-            <T id={'login'} />
-          </Link>
-        </div>
-
+      <AuthInsiderCard>
         <Formik
           initialValues={initialValues}
           validationSchema={ResetPasswordSchema}
           onSubmit={handleSubmit}
           component={ResetPasswordForm}
         />
-      </div>
+      </AuthInsiderCard>
+
+      <ResetPasswordFooterLinks />
     </AuthInsider>
   );
 }
+
+function ResetPasswordFooterLinks() {
+  return (
+    <AuthFooterLinks>
+      <AuthFooterLink>
+        Don't have an account? <Link to={'/auth/register'}>Sign up</Link>
+      </AuthFooterLink>
+
+      <AuthFooterLink>
+        Return to <Link to={'/auth/login'}>Sign In</Link>
+      </AuthFooterLink>
+    </AuthFooterLinks>
+  );
+}

packages/webapp/src/containers/Authentication/ResetPasswordForm.tsx

@@ -1,9 +1,9 @@
 // @ts-nocheck
 import React from 'react';
-import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
-import { Form, ErrorMessage, FastField } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { Intent } from '@blueprintjs/core';
+import { Form } from 'formik';
+import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
+import { AuthSubmitButton } from './_components';
 
 /**
  * Reset password form.
@@ -11,54 +11,23 @@ import { inputIntent } from '@/utils';
 export default function ResetPasswordForm({ isSubmitting }) {
   return (
     <Form>
-      <FastField name={'password'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'new_password'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'password'} />}
-            className={'form-group--password'}
-          >
-            <InputGroup
-              lang={true}
-              type={'password'}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'password'} label={<T id={'new_password'} />}>
+        <FInputGroup name={'password'} type={'password'} large={true} />
+      </FFormGroup>
 
-      <FastField name={'confirm_password'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'new_password'} />}
-            labelInfo={'(again):'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'confirm_password'} />}
-            className={'form-group--confirm-password'}
-          >
-            <InputGroup
-              lang={true}
-              type={'password'}
-              intent={inputIntent({ error, touched })}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'confirm_password'} label={<T id={'new_password'} />}>
+        <FInputGroup name={'confirm_password'} type={'password'} large={true} />
+      </FFormGroup>
 
-      <div className={'authentication-page__submit-button-wrap'}>
-        <Button
-          fill={true}
-          className={'btn-new'}
-          intent={Intent.PRIMARY}
-          type="submit"
-          loading={isSubmitting}
-        >
-          <T id={'submit'} />
-        </Button>
-      </div>
+      <AuthSubmitButton
+        fill={true}
+        intent={Intent.PRIMARY}
+        type="submit"
+        loading={isSubmitting}
+        large={true}
+      >
+        <T id={'submit'} />
+      </AuthSubmitButton>
     </Form>
   );
 }

packages/webapp/src/containers/Authentication/SendResetPassword.tsx

@@ -5,33 +5,32 @@ import { Formik } from 'formik';
 import { Link, useHistory } from 'react-router-dom';
 import { Intent } from '@blueprintjs/core';
 
-import { AppToaster, FormattedMessage as T } from '@/components';
+import { AppToaster } from '@/components';
 import { useAuthSendResetPassword } from '@/hooks/query';
 
 import SendResetPasswordForm from './SendResetPasswordForm';
+import {
+  AuthFooterLink,
+  AuthFooterLinks,
+  AuthInsiderCard,
+} from './_components';
 import {
   SendResetPasswordSchema,
   transformSendResetPassErrorsToToasts,
 } from './utils';
-
 import AuthInsider from '@/containers/Authentication/AuthInsider';
 
+const initialValues = {
+  crediential: '',
+};
+
 /**
  * Send reset password page.
  */
 export default function SendResetPassword({ requestSendResetPassword }) {
   const history = useHistory();
-
   const { mutateAsync: sendResetPasswordMutate } = useAuthSendResetPassword();
 
-  // Initial values.
-  const initialValues = useMemo(
-    () => ({
-      crediential: '',
-    }),
-    [],
-  );
-
   // Handle form submitting.
   const handleSubmit = (values, { setSubmitting }) => {
     sendResetPasswordMutate({ email: values.crediential })
@@ -61,28 +60,30 @@ export default function SendResetPassword({ requestSendResetPassword }) {
 
   return (
     <AuthInsider>
-      <div className="reset-form">
-        <div className={'authentication-page__label-section'}>
-          <h3>
-            <T id={'you_can_t_login'} />
-          </h3>
-          <p>
-            <T id={'we_ll_send_a_recovery_link_to_your_email'} />
-          </p>
-        </div>
-
+      <AuthInsiderCard>
         <Formik
           initialValues={initialValues}
           onSubmit={handleSubmit}
           validationSchema={SendResetPasswordSchema}
           component={SendResetPasswordForm}
         />
-        <div class="authentication-page__footer-links">
-          <Link to="/auth/login">
-            <T id={'return_to_log_in'} />
-          </Link>
-        </div>
-      </div>
+      </AuthInsiderCard>
+
+      <SendResetPasswordFooterLinks />
     </AuthInsider>
   );
 }
+
+function SendResetPasswordFooterLinks() {
+  return (
+    <AuthFooterLinks>
+      <AuthFooterLink>
+        Don't have an account? <Link to={'/auth/register'}>Sign up</Link>
+      </AuthFooterLink>
+
+      <AuthFooterLink>
+        Return to <Link to={'/auth/login'}>Sign In</Link>
+      </AuthFooterLink>
+    </AuthFooterLinks>
+  );
+}

packages/webapp/src/containers/Authentication/SendResetPasswordForm.tsx

@@ -1,43 +1,41 @@
 // @ts-nocheck
 import React from 'react';
-import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
-import { Form, ErrorMessage, FastField } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { Intent } from '@blueprintjs/core';
+import { Form } from 'formik';
+import styled from 'styled-components';
+
+import { FInputGroup, FFormGroup, FormattedMessage as T } from '@/components';
+import { AuthSubmitButton } from './_components';
 
 /**
  * Send reset password form.
  */
 export default function SendResetPasswordForm({ isSubmitting }) {
   return (
-    <Form className={'send-reset-password'}>
-      <FastField name={'crediential'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'email_or_phone_number'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'crediential'} />}
-            className={'form-group--crediential'}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              large={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+    <Form>
+      <TopParagraph>
+        Enter the email address associated with your account and we'll send you
+        a link to reset your password.
+      </TopParagraph>
 
-      <div className={'authentication-page__submit-button-wrap'}>
-        <Button
-          type={'submit'}
-          intent={Intent.PRIMARY}
-          fill={true}
-          loading={isSubmitting}
-        >
-          <T id={'send_reset_password_mail'} />
-        </Button>
-      </div>
+      <FFormGroup name={'crediential'} label={<T id={'email_address'} />}>
+        <FInputGroup name={'crediential'} large={true} />
+      </FFormGroup>
+
+      <AuthSubmitButton
+        type={'submit'}
+        intent={Intent.PRIMARY}
+        fill={true}
+        large={true}
+        loading={isSubmitting}
+      >
+        Reset Password
+      </AuthSubmitButton>
     </Form>
   );
 }
+
+const TopParagraph = styled.p`
+  margin-bottom: 1.6rem;
+  opacity: 0.8;
+`;

packages/webapp/src/containers/Authentication/_components.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Spinner } from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
+
+export function AuthenticationLoadingOverlay() {
+  return (
+    <AuthOverlayRoot>
+      <Spinner size={50} />
+    </AuthOverlayRoot>
+  );
+}
+
+const AuthOverlayRoot = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(252, 253, 255, 0.5);
+  display: flex;
+  justify-content: center;
+`;
+
+export const AuthInsiderContent = styled.div`
+  position: relative;
+`;
+export const AuthInsiderCard = styled.div`
+  border: 1px solid #d5d5d5;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  padding: 26px 22px;
+  background: #ffff;
+  border-radius: 3px;
+`;
+
+export const AuthInsiderCopyright = styled.div`
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+  margin-top: 1.2rem;
+
+  .bp3-icon-bigcapital {
+    svg {
+      path {
+        fill: #a3a3a3;
+      }
+    }
+  }
+`;
+
+export const AuthFooterLinks = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-left: 1.2rem;
+  padding-right: 1.2rem;
+  margin-top: 1rem;
+`;
+
+export const AuthFooterLink = styled.p`
+  color: #666;
+  margin: 0;
+`;
+
+export const AuthSubmitButton = styled(Button)`
+  margin-top: 20px;
+
+  &.bp3-intent-primary {
+    background-color: #0052cc;
+
+    &:disabled,
+    &.bp3-disabled {
+      background-color: rgba(0, 82, 204, 0.4);
+    }
+  }
+`;

packages/webapp/src/containers/Authentication/components.tsx

@@ -1,57 +1,42 @@
 // @ts-nocheck
 import React from 'react';
-import ContentLoader from 'react-content-loader';
-import { If, Icon, FormattedMessage as T } from '@/components';
-import { saveInvoke } from '@/utils';
-
-export function PasswordRevealer({ defaultShown = false, onChange }) {
-  const [shown, setShown] = React.useState(defaultShown);
-
-  const handleClick = () => {
-    setShown(!shown);
-    saveInvoke(onChange, !shown);
-  };
-
-  return (
-    <span class="password-revealer" onClick={handleClick}>
-      <If condition={shown}>
-        <Icon icon="eye-slash" />{' '}
-        <span class="text">
-          <T id={'hide'} />
-        </span>
-      </If>
-      <If condition={!shown}>
-        <Icon icon="eye" />{' '}
-        <span class="text">
-          <T id={'show'} />
-        </span>
-      </If>
-    </span>
-  );
-}
+import styled from 'styled-components';
+import { AuthInsiderCard } from './_components';
+import { Skeleton } from '@/components';
 
 /**
  * Invite accept loading space.
  */
-export function InviteAcceptLoading({ isLoading, children, ...props }) {
+export function InviteAcceptLoading({ isLoading, children }) {
   return isLoading ? (
-    <ContentLoader
-      speed={2}
-      width={400}
-      height={280}
-      viewBox="0 0 400 280"
-      backgroundColor="#f3f3f3"
-      foregroundColor="#e6e6e6"
-      {...props}
-    >
-      <rect x="0" y="80" rx="2" ry="2" width="200" height="20" />
-      <rect x="0" y="0" rx="2" ry="2" width="250" height="30" />
-      <rect x="0" y="38" rx="2" ry="2" width="300" height="15" />
-      <rect x="0" y="175" rx="2" ry="2" width="200" height="20" />
-      <rect x="1" y="205" rx="2" ry="2" width="385" height="38" />
-      <rect x="0" y="110" rx="2" ry="2" width="385" height="38" />
-    </ContentLoader>
+    <AuthInsiderCard>
+      <Fields>
+        <SkeletonField />
+        <SkeletonField />
+        <SkeletonField />
+      </Fields>
+    </AuthInsiderCard>
   ) : (
     children
   );
 }
+
+function SkeletonField() {
+  return (
+    <SkeletonFieldRoot>
+      <Skeleton>XXXX XXXX</Skeleton>
+      <Skeleton minWidth={100}>XXXX XXXX XXXX XXXX</Skeleton>
+    </SkeletonFieldRoot>
+  );
+}
+
+const Fields = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const SkeletonFieldRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;

packages/webapp/src/containers/Authentication/utils.tsx

@@ -15,42 +15,19 @@ const REGISTER_ERRORS = {
 };
 
 export const LoginSchema = Yup.object().shape({
-  crediential: Yup.string()
-    .required()
-    .email()
-    .label(intl.get('email')),
-  password: Yup.string()
-    .required()
-    .min(4)
-    .label(intl.get('password')),
+  crediential: Yup.string().required().email().label(intl.get('email')),
+  password: Yup.string().required().min(4).label(intl.get('password')),
 });
 
 export const RegisterSchema = Yup.object().shape({
-  first_name: Yup.string()
-    .required()
-    .label(intl.get('first_name_')),
-  last_name: Yup.string()
-    .required()
-    .label(intl.get('last_name_')),
-  email: Yup.string()
-    .email()
-    .required()
-    .label(intl.get('email')),
-  phone_number: Yup.string()
-    .matches()
-    .required()
-    .label(intl.get('phone_number_')),
-  password: Yup.string()
-    .min(4)
-    .required()
-    .label(intl.get('password')),
+  first_name: Yup.string().required().label(intl.get('first_name_')),
+  last_name: Yup.string().required().label(intl.get('last_name_')),
+  email: Yup.string().email().required().label(intl.get('email')),
+  password: Yup.string().min(4).required().label(intl.get('password')),
 });
 
 export const ResetPasswordSchema = Yup.object().shape({
-  password: Yup.string()
-    .min(4)
-    .required()
-    .label(intl.get('password')),
+  password: Yup.string().min(4).required().label(intl.get('password')),
   confirm_password: Yup.string()
     .oneOf([Yup.ref('password'), null])
     .required()
@@ -59,27 +36,13 @@ export const ResetPasswordSchema = Yup.object().shape({
 
 // Validation schema.
 export const SendResetPasswordSchema = Yup.object().shape({
-  crediential: Yup.string()
-    .required()
-    .email()
-    .label(intl.get('email')),
+  crediential: Yup.string().required().email().label(intl.get('email')),
 });
 
 export const InviteAcceptSchema = Yup.object().shape({
-  first_name: Yup.string()
-    .required()
-    .label(intl.get('first_name_')),
-  last_name: Yup.string()
-    .required()
-    .label(intl.get('last_name_')),
-  phone_number: Yup.string()
-    .matches()
-    .required()
-    .label(intl.get('phone_number')),
-  password: Yup.string()
-    .min(4)
-    .required()
-    .label(intl.get('password')),
+  first_name: Yup.string().required().label(intl.get('first_name_')),
+  last_name: Yup.string().required().label(intl.get('last_name_')),
+  password: Yup.string().min(4).required().label(intl.get('password')),
 });
 
 export const transformSendResetPassErrorsToToasts = (errors) => {
@@ -92,7 +55,7 @@ export const transformSendResetPassErrorsToToasts = (errors) => {
     });
   }
   return toastBuilders;
-}
+};
 
 export const transformLoginErrorsToToasts = (errors) => {
   const toastBuilders = [];
@@ -109,25 +72,25 @@ export const transformLoginErrorsToToasts = (errors) => {
       intent: Intent.DANGER,
     });
   }
-  if (
-    errors.find((e) => e.type === LOGIN_ERRORS.LOGIN_TO_MANY_ATTEMPTS)
-  ) {
+  if (errors.find((e) => e.type === LOGIN_ERRORS.LOGIN_TO_MANY_ATTEMPTS)) {
     toastBuilders.push({
       message: intl.get('your_account_has_been_locked'),
       intent: Intent.DANGER,
     });
   }
   return toastBuilders;
-}
+};
 
 export const transformRegisterErrorsToForm = (errors) => {
   const formErrors = {};
 
   if (errors.some((e) => e.type === REGISTER_ERRORS.PHONE_NUMBER_EXISTS)) {
-    formErrors.phone_number = intl.get('the_phone_number_already_used_in_another_account');
+    formErrors.phone_number = intl.get(
+      'the_phone_number_already_used_in_another_account',
+    );
   }
   if (errors.some((e) => e.type === REGISTER_ERRORS.EMAIL_EXISTS)) {
     formErrors.email = intl.get('the_email_already_used_in_another_account');
   }
   return formErrors;
-}
+};

packages/webapp/src/containers/Dialogs/UserFormDialog/UserForm.schema.tsx

@@ -6,10 +6,6 @@ const Schema = Yup.object().shape({
   email: Yup.string().email().required().label(intl.get('email')),
   first_name: Yup.string().required().label(intl.get('first_name_')),
   last_name: Yup.string().required().label(intl.get('last_name_')),
-  phone_number: Yup.string()
-    .matches()
-    .required()
-    .label(intl.get('phone_number_')),
   role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
 });
 

packages/webapp/src/containers/Dialogs/UserFormDialog/UserForm.tsx

@@ -13,7 +13,14 @@ import UserFormContent from './UserFormContent';
 import { useUserFormContext } from './UserFormProvider';
 import { transformErrors } from './utils';
 
-import { compose, objectKeysTransform } from '@/utils';
+import { compose, objectKeysTransform, transformToForm } from '@/utils';
+
+const initialValues = {
+  first_name: '',
+  last_name: '',
+  email: '',
+  role_id: '',
+};
 
 /**
  * User form.
@@ -27,12 +34,9 @@ function UserForm({
   const { dialogName, user, userId, isEditMode, EditUserMutate } =
     useUserFormContext();
 
-  const initialValues = {
-    ...(isEditMode &&
-      pick(
-        objectKeysTransform(user, snakeCase),
-        Object.keys(UserFormSchema.fields),
-      )),
+  const initialFormValues = {
+    ...initialValues,
+    ...(isEditMode && transformToForm(user, initialValues)),
   };
 
   const handleSubmit = (values, { setSubmitting, setErrors }) => {
@@ -68,7 +72,7 @@ function UserForm({
   return (
     <Formik
       validationSchema={UserFormSchema}
-      initialValues={initialValues}
+      initialValues={initialFormValues}
       onSubmit={handleSubmit}
     >
       <UserFormContent calloutCode={calloutCode} />

packages/webapp/src/containers/Dialogs/UserFormDialog/UserFormContent.tsx

@@ -8,9 +8,10 @@ import {
   Button,
 } from '@blueprintjs/core';
 import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
+
+import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
 import { inputIntent } from '@/utils';
 import { ListSelect, FieldRequiredHint } from '@/components';
 import { useUserFormContext } from './UserFormProvider';
@@ -23,6 +24,7 @@ import { UserFormCalloutAlerts } from './components';
  */
 function UserFormContent({
   calloutCode,
+
   // #withDialogActions
   closeDialog,
 }) {
@@ -39,60 +41,20 @@ function UserFormContent({
         <UserFormCalloutAlerts calloutCodes={calloutCode} />
 
         {/* ----------- Email ----------- */}
-        <FastField name={'email'}>
-          {({ field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'email'} />}
-              labelInfo={<FieldRequiredHint />}
-              className={classNames('form-group--email', CLASSES.FILL)}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="email" />}
-            >
-              <InputGroup medium={true} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'email'} label={<T id={'email'} />}>
+          <FInputGroup name={'email'} />
+        </FFormGroup>
 
         {/* ----------- First name ----------- */}
-        <FastField name={'first_name'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'first_name'} />}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'first_name'} />}
-            >
-              <InputGroup intent={inputIntent({ error, touched })} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'first_name'} label={<T id={'first_name'} />}>
+          <FInputGroup name={'first_name'} />
+        </FFormGroup>
 
         {/* ----------- Last name ----------- */}
-        <FastField name={'last_name'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'last_name'} />}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'last_name'} />}
-            >
-              <InputGroup intent={inputIntent({ error, touched })} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
-        {/* ----------- Phone name ----------- */}
-        <FastField name={'phone_number'}>
-          {({ form, field, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'phone_number'} />}
-              labelInfo={<FieldRequiredHint />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name={'phone_number'} />}
-            >
-              <InputGroup intent={inputIntent({ error, touched })} {...field} />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup name={'last_name'} label={<T id={'last_name'} />}>
+          <FInputGroup name={'last_name'} />
+        </FFormGroup>
+
         {/* ----------- Role name ----------- */}
         <FastField name={'role_id'}>
           {({ form, field: { value }, meta: { error, touched } }) => (
@@ -127,7 +89,12 @@ function UserFormContent({
             <T id={'cancel'} />
           </Button>
 
-          <Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            disabled={isSubmitting}
+            loading={isSubmitting}
+          >
             <T id={'edit'} />
           </Button>
         </div>

packages/webapp/src/containers/Preferences/General/GeneralForm.tsx

@@ -15,14 +15,15 @@ import {
 } from '@/components';
 import { inputIntent } from '@/utils';
 import { CLASSES } from '@/constants/classes';
-import { getCountries } from '@/constants/countries';
 import { getAllCurrenciesOptions } from '@/constants/currencies';
 import { getFiscalYear } from '@/constants/fiscalYearOptions';
 import { getLanguages } from '@/constants/languagesOptions';
 import { useGeneralFormContext } from './GeneralFormProvider';
+import { getAllCountries } from '@/utils/countries';
 
 import { shouldBaseCurrencyUpdate } from './utils';
 
+const Countries = getAllCountries();
 /**
  * Preferences general form.
  */
@@ -30,7 +31,6 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
   const history = useHistory();
 
   const FiscalYear = getFiscalYear();
-  const Countries = getCountries();
   const Languages = getLanguages();
   const Currencies = getAllCurrenciesOptions();
 

packages/webapp/src/containers/Setup/SetupOrganizationForm.tsx

@@ -5,15 +5,12 @@ import {
   Button,
   Intent,
   FormGroup,
-  InputGroup,
   MenuItem,
   Classes,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
-import useAutofocus from '@/hooks/useAutofocus'
-import { FormattedMessage as T } from '@/components';
-import { getCountries } from '@/constants/countries';
+import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
 
 import { Col, Row, ListSelect } from '@/components';
 import { inputIntent } from '@/utils';
@@ -21,6 +18,9 @@ import { inputIntent } from '@/utils';
 import { getFiscalYear } from '@/constants/fiscalYearOptions';
 import { getLanguages } from '@/constants/languagesOptions';
 import { getAllCurrenciesOptions } from '@/constants/currencies';
+import { getAllCountries } from '@/utils/countries';
+
+const countries = getAllCountries();
 
 /**
  * Setup organization form.
@@ -29,9 +29,6 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
   const FiscalYear = getFiscalYear();
   const Languages = getLanguages();
   const currencies = getAllCurrenciesOptions();
-  const countries = getCountries();
-
-  const accountRef = useAutofocus();
 
   return (
     <Form>
@@ -40,22 +37,9 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
       </h3>
 
       {/* ---------- Organization name ----------  */}
-      <FastField name={'name'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'legal_organization_name'} />}
-            className={'form-group--name'}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'name'} />}
-          >
-            <InputGroup
-              {...field}
-              intent={inputIntent({ error, touched })}
-              inputRef={accountRef}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'name'} label={<T id={'legal_organization_name'} />}>
+        <FInputGroup name={'name'} />
+      </FFormGroup>
 
       {/* ---------- Location ---------- */}
       <FastField name={'location'}>
@@ -71,11 +55,11 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
           >
             <ListSelect
               items={countries}
-              onItemSelect={({ value }) => {
-                form.setFieldValue('location', value);
+              onItemSelect={({ countryCode }) => {
+                form.setFieldValue('location', countryCode);
               }}
               selectedItem={value}
-              selectedItemProp={'value'}
+              selectedItemProp={'countryCode'}
               defaultText={<T id={'select_business_location'} />}
               textProp={'name'}
               popoverProps={{ minimal: true }}

packages/webapp/src/containers/Setup/SetupOrganizationPage.tsx

@@ -16,7 +16,7 @@ import { getSetupOrganizationValidation } from './SetupOrganization.schema';
 // Initial values.
 const defaultValues = {
   name: '',
-  location: 'libya',
+  location: '',
   baseCurrency: '',
   language: 'en',
   fiscalYear: '',

packages/webapp/src/lang/en/index.json

@@ -31,13 +31,14 @@
   "phone_number": "Phone Number",
   "you_email_address_is": "You email address is",
   "you_will_use_this_address_to_sign_in_to_bigcapital": "You will use this address to sign in to Bigcapital.",
-  "signing_in_or_creating": "By signing in or creating an account, you agree with our <br/> <a>Terms & Conditions </a> and <a> Privacy Statement </a> ",
+  "signing_in_or_creating": "By signing in or creating an account, you agree with our <a>Terms & Conditions </a> and <a> Privacy Statement </a> ",
   "and": "And",
   "create_account": "Create Account",
   "success": "Success",
   "register_a_new_organization": "Register a New Organization.",
   "organization_name": "Organization Name",
   "email": "Email",
+  "email_address": "Email Address",
   "register": "Register",
   "password_successfully_updated": "The Password for your account was successfully updated.",
   "choose_a_new_password": "Choose a new password",

packages/webapp/src/style/pages/Authentication/Auth.scss

@@ -1,224 +1,32 @@
-
 body.authentication {
   background-color: #fcfdff;
 }
 
-.authentication-insider {
-  width: 384px;
-  margin: 0 auto;
-  margin-bottom: 40px;
-  padding-top: 80px;
-
-  &__logo-section {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  &__content {
-    position: relative;
-  }
-
-  &__footer {
-    .auth-copyright {
-      text-align: center;
-      font-size: 12px;
-      color: #666;
-
-      .bp3-icon-bigcapital {
-        margin-top: 9px;
-
-        svg {
-          path {
-            fill: #a3a3a3;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-.authTransition{
-
+.authTransition {
   &-enter {
     opacity: 0;
   }
-  
+
   &-enter-active {
     opacity: 1;
     transition: opacity 250ms ease-in-out;
   }
-  
+
   &-enter-done {
     opacity: 1;
   }
-  
+
   &-exit {
     opacity: 1;
   }
-  
+
   &-exit-active {
     opacity: 0.5;
     transition: opacity 250ms ease-in-out;
   }
+
   &-exit-active {
     opacity: 0;
     display: none;
   }
- 
-}
- 
-
-.authentication-page {
-  &__goto-bigcapital {
-    position: fixed;
-    margin-top: 30px;
-    margin-left: 30px;
-    color: #777;
-  }
-
-  .bp3-input {
-    min-height: 40px;
-  }
-  .bp3-form-group {
-    margin-bottom: 25px;
-  }
-
-  .bp3-form-group.has-password-revealer {
-    .bp3-label {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .password-revealer {
-      .text {
-        font-size: 12px;
-      }
-    }
-  }
-
-  .bp3-button.bp3-fill.bp3-intent-primary {
-    font-size: 16px;
-  }
-
-  &__label-section {
-    margin-bottom: 30px;
-    color: #555;
-
-    h3 {
-      font-weight: 500;
-      font-size: 22px;
-      color: #2d2b43;
-      margin: 0 0 12px;
-    }
-
-    a {
-      text-decoration: underline;
-      color: #0040bd;
-    }
-  }
-
-  &__form-wrapper {
-    width: 100%;
-    margin: 0 auto;
-  }
-
-  &__footer-links {
-    padding: 9px;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    text-align: center;
-    margin-bottom: 1.2rem;
-
-    a {
-      color: #0052cc;
-    }
-  }
-
-  &__loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: rgba(252, 253, 255, 0.5);
-    display: flex;
-    justify-content: center;
-  }
-
-  &__submit-button-wrap {
-    margin: 0px 0px 24px 0px;
-
-    .bp3-button {
-      background-color: #0052cc;
-      min-height: 45px;
-    }
-  }
-
-  // Login Form
-  // ------------------------------
-  .login-form {
-    // width: 690px;
-    // margin: 0px auto;
-    // padding: 85px 50px;
-
-    .checkbox {
-      &--remember-me {
-        margin: -6px 0 26px 0px;
-        font-size: 14px;
-      }
-    }
-  }
-
-  // Register form
-  // ----------------------------
-  .register-form {
-
-    &__agreement-section {
-      margin-top: -10px;
-
-      p {
-        font-size: 13px;
-        margin-top: -10px;
-        margin-bottom: 24px;
-        line-height: 1.65;
-      }
-    }
-
-    &__submit-button-wrap {
-      margin: 25px 0px 25px 0px;
-
-      .bp3-button {
-        min-height: 45px;
-        background-color: #0052cc;
-      }
-    }
-  }
-
-  // Send reset password
-  // ----------------------------
-  .send-reset-password {
-    .form-group--crediential {
-      margin-bottom: 36px;
-    }
-  }
-
-  // Invite form.
-  // ----------------
-  .invite-form {
-
-    &__statement-section {
-      margin-top: -10px;
-
-      p {
-        font-size: 14px;
-        margin-bottom: 20px;
-        line-height: 1.65;
-      }
-    }
-
-    .authentication-page__loading-overlay {
-      background: rgba(252, 253, 255, 0.9);
-    }
-  }
-}
+}

packages/webapp/src/style/pages/Setup/Organization.scss

@@ -55,6 +55,11 @@
       height: 40px;
       font-size: 15px;
       width: 100%;
+
+      &:disabled,
+      &.bp3-loading{
+        background-color: rgba(28, 36, 72, 0.5);
+      }
     }
   }
 }

packages/webapp/src/utils/countries.tsx

@@ -0,0 +1,10 @@
+import { Countries } from '@/constants/countries';
+
+export const getAllCountries = () => {
+  return Object.keys(Countries).map((countryCode) => {
+    return {
+      ...Countries[countryCode],
+      countryCode,
+    }
+  });
+};

playwright.config.ts

@@ -0,0 +1,38 @@
+import path from 'path';
+import { PlaywrightTestConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+// Reference: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+  // Timeout per test
+  timeout: 60 * 1000,
+  workers: 1,
+  // Test directory
+  testDir: path.join(__dirname, 'e2e'),
+  // If a test fails, retry it additional 2 times
+  retries: 0,
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: 'test-results/',
+  use: {
+    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: 'retain-on-failure',
+
+    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+    // contextOptions: {
+    //   ignoreHTTPSErrors: true,
+    // },
+    baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:4000',
+  },
+  projects: [
+    {
+      name: 'Desktop Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+};
+export default config;

vercel.json

@@ -1,5 +1,9 @@
 {
   "installCommand": "npm install && npm run bootstrap",
   "buildCommand": "CI='' npm run build:webapp",
-  "outputDirectory": "packages/webapp/build"
-}
+  "outputDirectory": "packages/webapp/build",
+  "rewrites": [{
+    "source": "/(.*)",
+    "destination": "/"
+  }]
+}