feat: User email verification after signing-up.

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

@@ -28,6 +28,20 @@ export default class AuthenticationController extends BaseController {
       asyncMiddleware(this.login.bind(this)),
       this.handlerErrors
     );
+    router.post(
+      'register/verify/resend',
+      [check('email').exists().isEmail()],
+      this.validationResult,
+      asyncMiddleware(this.registerVerifyResendMail.bind(this)),
+      this.handlerErrors
+    );
+    router.post(
+      '/register/verify',
+      this.signupVerifySchema,
+      this.validationResult,
+      asyncMiddleware(this.registerVerify.bind(this)),
+      this.handlerErrors
+    );
     router.post(
       '/register',
       this.registerSchema,
@@ -99,6 +113,17 @@ export default class AuthenticationController extends BaseController {
     ];
   }
 
+  private get signupVerifySchema(): ValidationChain[] {
+    return [
+      check('email')
+        .exists()
+        .isString()
+        .isEmail()
+        .isLength({ max: DATATYPES_LENGTH.STRING }),
+      check('token').exists().isString(),
+    ];
+  }
+
   /**
    * Reset password schema.
    * @returns {ValidationChain[]}
@@ -166,6 +191,60 @@ export default class AuthenticationController extends BaseController {
     }
   }
 
+  /**
+   * Verifies the provider user's email after signin-up.
+   * @param {Request} req
+   * @param {Response}| res
+   * @param {Function} next
+   * @returns {Response|void}
+   */
+  private async registerVerify(req: Request, res: Response, next: Function) {
+    const signUpVerifyDTO = this.matchedBodyData(req);
+
+    try {
+      const user = await this.authApplication.signUpConfirm(
+        signUpVerifyDTO.email,
+        signUpVerifyDTO.token
+      );
+      return res.status(200).send({
+        type: 'success',
+        message: 'The given user has verified successfully',
+        user,
+      });
+    } catch (error) {
+      next(error);
+    }
+  }
+
+  /**
+   *
+   * @param {Request} req
+   * @param {Response}| res
+   * @param {Function} next
+   * @returns
+   */
+  private async registerVerifyResendMail(
+    req: Request,
+    res: Response,
+    next: Function
+  ) {
+    const signUpVerifyDTO = this.matchedBodyData(req);
+
+    try {
+      const user = await this.authApplication.signUpConfirm(
+        signUpVerifyDTO.email,
+        signUpVerifyDTO.token
+      );
+      return res.status(200).send({
+        type: 'success',
+        message: 'The given user has verified successfully',
+        user,
+      });
+    } catch (error) {
+      next(error);
+    }
+  }
+
   /**
    * Send reset password handler
    * @param {Request} req

packages/server/src/interfaces/Authentication.ts

@@ -66,16 +66,27 @@ export interface IAuthResetedPasswordEventPayload {
   password: string;
 }
 
-
 export interface IAuthSendingResetPassword {
-  user: ISystemUser,
+  user: ISystemUser;
   token: string;
 }
 export interface IAuthSendedResetPassword {
-  user: ISystemUser,
+  user: ISystemUser;
   token: string;
 }
 
-export interface IAuthGetMetaPOJO  {
+export interface IAuthGetMetaPOJO {
   signupDisabled: boolean;
 }
+
+export interface IAuthSignUpVerifingEventPayload {
+  email: string;
+  verifyToken: string;
+  userId: number;
+}
+
+export interface IAuthSignUpVerifiedEventPayload {
+  email: string;
+  verifyToken: string;
+  userId: number;
+}

packages/server/src/loaders/eventEmitter.ts

@@ -91,6 +91,7 @@ import { SaleEstimateMarkApprovedOnMailSent } from '@/services/Sales/Estimates/s
 import { DeleteCashflowTransactionOnUncategorize } from '@/services/Cashflow/subscribers/DeleteCashflowTransactionOnUncategorize';
 import { PreventDeleteTransactionOnDelete } from '@/services/Cashflow/subscribers/PreventDeleteTransactionsOnDelete';
 import { SubscribeFreeOnSignupCommunity } from '@/services/Subscription/events/SubscribeFreeOnSignupCommunity';
+import { SendVerfiyMailOnSignUp } from '@/services/Authentication/events/SendVerfiyMailOnSignUp';
 
 
 export default () => {
@@ -222,6 +223,7 @@ export const susbcribers = () => {
     DeleteCashflowTransactionOnUncategorize,
     PreventDeleteTransactionOnDelete,
 
-    SubscribeFreeOnSignupCommunity
+    SubscribeFreeOnSignupCommunity,
+    SendVerfiyMailOnSignUp
   ];
 };

packages/server/src/loaders/jobs.ts

@@ -12,6 +12,7 @@ import { SaleReceiptMailNotificationJob } from '@/services/Sales/Receipts/SaleRe
 import { PaymentReceiveMailNotificationJob } from '@/services/Sales/PaymentReceives/PaymentReceiveMailNotificationJob';
 import { PlaidFetchTransactionsJob } from '@/services/Banking/Plaid/PlaidFetchTransactionsJob';
 import { ImportDeleteExpiredFilesJobs } from '@/services/Import/jobs/ImportDeleteExpiredFilesJob';
+import { SendVerifyMailJob } from '@/services/Authentication/jobs/SendVerifyMailJob';
 
 export default ({ agenda }: { agenda: Agenda }) => {
   new ResetPasswordMailJob(agenda);
@@ -27,6 +28,7 @@ export default ({ agenda }: { agenda: Agenda }) => {
   new PaymentReceiveMailNotificationJob(agenda);
   new PlaidFetchTransactionsJob(agenda);
   new ImportDeleteExpiredFilesJobs(agenda);
+  new SendVerifyMailJob(agenda);
 
   agenda.start().then(() => {
     agenda.every('1 hours', 'delete-expired-imported-files', {});

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

@@ -9,6 +9,13 @@ import { AuthSigninService } from './AuthSignin';
 import { AuthSignupService } from './AuthSignup';
 import { AuthSendResetPassword } from './AuthSendResetPassword';
 import { GetAuthMeta } from './GetAuthMeta';
+import { AuthSignupConfirmService } from './AuthSignupConfirm';
+import { SystemUser } from '@/system/models';
+
+interface ISignupConfirmDTO {
+  token: string;
+  email: string;
+}
 
 @Service()
 export default class AuthenticationApplication {
@@ -18,6 +25,9 @@ export default class AuthenticationApplication {
   @Inject()
   private authSignupService: AuthSignupService;
 
+  @Inject()
+  private authSignupConfirmService: AuthSignupConfirmService;
+
   @Inject()
   private authResetPasswordService: AuthSendResetPassword;
 
@@ -44,6 +54,29 @@ export default class AuthenticationApplication {
     return this.authSignupService.signUp(signupDTO);
   }
 
+  /**
+   * Verfying the provided user's email after signin-up.
+   * @param {string} email
+   * @param {string} token
+   * @returns {Promise<SystemUser>}
+   */
+  public async signUpConfirm(
+    email: string,
+    token: string
+  ): Promise<SystemUser> {
+    return this.authSignupConfirmService.signUpConfirm(email, token);
+  }
+
+  /**
+   *
+   * @param {string} email
+   * @param {string} token
+   * @returns
+   */
+  public async signUpConfirmSend(email: string, token: string) {
+    return this.authSignupConfirmService.signUpConfirm(email, token);
+  }
+
   /**
    * Generates and retrieve password reset token for the given user email.
    * @param {string} email

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

@@ -1,5 +1,6 @@
 import { isEmpty, omit } from 'lodash';
 import moment from 'moment';
+import crypto from 'crypto';
 import { ServiceError } from '@/exceptions';
 import {
   IAuthSignedUpEventPayload,
@@ -41,6 +42,7 @@ export class AuthSignupService {
     await this.validateEmailUniqiness(signupDTO.email);
 
     const hashedPassword = await hashPassword(signupDTO.password);
+    const verifyToken = crypto.randomBytes(64).toString('hex');
 
     // Triggers signin up event.
     await this.eventPublisher.emitAsync(events.auth.signingUp, {
@@ -50,6 +52,7 @@ export class AuthSignupService {
     const tenant = await this.tenantsManager.createTenant();
     const registeredUser = await systemUserRepository.create({
       ...omit(signupDTO, 'country'),
+      verifyToken,
       active: true,
       password: hashedPassword,
       tenantId: tenant.id,

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

@@ -0,0 +1,57 @@
+import { Inject, Service } from 'typedi';
+import { ServiceError } from '@/exceptions';
+import { SystemUser } from '@/system/models';
+import { ERRORS } from './_constants';
+import { EventPublisher } from '@/lib/EventPublisher/EventPublisher';
+import events from '@/subscribers/events';
+import {
+  IAuthSignUpVerifiedEventPayload,
+  IAuthSignUpVerifingEventPayload,
+} from '@/interfaces';
+
+@Service()
+export class AuthSignupConfirmService {
+  @Inject()
+  private eventPublisher: EventPublisher;
+
+  /**
+   * Verifies the provided user's email after signing-up.
+   * @throws {ServiceErrors}
+   * @param {IRegisterDTO} signupDTO
+   * @returns {Promise<ISystemUser>}
+   */
+  public async signUpConfirm(
+    email: string,
+    verifyToken: string
+  ): Promise<SystemUser> {
+    const foundUser = await SystemUser.query().findOne({ email, verifyToken });
+
+    if (!foundUser) {
+      throw new ServiceError(ERRORS.SIGNUP_CONFIRM_TOKEN_INVALID);
+    }
+    const userId = foundUser.id;
+
+    // Triggers `signUpConfirming` event.
+    await this.eventPublisher.emitAsync(events.auth.signUpConfirming, {
+      email,
+      verifyToken,
+      userId,
+    } as IAuthSignUpVerifingEventPayload);
+
+    const updatedUser = await SystemUser.query().patchAndFetchById(
+      foundUser.id,
+      {
+        verified: true,
+        verifyToken: '',
+      }
+    );
+    // Triggers `signUpConfirmed` event.
+    await this.eventPublisher.emitAsync(events.auth.signUpConfirmed, {
+      email,
+      verifyToken,
+      userId,
+    } as IAuthSignUpVerifiedEventPayload);
+
+    return updatedUser;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ServiceError } from '@/exceptions';
+import { SystemUser } from '@/system/models';
+import { Inject, Service } from 'typedi';
+import { ERRORS } from './_constants';
+
+@Service()
+export class AuthSignupConfirmResend {
+  @Inject('agenda')
+  private agenda: any;
+
+  /**
+   *
+   * @param {number} tenantId
+   * @param {string} email
+   */
+  public async signUpConfirmResend(email: string) {
+    const user = await SystemUser.query()
+      .findOne({ email })
+      .throwIfNotFound();
+
+    // 
+    if (user.verified) {
+      throw new ServiceError(ERRORS.USER_ALREADY_VERIFIED)
+    }
+    if (user.verifyToken) {
+      throw new ServiceError(ERRORS.USER_ALREADY_VERIFIED);
+    }
+    const payload = {
+      email: user.email,
+      token: user.verifyToken,
+      fullName: user.firstName,
+    };
+    await this.agenda.now('send-signup-verify-mail', payload);
+  }
+}

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

@@ -33,4 +33,34 @@ export default class AuthenticationMailMesssages {
       })
       .send();
   }
+
+  /**
+   * Sends signup verification mail.
+   * @param {string} email - Email address
+   * @param {string} fullName - User name.
+   * @param {string} token - Verification token.
+   * @returns {Promise<void>}
+   */
+  public async sendSignupVerificationMail(
+    email: string,
+    fullName: string,
+    token: string,
+  ) {
+    await new Mail()
+      .setSubject('Bigcapital - Verify your email')
+      .setView('mail/SignupVerifyEmail.html')
+      .setTo(email)
+      .setAttachments([
+        {
+          filename: 'bigcapital.png',
+          path: `${global.__views_dir}/images/bigcapital.png`,
+          cid: 'bigcapital_logo',
+        },
+      ])
+      .setData({
+        verifyUrl: `${config.baseURL}/auth/reset_password/${token}`,
+        fullName,
+      })
+      .send(); 
+  }
 }

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

@@ -9,4 +9,6 @@ export const ERRORS = {
   EMAIL_EXISTS: 'EMAIL_EXISTS',
   SIGNUP_RESTRICTED_NOT_ALLOWED: 'SIGNUP_RESTRICTED_NOT_ALLOWED',
   SIGNUP_RESTRICTED: 'SIGNUP_RESTRICTED',
+  SIGNUP_CONFIRM_TOKEN_INVALID: 'SIGNUP_CONFIRM_TOKEN_INVALID',
+  USER_ALREADY_VERIFIED: 'USER_ALREADY_VERIFIED',
 };

packages/server/src/services/Authentication/events/SendVerfiyMailOnSignUp.ts

@@ -0,0 +1,30 @@
+import { IAuthSignedUpEventPayload } from '@/interfaces';
+import events from '@/subscribers/events';
+import { Inject } from 'typedi';
+
+export class SendVerfiyMailOnSignUp {
+  @Inject('agenda')
+  private agenda: any;
+
+  /**
+   * Attaches events with handles.
+   */
+  public attach(bus) {
+    bus.subscribe(events.auth.signUp, this.handleSendVerifyMailOnSignup);
+  }
+
+  /**
+   *
+   * @param {ITaxRateEditedPayload} payload -
+   */
+  private handleSendVerifyMailOnSignup = async ({
+    user,
+  }: IAuthSignedUpEventPayload) => {
+    const payload = {
+      email: user.email,
+      token: user.verifyToken,
+      fullName: user.firstName,
+    };
+    await this.agenda.now('send-signup-verify-mail', payload);
+  };
+}

packages/server/src/services/Authentication/jobs/SendVerifyMailJob.ts

@@ -0,0 +1,35 @@
+import { Container } from 'typedi';
+import AuthenticationMailMesssages from '@/services/Authentication/AuthenticationMailMessages';
+
+export class SendVerifyMailJob {
+  /**
+   * Constructor method.
+   * @param {Agenda} agenda
+   */
+  constructor(agenda) {
+    agenda.define(
+      'send-signup-verify-mail',
+      { priority: 'high' },
+      this.handler.bind(this)
+    );
+  }
+
+  /**
+   * Handle send welcome mail job.
+   * @param {Job} job
+   * @param {Function} done
+   */
+  public async handler(job, done: Function): Promise<void> {
+    const { data } = job.attrs;
+    const { email, fullName, token } = data;
+    const authService = Container.get(AuthenticationMailMesssages);
+
+    try {
+      await authService.sendSignupVerificationMail(email, fullName, token);
+      done();
+    } catch (error) {
+      console.log(error);
+      done(error);
+    }
+  }
+}

packages/server/src/subscribers/events.ts

@@ -9,6 +9,9 @@ export default {
     signUp: 'onSignUp',
     signingUp: 'onSigningUp',
 
+    signUpConfirming: 'signUpConfirming',
+    signUpConfirmed: 'signUpConfirmed',
+
     sendingResetPassword: 'onSendingResetPassword',
     sendResetPassword: 'onSendResetPassword',
 

packages/server/src/system/migrations/20240425100821_add_confirmation_columns_to_users.js

@@ -0,0 +1,8 @@
+exports.up = function (knex) {
+  return knex.schema.table('users', (table) => {
+    table.string('verify_token');
+    table.boolean('verified').defaultTo(false);
+  });
+};
+
+exports.down = (knex) => {};

packages/server/src/system/models/SystemUser.ts

@@ -4,6 +4,12 @@ import SystemModel from '@/system/models/SystemModel';
 import SoftDeleteQueryBuilder from '@/collection/SoftDeleteQueryBuilder';
 
 export default class SystemUser extends SystemModel {
+  firstName!: string;
+  lastName!: string;
+  verified!: boolean;
+  inviteAcceptedAt!: Date | null;
+  deletedAt!: Date | null;
+
   /**
    * Table name.
    */
@@ -33,19 +39,29 @@ export default class SystemUser extends SystemModel {
   }
 
   /**
-   * 
+   * Detarmines whether the user is deleted.
+   * @returns {boolean}
    */
   get isDeleted() {
     return !!this.deletedAt;
   }
 
   /**
-   * 
+   * Detarmines whether the sent invite is accepted.
+   * @returns {boolean}
    */
   get isInviteAccepted() {
     return !!this.inviteAcceptedAt;
   }
 
+  /**
+   * Detarmines whether the user's email is verified.
+   * @returns {boolean}
+   */
+  get isVerified() {
+    return !!this.verified;
+  }
+
   /**
    * Full name attribute.
    */

packages/server/views/mail/SignupVerifyEmail.html

@@ -0,0 +1,424 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Bigcapital | Reset your password</title>
+    <style>
+      /* -------------------------------------
+          GLOBAL RESETS
+      ------------------------------------- */
+      
+      /*All the styling goes here*/
+      
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%; 
+      }
+
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%; 
+      }
+
+      table {
+        border-collapse: separate;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        width: 100%; }
+        table td {
+          font-family: sans-serif;
+          font-size: 14px;
+          vertical-align: top; 
+      }
+
+      /* -------------------------------------
+          BODY & CONTAINER
+      ------------------------------------- */
+
+      .body {
+        background-color: #f6f6f6;
+        width: 100%; 
+      }
+
+      /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+      .container {
+        display: block;
+        margin: 0 auto !important;
+        /* makes it centered */
+        max-width: 580px;
+        padding: 10px;
+        width: 580px; 
+      }
+
+      /* This should also be a block element, so that it will fill 100% of the .container */
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        max-width: 580px;
+        padding: 10px; 
+      }
+
+      /* -------------------------------------
+          HEADER, FOOTER, MAIN
+      ------------------------------------- */
+      .main {
+        background: #ffffff;
+        border-radius: 3px;
+        width: 100%; 
+      }
+
+      .wrapper {
+        box-sizing: border-box;
+        padding: 20px; 
+      }
+
+      .content-block {
+        padding-bottom: 10px;
+        padding-top: 10px;
+      }
+
+      .footer {
+        clear: both;
+        margin-top: 10px;
+        text-align: center;
+        width: 100%; 
+      }
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+          color: #999999;
+          font-size: 12px;
+          text-align: center; 
+      }
+
+      /* -------------------------------------
+          TYPOGRAPHY
+      ------------------------------------- */
+      h1,
+      h2,
+      h3,
+      h4 {
+        color: #000000;
+        font-family: sans-serif;
+        font-weight: bold;
+        line-height: 1.4;
+        margin: 0;
+        margin-bottom: 0; 
+      }
+
+      h1 {
+        font-size: 35px;
+        font-weight: 300;
+        text-align: center;
+        text-transform: capitalize; 
+      }
+
+      p,
+      ul,
+      ol {
+        font-family: sans-serif;
+        font-size: 14px;
+        font-weight: normal;
+        margin: 0;
+        margin-bottom: 15px; 
+      }
+        p li,
+        ul li,
+        ol li {
+          list-style-position: inside;
+          margin-left: 5px; 
+      }
+
+      a {
+        color: #3498db;
+        text-decoration: underline; 
+      }
+
+      /* -------------------------------------
+          BUTTONS
+      ------------------------------------- */
+      .btn {
+        box-sizing: border-box;
+        width: 100%;
+        
+      }
+        .btn > tbody > tr > td {
+          padding-bottom: 15px; }
+        .btn table {
+          width: auto; 
+      }
+        .btn table td {
+          background-color: #ffffff;
+          border-radius: 5px;
+          text-align: center; 
+      }
+        .btn a {
+          background-color: #ffffff;
+          border: solid 1px #3498db;
+          border-radius: 5px;
+          box-sizing: border-box;
+          color: #3498db;
+          cursor: pointer;
+          display: inline-block;
+          font-size: 14px;
+          font-weight: bold;
+          margin: 0;
+          padding: 12px 25px;
+          text-decoration: none;
+          text-transform: capitalize; 
+      }
+
+      .btn-primary table td {
+        background-color: #2d95fd; 
+      }
+
+      .btn-primary a {
+        background-color: #1968F0;
+        border-color: #1968F0;
+        color: #ffffff; 
+      }
+
+      /* -------------------------------------
+          OTHER STYLES THAT MIGHT BE USEFUL
+      ------------------------------------- */
+      .last {
+        margin-bottom: 0; 
+      }
+
+      .first {
+        margin-top: 0; 
+      }
+
+      .align-center {
+        text-align: center; 
+      }
+
+      .align-right {
+        text-align: right; 
+      }
+
+      .align-left {
+        text-align: left; 
+      }
+
+      .clear {
+        clear: both; 
+      }
+
+      .mt0 {
+        margin-top: 0; 
+      }
+
+      .mb0 {
+        margin-bottom: 0; 
+      }
+      
+      .mb4{
+        margin-bottom: 4rem;
+      }
+
+      .preheader {
+        color: transparent;
+        display: none;
+        height: 0;
+        max-height: 0;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        mso-hide: all;
+        visibility: hidden;
+        width: 0; 
+      }
+
+      .powered-by a {
+        text-decoration: none; 
+      }
+
+      hr {
+        border: 0;
+        border-bottom: 1px solid #f6f6f6;
+        margin: 20px 0; 
+      }
+
+      /* -------------------------------------
+          RESPONSIVE AND MOBILE FRIENDLY STYLES
+      ------------------------------------- */
+      @media only screen and (max-width: 620px) {
+        table[class=body] h1 {
+          font-size: 28px !important;
+          margin-bottom: 10px !important; 
+        }
+        table[class=body] p,
+        table[class=body] ul,
+        table[class=body] ol,
+        table[class=body] td,
+        table[class=body] span,
+        table[class=body] a {
+          font-size: 16px !important; 
+        }
+        table[class=body] .wrapper,
+        table[class=body] .article {
+          padding: 10px !important; 
+        }
+        table[class=body] .content {
+          padding: 0 !important; 
+        }
+        table[class=body] .container {
+          padding: 0 !important;
+          width: 100% !important; 
+        }
+        table[class=body] .main {
+          border-left-width: 0 !important;
+          border-radius: 0 !important;
+          border-right-width: 0 !important; 
+        }
+        table[class=body] .btn table {
+          width: 100% !important; 
+        }
+        table[class=body] .btn a {
+          width: 100% !important; 
+        }
+        table[class=body] .img-responsive {
+          height: auto !important;
+          max-width: 100% !important;
+          width: auto !important; 
+        }
+      }
+      
+      
+
+      /* -------------------------------------
+          PRESERVE THESE STYLES IN THE HEAD
+      ------------------------------------- */
+      @media all {
+        .ExternalClass {
+          width: 100%; 
+        }
+        .ExternalClass,
+        .ExternalClass p,
+        .ExternalClass span,
+        .ExternalClass font,
+        .ExternalClass td,
+        .ExternalClass div {
+          line-height: 100%; 
+        }
+        .apple-link a {
+          color: inherit !important;
+          font-family: inherit !important;
+          font-size: inherit !important;
+          font-weight: inherit !important;
+          line-height: inherit !important;
+          text-decoration: none !important; 
+        }
+        #MessageViewBody a {
+          color: inherit;
+          text-decoration: none;
+          font-size: inherit;
+          font-family: inherit;
+          font-weight: inherit;
+          line-height: inherit;
+        }
+        .btn-primary table td:hover {
+          background-color: #004dd0 !important; 
+        }
+        .btn-primary a:hover {
+          background-color: #004dd0 !important;
+          border-color: #004dd0 !important; 
+        } 
+      }
+      
+    
+      [data-icon="bigcapital"] path {
+        fill: #004dd0;
+      }
+
+      [data-icon='bigcapital'] .path-1,
+      [data-icon='bigcapital'] .path-13 {
+        fill: #2d95fd;
+      }
+    </style>
+  </head>
+  <body class="">
+    <span class="preheader">Verify your email.</span>
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
+      <tr>
+        <td>&nbsp;</td>
+        <td class="container">
+          <div class="content">
+
+            <!-- START CENTERED WHITE CONTAINER -->
+            <table role="presentation" class="main">
+              <!-- START MAIN CONTENT AREA -->
+              <tr>
+                <td class="wrapper">
+                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                    <tr>
+                      <td>
+                        <p class="align-center">
+                          <img src="cid:bigcapital_logo" />
+                        </p>
+                        <hr />
+                        
+                        <p class="align-center">
+                          <h2>Verify your email</h2>
+                        </p>
+                        <p class="mgb-1x">Hi <strong>{{ fullName }}<strong>,</p>
+                        <p class="mgb-2-5x">To continue setting up your Bigcapital account, please verify that this is your email address.</p>
+                        
+                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
+                          <tbody>
+                            <tr>
+                              <td align="left">
+                                <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                                  <tbody>
+                                    <tr>
+                                      <td> <a href="{{ verifyUrl }}" target="_blank">Verify email address</a> </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                        <p>If this was a mistake, just ignore this email and nothing will happen.</p>
+                        <p class="email-note">This is an automatically generated email please do not reply to this email.</p>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+
+            <!-- END MAIN CONTENT AREA -->
+            </table>
+            <!-- END CENTERED WHITE CONTAINER -->
+
+            <!-- START FOOTER -->
+            <div class="footer">
+              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td class="content-block powered-by">
+                    Powered by <a href="https://Bigcapital.ly">Bigcapital.ly</a>.
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <!-- END FOOTER -->
+
+          </div>
+        </td>
+        <td>&nbsp;</td>
+      </tr>
+    </table>
+  </body>
+</html>