client-ui/source/account-creation/account-creation-view.html

Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront

<div ng-init="_ctrl = accountCreationController;
        _ctrl.init()">
    <div class="col-sm-4 hidden-sm hidden-xs">
      <div class="col-xs-10">
        <img src="images/account-creation.svg" alt="account-creation-rocket">
        </div>
    </div>
    <div class="col-md-8">
      <div class="row">
        <h3 class="no-space">Explore Your Options in One Click</h3>
      </div>
        <div class="row">
          <br>
                    <form name="_ctrl.acform"
                          xt-form 
                          role="form"
                          focus-error="true"
                          ng-submit="_ctrl.formSubmit()"
                          class="form-horizontal"
                          novalidate
                          strategy="accountCreationStrategy">
                        <div class="form-group"
                             ng-show="_ctrl.acform.loanPurpose.$dirty || _ctrl.acform.loanPurpose.$invalid"
                             ng-class="{'has-error': _ctrl.acform.loanPurpose.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="loanPurpose">Loan Purpose</label>
                            <div class="col-md-12">
                                <select id="loanPurpose"
                                        name="loanPurpose"
                                        class="form-control"
                                        placeholder="Loan Purpose"
                                        ng-model="_ctrl.userInput.loan.loanPurpose"
                                        required
                                        xt-validation-tooltip
                                        msg-required="Please select loan purpose">
                                    <option value="" selected="" disabled="">What is the loan for?</option>
                                    <option ng-repeat="(key, value) in config.loanTypes" value="{{key}}">{{value}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group"
                             ng-show="_ctrl.acform.requestedAmount.$dirty || _ctrl.acform.requestedAmount.$invalid || _ctrl.loggedIn"
                             ng-class="{'has-error': _ctrl.acform.requestedAmount.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="requestedAmount">Amount</label>
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-dollar fa-lg padded-icon"></i></span>
                                    <input class="form-control"
                                           id="requestedAmount"
                                           name="requestedAmount"
                                           placeholder="{{config.loanMin}} - {{config.loanMax}}"
                                           ng-model="_ctrl.userInput.loan.requestedAmount"
                                           type="number"
                                           required
                                           ng-min="config.loanMin"
                                           ng-max="config.loanMax"
                                           xt-validation-tooltip
                                           msg-required="Please enter a loan amount">
                                </div>
                            </div>
                        </div>
                        <!-- <div class="form-group"
                             ng-show="_ctrl.acform.promoCode.$dirty || _ctrl.acform.promoCode.$invalid || _ctrl.loggedIn" ng-class="{'has-error': _ctrl.acform.promoCode.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="promoCode">Promo Code</label>
                            <div class="col-md-12">
                                <input class="form-control"
                                       id="promoCode"
                                       name="promoCode"
                                       placeholder="Promo Code"
                                       ng-model="_ctrl.userInput.loan.promoCode"
                                       type="text"
                                       required
                                       xt-validation-tooltip
                                       msg-required="Please a promo code">
                            </div>
                        </div> -->
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.firstName.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="firstName">First Name</label>
                            <div class="col-md-12">
                                <input type="text"
                                       autofocus
                                       ng-model="_ctrl.userInput.client.personalInformation.firstName"
                                       class="form-control"
                                       id="firstName"
                                       name="firstName"
                                       placeholder="First Name"
                                       minlength="2"
                                       ng-pattern="_ctrl.patterns.name"
                                       required
                                       xt-validation-tooltip
                                       msg-minlength="Needs to be at least 2 characters long"
                                       msg-required="Please enter first name"
                                       msg-pattern="Please remove any numbers or special characters"
                                       ng-disabled="_ctrl.loggedIn">
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.lastName.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="lastName">Last Name</label>
                            <div class="col-md-12">
                                <input type="text"
                                       ng-model="_ctrl.userInput.client.personalInformation.lastName"
                                       class="form-control"
                                       id="lastName"
                                       name="lastName"
                                       placeholder="Last Name"
                                       ng-pattern="_ctrl.patterns.name"
                                       minlength="2"
                                       required
                                       xt-validation-tooltip
                                       msg-minlength="Needs to be at least 2 characters long"
                                       msg-required="Last name required"
                                       msg-pattern="Please remove any numbers or special characters"
                                       ng-disabled="_ctrl.loggedIn">
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.streetAddress.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="streetAddress">Street Address</label>
                            <div class="col-md-12">
                                <input type="text"
                                       ng-model="_ctrl.userInput.client.personalInformation.streetAddress"
                                       class="form-control"
                                       id="streetAddress"
                                       name="streetAddress"
                                       placeholder="Street Address"
                                       required
                                       xt-validation-tooltip
                                       ng-maxlength="60"
                                       ng-pattern="_ctrl.patterns.address"
                                       msg-pattern="Allowed characters are alphanumeric, period(.), comma(,), pound sign(#), hyphen(-) and slash(/)"
                                       msg-required="Address is required"
                                       msg-maxlength="No more than 60 characters are allowed">
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.city.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="city">City</label>
                            <div class="col-md-12">
                                <input type="text"
                                       ng-model="_ctrl.userInput.client.personalInformation.city"
                                       class="form-control"
                                       id="city"
                                       name="city"
                                       placeholder="City"
                                       ng-pattern="_ctrl.patterns.city"
                                       ng-maxlength="25"
                                       required
                                       xt-validation-tooltip
                                       msg-required="Please enter city"
                                       msg-pattern="Allowed characters are alphanumeric, hyphen(-), apostrophe('), and period(.)"
                                       msg-maxlength="No more than 25 characters are allowed">
                            </div>
                        </div>
                        <!--State and zip-->
                        <div class="form-group">
                            <label class="hidden-xs hidden-sm col-md-4" for="state">State</label>
                            <label class="hidden-xs hidden-sm col-md-8" for="zip">ZIP</label>
                            <div class="col-md-12 col-xs-12">
                                <div class="row">
                                    <div class="col-xs-4" ng-class="{'has-error': _ctrl.acform.state.$invalid && _ctrl.acform.$submitted}">
                                        <label class="hidden-md hidden-lg control-label" for="state">State</label>
                                        <select name="state"
                                                id="state"
                                                class="form-control"
                                                ng-model="_ctrl.userInput.client.personalInformation.state"
                                                ng-options="state for state in config.states"
                                                required
                                                xt-validation-tooltip
                                                msg-required="Please enter state"
                                                ng-disabled="_ctrl.loggedIn">
                                            <option value="" selected="" disabled="">Select</option>
                                        </select>
                                    </div>
                                    <div class="col-xs-8" ng-class="{'has-error': _ctrl.acform.zip.$invalid && _ctrl.acform.$submitted}">
                                        <label class="hidden-md hidden-lg control-label" for="zip">ZIP</label>
                                        <div class="col-md-12">
                                            <div class="row">
                                                <input valid-zip
                                                       type="text"
                                                       ng-model="_ctrl.userInput.client.personalInformation.zip"
                                                       class="form-control"
                                                       id="zip"
                                                       name="zip"
                                                       placeholder="ZIP Code"
                                                       required
                                                       xt-validation-tooltip
                                                       msg-validzip="Please enter a valid 5 digit US ZIP code."
                                                       msg-required="Please enter zip">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.homeOwnership.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="homeOwnership">Home Ownership</label>
                            <div class="col-md-12">
                                <select name="homeOwnership"
                                        id="homeOwnership"
                                        class="form-control"
                                        ng-model="_ctrl.userInput.loan.homeOwnership"
                                        required
                                        xt-validation-tooltip
                                        msg-required="Please enter type of home ownership">
                                    <option value="" selected="" disabled="">Select</option>
                                    <option ng-repeat="(key, value) in config.homes" value="{{key}}">{{value}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.employmentStatus.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="employmentStatus">Employment Status</label>
                            <div class="col-md-12">
                                <select name="employmentStatus"
                                        id="employmentStatus"
                                        class="form-control"
                                        ng-model="_ctrl.userInput.loan.incomeSummary.stated.employmentStatus"
                                        required
                                        xt-validation-tooltip
                                        msg-required="Please enter employment Status"
                                        ng-options="empStatus.len as empStatus.display for empStatus in config.empStatus">
                                    <option value="" selected="" disabled="">Select</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.statedIncome.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="statedIncome">Gross annual income</label>
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-dollar fa-lg padded-icon"></i></span>
                                    <input type="number"
                                           ng-model="_ctrl.userInput.loan.incomeSummary.stated.annualAmount"
                                           class="form-control"
                                           id="statedIncome"
                                           name="statedIncome"
                                           placeholder="Your Annual Gross Income"
                                           required
                                           min="24000"
                                           xt-validation-tooltip
                                           msg-min="Income must be at least 24000 to receive a loan."
                                           msg-required="Income is required">                   
                                </div>
                                <p class="subtext"><i class="fa fa-info-circle"></i> Alimony, child support, or separate maintenance income need not be revealed if you do not wish to have it considered as a basis for repaying this obligation. Gross annual income is before taxes, deductions and garnishments, etc.</p>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.birthdate.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="birthdate">Date of Birth</label>
                            <div class="col-md-12">
                                <input type="text"
                                       ng-model="_ctrl.userInput.client.personalInformation.birthdate"
                                       dob
                                       state="_ctrl.userInput.client.personalInformation.state"
                                       maxlength="10"
                                       class="form-control"
                                       id="birthdate"
                                       name="birthdate"
                                       placeholder="MM/DD/YYYY"
                                       required
                                       msg-birthdate="Please use MM/DD/YYYY format, and a birthdate of {{config.getAgeMinimumByState(_ctrl.userInput.client.personalInformation.state)}} or older"
                                       msg-required="Please enter your date of birth"
                                       xt-validation-tooltip
                                       ng-disabled="_ctrl.loggedIn">
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.phone.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="phone">Phone Number</label>
                            <div class="col-md-12">
                                <input type="text"
                                       ng-model="_ctrl.userInput.client.personalInformation.phone"
                                       phone-number
                                       maxlength="13"
                                       class="form-control"
                                       id="phone"
                                       name="phone"
                                       placeholder="Phone Number"
                                       required
                                       msg-phonenumber="Please enter a valid phone number"
                                       msg-required="Please enter your mobile phone number"
                                       xt-validation-tooltip>
                                <p class="subtext"><i class="fa fa-info-circle"></i> Please review the Communication Consent below about our use of your phone number and email address.</p>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.socialSecurity.$invalid && _ctrl.acform.$submitted}" ng-show="!_ctrl.loggedIn">
                            <label class="col-md-12" for="socialSecurity">Social Security Number</label>
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon primary-tooltip"
                                          data-toggle="tooltip"
                                          title="Providing your SSN will help us provide an accurate quote. Please enter in the following format: XXX-XX-XXX"><i class="fa fa-question fa-lg padded-icon"></i></span>
                                    <input type="text"
                                           ng-model="_ctrl.userInput.client.personalInformation.socialSecurity"
                                           ssn
                                           maxlength="11"
                                           class="form-control"
                                           id="socialSecurity"
                                           name="socialSecurity"
                                           placeholder="{{_ctrl.loggedIn?'•••-••-••••':'Social Security Number'}}"
                                           ng-required="!_ctrl.loggedIn"
                                           msg-required="SSN is required"
                                           msg-isssn="SSN must be in the following format: XXX-XX-XXX"
                                           xt-validation-tooltip
                                           ng-disabled="_ctrl.loggedIn">
                                </div>
                                <p class="subtext"><i class="fa fa-lock"></i> We use 128-bit SSL protection and strict, high levels of security & encryption standards to keep your information safe.</p>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.email.$invalid && _ctrl.acform.$submitted}">
                            <label class="col-md-12" for="email">Email Address</label>
                            <div class="col-md-12">
                                <input type="email"
                                       ng-model="_ctrl.userInput.client.email"
                                       class="form-control"
                                       id="email"
                                       name="email"
                                       placeholder="Email Address"
                                       required
                                       xt-validation-tooltip
                                       msg-required="Email address is required"
                                       ng-disabled="_ctrl.loggedIn">
                            </div>
                        </div>
                        <div class="form-group" ng-class="{'has-error': _ctrl.acform.password.$invalid && _ctrl.acform.$submitted}" ng-if="!_ctrl.loggedIn">
                            <label class="col-md-12" for="password">Password</label>
                            <div class="col-md-12">
                                <input is-strong
                                       score="_ctrl.score"
                                       min-score="2"
                                       type="password"
                                       ng-model="_ctrl.userInput.client.password"
                                       level="_ctrl.strwk"
                                       class="form-control"
                                       id="password"
                                       name="password"
                                       placeholder="Password"
                                       required
                                       maxlength="32"
                                       xt-validation-tooltip
                                       data-placement="top"
                                       msg-isstrong="Must be at least average strength"
                                       msg-required="Password is required">
                            </div>
                        </div>
                        <div class="form-group password-strength" ng-if="!_ctrl.loggedIn">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-xs-8">
                                        <div class="progress">
                                            <div class="progress-bar" ng-class="_ctrl.color" role="progressbar" ng-style="{width : _ctrl.score.toString() + '%'}">
                                                <span>{{_ctrl.strwk}}</span>
                                            </div>
                                        </div>
                                        <p class="subtext"><i class="fa fa-info-circle"></i> Your password must be Average Strength or greater.</p>
                                    </div>
                                    <label class="col-xs-4">
                                        Password Strength
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" ng-if="!_ctrl.loggedIn">
                            <div class="col-xs-12" ng-class="{'has-error': _ctrl.acform.disclosures.$invalid && _ctrl.acform.$submitted}">
                                <label class="checkbox-label">
                                    <input type="checkbox" name="disclosures" id="disclosures" data-toggle="checkbox" ng-model="_ctrl.disclosures" required xt-validation-tooltip /> By checking this box you are indicating that you have read, consent to, and affix your electronic signature to the following five documents:
                                </label>
                                <ul>
                                    <li type="circle">
                                        <a class="modal-link" href="" src="_ctrl.requiredDisclosures['e-consent'].location.pdf" title="{{_ctrl.requiredDisclosures['e-consent'].title}}" modal-link>
                                        </a>
                                    </li>
                                    <li type="circle">
                                        <a class="modal-link" href="" src="_ctrl.requiredDisclosures['bank-privacy-notice'].location.pdf" title="{{_ctrl.requiredDisclosures['bank-privacy-notice'].title}}" modal-link>
                                        </a>,
                                        <a class="modal-link" href="" src="_ctrl.requiredDisclosures['credit-pull-authorization'].location.pdf" title="{{_ctrl.requiredDisclosures['credit-pull-authorization'].title}}" modal-link>
                                        </a>,
                                        <a class="modal-link" href="" src="_ctrl.requiredDisclosures['our-privacy-notice'].location.pdf" title="{{_ctrl.requiredDisclosures['our-privacy-notice'].title}}" modal-link>
                                        </a> and
                                        <a class="modal-link" href="" src="_ctrl.requiredDisclosures['our-terms-of-use'].location.pdf" title="{{_ctrl.requiredDisclosures['our-terms-of-use'].title}}" modal-link>
                                        </a>
                                    </li>
                                    <!--  <span ng-repeat="doc in _ctrl.requiredDisclosures">
                                <span ng-show="$last"> and </span>
                                <a class="modal-link" href=""
                                   src="doc.location.pdf"
                                   title="{{doc.title}}"
                                   modal-link>
                                </a><span ng-hide="$last">,</span>
                                <span ng-hide="!$first"><br></span>
                            </span> -->
                                </ul>
                            </div>
                        </div>
                        <div class="form-group" ng-if="!_ctrl.loggedIn">
                            <div class="col-xs-12">
                                <div recaptcha></div>
                            </div>
                        </div>
                        <div class="form-group"  ng-if="_ctrl.errorMessage">
                            <div class="col-xs-12">
                                <div class="alert alert-danger">
                                    <strong ng-bind="_ctrl.errorMessage"></strong>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" ng-if="_ctrl.errorCode">
                            <div class="col-xs-12">
                                <div class="alert alert-danger">
                                    <strong ng-switch on="_ctrl.errorCode">
                                        <span ng-switch-when="ALREADY_EXISTS">
                                            It appears you already have an account with us. Click <a ui-sref="login">here</a> to sign in or call us at <a href="tel://{{globalConfig.company.phone.dash}}">{{globalConfig.company.phone.long}}</a>
                                        </span>
                                    </strong>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                              <button type="submit" ladda="_ctrl.working" class="btn btn-success btn-lg large-btn ladda-button large-block-btn" data-style="zoom-in">
                                  Explore Your Options
                                  <span><i class="fa fa-rocket"></i></span>
                              </button>
                              <br/>
                              <small class="text-success">
                                  Checking your rate won't affect your credit score.
                              </small>
                            </div>
                        </div>
                    </form>
        </div>
    </div>
    <div class="col-md-12 disclamer">
        <div class="row">
            <p>California Residents: Married applicants may apply for a separate account.</p>
        </div>
        <div class="row">
            <p>
                Ohio Residents: All loans to Ohio resident must be greater than $5,001. The Ohio laws against discrimination require that all creditors make credit equally available to all credit worthy customers, and that credit reporting agencies maintain separate credit histories on each individual upon request. The Ohio Civil Rights Commission administers compliance with this law.
            </p>
        </div>
        <div class="row">
            <p><strong>Communication Consent:</strong>
                <br> By submitting your contact information you agree to our Terms of Use and our Privacy Policy. You also expressly consent to having us, our affiliates, and potentially our partners contact you about your inquiry by text message or phone (including automatic telephone dialing system or an artificial or pre-recorded voice) to the residential or cellular telephone number you have provided, even if that telephone number is on a corporate, state, or national Do Not Call Registry. You do not have to agree to receive such calls or messages as a condition of getting any services from RocketLoans or its affiliates. You acknowledge that you provided us your cellular number and you provided your cellular number during a transaction that if consummated will result in you owing a debt to Cross River Bank, a New Jersey-state chartered bank. You also consent to us contacting you through the email address you have provided us. If you want to opt out of receiving marketing information by email, telephone, text message, and/or mail, please email <a href="mailto:{{globalConfig.company.email.support}}?Subject=Talk%20to%20Us" target="_top">{{globalConfig.company.email.support}}</a> with the subject "Opt Out" or call <a href="tel://{{globalConfig.company.phone.dash}}">{{globalConfig.company.phone.long}}</a>.
                <br/>
            </p>
            <p><strong>IMPORTANT INFORMATION ABOUT OPENING A NEW ACCOUNT</strong>
                <br> To help the government fight the funding of terrorism and money laundering activities, Federal law requires all financial institutions to obtain, verify, and record information that identifies each person who opens an account. As a result, under our customer identification program, we must ask for your name, street address, mailing address, date of birth, and other information that will allow us to identify you. We may also ask to see your driver’s license or other identifying documents.
            </p>
        </div>
    </div>
    <loading header="T-minus"></loading>
</div>