client-ui
Version:
Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront
493 lines • 27.7 kB
HTML
<div class="container-fluid" ng-init="_ctrl = myProfileController;
_ctrl.init()" class="text-justify">
<h2 class="text-center">My Account Profile</h2>
<div class="row panel-empty">
<!--/////////////////////
///Personal Info Start///
//////////////////////-->
<div class="row">
<div class="col-xs-12" style="margin-bottom:20px">
<div class="box-border-top box-border-sides box-border-bottom">
<div class="collapse-header">
<h4>My Personal Info</h4>
</div>
<!--display mode start-->
<div class="collapse-body" ng-hide="_ctrl.editPersonalInfo" >
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Name</label>
<br>
<h5 ng-bind="_ctrl.user.personalInformation.firstName + ' ' +_ctrl.user.personalInformation.lastName"></h5>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Birthdate</label>
<br>
<h5 class="form-control-static">
{{_ctrl.user.personalInformation.birthdate| date:'MM/dd/yyyy'}}
</h5>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<br>
<h5 ng-bind="_ctrl.user.personalInformation.streetAddress"></h5>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>City</label>
<br>
<h5 ng-bind="_ctrl.user.personalInformation.city"></h5>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Zip</label>
<br>
<h5 ng-bind="_ctrl.user.personalInformation.zip"></h5>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>State</label>
<br>
<h5 ng-bind="_ctrl.user.personalInformation.state"></h5>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Phone</label>
<br>
<h5 ng-bind="_ctrl.user.personalInformation.phone | phnFilter"></h5>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pull-right hidden-xs">
<button class="btn btn-warning btn-lg" ng-hide="_ctrl.editPersonalInfo" ng-click="_ctrl.editPersonalInfo = true;" style="width:100%;font-size: 16px;">Edit Personal Info</button>
</div>
<div class="col-md-12 hidden-lg hidden-md hidden-sm">
<button class="btn btn-warning btn-lg" ng-hide="_ctrl.editPersonalInfo" ng-click="_ctrl.editPersonalInfo = true;" style="width:100%;font-size: 16px;">Edit Personal Info</button>
</div>
</div>
</div>
<!-- edit mode start -->
<!--edit mode-->
<div class="collapse-body" ng-show="_ctrl.editPersonalInfo">
<div class="row">
<div class="col-xs-12" style="margin-top:10px">
<form name="_ctrl.personalInfoForm"
class="form-horizontal"
role="form"
focus-error="true"
xt-form ng-submit="_ctrl.savePersonalInfo()"
novalidate>
<div class="form-group" ng-class="{'has-error': _ctrl.personalInfoForm.firstName.$invalid && _ctrl.personalInfoForm.$submitted}">
<label class="col-sm-6">First Name</label>
<div class="col-sm-6">
<input type="text"
class="form-control"
autofocus
required
name="firstName"
ng-minlength="2"
ng-maxlength="30"
ng-model="_ctrl.user.personalInformation.firstName"
xt-validation-tooltip
msg-required="Please enter first name"
ng-disabled="true" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.personalInfoForm.lastName.$invalid && _ctrl.personalInfoForm.$submitted}">
<label class="col-sm-6">Last Name</label>
<div class="col-sm-6">
<input type="text"
class="form-control"
required
name="lastName"
ng-minlength="2"
ng-maxlength="30"
ng-model="_ctrl.user.personalInformation.lastName"
xt-validation-tooltip
msg-required="Please enter last name"
ng-disabled="true" />
</div>
</div>
<div class="form-group">
<label class="col-sm-6">Birthdate</label>
<div class="col-sm-6">
<input type="text"
ng-model="_ctrl.user.personalInformation.birthdate"
dob
state="_ctrl.user.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.user.personalInformation.state)}} or older"
msg-required="Please enter your date of birth"
xt-validation-tooltip
ng-disabled="true" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.personalInfoForm.streetAddress.$invalid && _ctrl.personalInfoForm.$submitted}">
<label class="col-sm-6">Address</label>
<div class="col-sm-6">
<input type="text"
class="form-control"
required
name="streetAddress"
ng-model="_ctrl.user.personalInformation.streetAddress"
xt-validation-tooltip
msg-required="Please enter address"
ng-disabled="!(_ctrl.newLoan || _ctrl.postClose)" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.personalInfoForm.city.$invalid && _ctrl.personalInfoForm.$submitted}">
<label class="col-sm-6">City</label>
<div class="col-sm-6">
<input type="text"
class="form-control"
required
name="city"
ng-minlength="2"
ng-maxlength="30"
ng-model="_ctrl.user.personalInformation.city"
xt-validation-tooltip
msg-required="Please enter City"
ng-disabled="!(_ctrl.newLoan || _ctrl.postClose)" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.personalInfoForm.zip.$invalid && _ctrl.personalInfoForm.$submitted}">
<label class="col-sm-6">Zip</label>
<div class="col-sm-6">
<input valid-zip
type="text"
class="form-control"
required
name="zip"
ng-minlength="5"
ng-maxlength="5"
ng-model="_ctrl.user.personalInformation.zip"
xt-validation-tooltip
msg-required="Please enter zip"
msg-validzip="Please enter a valid 5 digit US ZIP code."
ng-disabled="!(_ctrl.newLoan || _ctrl.postClose)" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.personalInfoForm.state.$invalid && _ctrl.personalInfoForm.$submitted}">
<label class="col-sm-6">State</label>
<div class="col-sm-6">
<select name="state"
id="state"
class="form-control"
ng-model="_ctrl.user.personalInformation.state"
ng-options="state for state in config.states"
xt-validation-tooltip
required
msg-required="Please enter state"
ng-disabled="!_ctrl.postClose">
<option value="" selected="" disabled="">Select</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.personalInfoForm.phone.$invalid && _ctrl.personalInfoForm.$submitted}">
<label class="col-sm-6">Phone</label>
<div class="col-sm-6">
<input type="text"
class="form-control"
required
name="phone"
maxlength="13"
ng-model="_ctrl.user.personalInformation.phone"
phone-number
xt-validation-tooltip
msg-phonenumber="Please enter a valid phone number"
msg-required="Please enter your phone number" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="col-xs-12 col-md-10 col-md-offset-1">
<div class="alert alert-danger no-bottom-margin" ng-show="_ctrl.invalidPersonalInfoMessage">
{{_ctrl.invalidPersonalInfoMessage}}
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<a class="btn btn-default btn-md" ng-click="_ctrl.editPersonalInfo = false"> Cancel
</a>
<button class="btn btn-md btn-success" type="submit" ladda="_ctrl.workingPersonalInfo" data-style="expand-left"> Save
</button>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<div class="alert alert-warning" ng-if="_ctrl.disableField">
Your loan is currently in progress and are limited to what you can update.
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--/////////////////////
///Personal Info End///
//////////////////////-->
<!-- </div> -->
<!-- Display Mode end -->
</div>
<!--//////////////////
///Login Info Start///
//////////////////////-->
<div class="row">
<div class="col-md-12">
<div id="emailSection" class="box-border-sides box-border-top box-border-bottom" style="margin-bottom:20px">
<!-- display mode start-->
<div class="collapse-header">
<h4>My Login Information</h4>
</div>
<div class="collapse-body" ng-hide="_ctrl.editEmail" ng-show="!_ctrl.editPassword" >
<div class="row">
<div class="col-xs-4">
<label>Email </label>
</div>
<div class="col-xs-4 col-xs-offset-4 hidden-xs">
<a class="btn btn-warning btn-lg center-block" ng-click="_ctrl.editEmail = true;">Edit Email</a>
</div>
<div class="col-xs-12">
<h5 ng-bind="_ctrl.user.email"></h5>
</div>
<div class="col-xs-12 hidden-lg hidden-md hidden-sm">
<a class="btn btn-warning btn-lg center-block " ng-click="_ctrl.editEmail = true;">Edit Email</a>
</div>
</div>
<div class="row" ng-show="_ctrl.emailChanged">
<br>
<div class="col-xs-12 col-md-10 col-md-offset-1">
<div class="alert alert-warning">
Your email has been updated! This email will be your login username from this point on.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label>Password </label>
</div>
<div class="col-xs-4 col-xs-offset-4 hidden-xs">
<a class="btn btn-warning btn-lg center-block" ng-click="_ctrl.editPassword = true;">Edit Password</a>
</div>
<div class="col-xs-12">
<h5 class="form-control-static"> ********** </h5>
</div>
<div class="col-xs-12 hidden-lg hidden-md hidden-sm">
<a class="btn btn-warning btn-lg center-block" ng-click="_ctrl.editPassword = true;">Edit Password</a>
</div>
</div>
</div>
<!-- display mode end -->
<!-- edit mode start -->
<div class="collapse-body" ng-show="_ctrl.editEmail">
<form name="_ctrl.emailUpdateForm"
xt-form
class="form-horizontal"
ng-submit="_ctrl.saveEmail()"
novalidate
role="form"
focus-error="true">
<div class="form-group" ng-class="{'has-error': _ctrl.emailUpdateForm.email.$invalid && _ctrl.emailUpdateForm.$submitted}">
<label class="col-sm-6">Email </label>
<div class="col-sm-6">
<input type="email"
class="form-control"
autofocus
name="email"
required
ng-model="_ctrl.user.email"
xt-validation-tooltip
msg-required="Please enter email"
msg-email="Invalid email" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.emailUpdateForm.verifyEmail.$invalid && _ctrl.emailUpdateForm.$submitted}">
<label class="col-sm-6">Verify Email</label>
<div class="col-sm-6">
<input type="email"
class="form-control"
name="verifyEmail"
required
ng-model="_ctrl.user.verifyEmail"
xt-validation-tooltip
msg-required="Please re enter email"
msg-email="Invalid email" />
</div>
</div>
<br>
<div class="form-group" ng-show="_ctrl.invalidEmailMessage">
<div class="col-xs-12 col-md-10 col-md-offset-1">
<div class="alert alert-danger no-bottom-margin">
{{_ctrl.invalidEmailMessage}}
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<a class="btn btn-default btn-md" ng-click="_ctrl.editEmail = false"> Cancel
</a>
<button class="btn btn-md btn-success" type="submit" ladda="_ctrl.workingEmail" data-style="expand-left"> Save
</button>
</div>
</div>
</form>
</div>
<div class="collapse-body" ng-show="_ctrl.editPassword">
<form name="_ctrl.passwordUpdateForm"
xt-form class="form-horizontal"
ng-submit="_ctrl.savePassword()"
novalidate
role="form"
focus-error="true">
<div class="form-group" ng-class="{'has-error': _ctrl.passwordUpdateForm.oldPass.$invalid && _ctrl.passwordUpdateForm.$submitted}">
<label class="col-sm-6">Old Password</label>
<div class="col-sm-6">
<input type="password"
class="form-control"
placeholder="**********"
autofocus
required
name="oldPass"
ng-model="_ctrl.passwordUpdateForm.oldPassword"
xt-validation-tooltip
msg-required="Please enter old password" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.passwordUpdateForm.newPass.$invalid && _ctrl.passwordUpdateForm.$submitted}">
<label class="col-sm-6">New Password</label>
<div class="col-sm-6">
<input type="password"
class="form-control"
placeholder="**********"
autofocus
required
name="newPass"
ng-model="_ctrl.passwordUpdateForm.newPassword"
xt-validation-tooltip
msg-required="Please enter new password" />
</div>
</div>
<div class="form-group" ng-class="{'has-error': _ctrl.passwordUpdateForm.verifyPass.$invalid && _ctrl.passwordUpdateForm.$submitted}">
<label class="col-sm-6">Verify Password</label>
<div class="col-sm-6">
<input type="password"
name="verifyPass"
class="form-control"
placeholder="**********"
required
ng-model="_ctrl.passwordUpdateForm.verifyPassword"
xt-validation-tooltip
msg-required="Please verify new password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-md-10 col-md-offset-1">
<div class="alert alert-danger no-bottom-margin" ng-show="_ctrl.invalidPasswordMessage">
{{_ctrl.invalidPasswordMessage}}
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<a class="btn btn-default btn-md" ng-click="_ctrl.editPassword = false"> Cancel
</a>
<button type="submit" class="btn btn-md btn-success" ladda="_ctrl.workingPassword" data-style="expand-left"> Save
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--//////////////////
///Login Info end///
//////////////////////-->
<!--/////////////////////
////////Banks Start////////
//////////////////////-->
<div class="row">
<div class="col-md-12">
<div class="panel-empty" style="margin-bottom:20px">
<div class="box-border-sides box-border-top box-border-bottom">
<div class="collapse-header">
<h4>My Bank Information</h4>
</div>
<div id="collapseBankInfo" class="collapse-body">
<!--servicing account does not exist start-->
<div class="alert alert-warning" ng-if="!_ctrl.servicingAccount">
No account on file
</div>
<!--servicing account exists start-->
<div ng-if="_ctrl.servicingAccount">
<div class="row">
<div class="col-xs-12">
<label>Account Number</label>
</div>
<div class="col-xs-12">
<h5 ng-bind="'************' + _ctrl.servicingAccount.last4"></h5>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Routing Number</label>
<br>
<h5 ng-bind="_ctrl.servicingAccount.routingNo"></h5>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pull-right hidden-xs">
<button class="btn btn-warning btn-lg primary-tooltip"
data-toggle="tooltip"
data-placement="top"
tooltip
title="Please contact us to change Bank Account Information."
style="width:100%;font-size: 16px;">Edit Bank Info</button>
</div>
<div class="col-md-12 hidden-lg hidden-md hidden-sm">
<button class="btn btn-warning btn-lg primary-tooltip"
data-toggle="tooltip"
data-placement="top"
tooltip
title="Please contact us to change Bank Account Information."
style="width:100%;font-size: 16px;">Edit Bank Info</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/////////////////////
////////Banks End////////
//////////////////////-->
</div>
</div>