Skip to content
This repository has been archived by the owner on Jan 17, 2024. It is now read-only.

Commit

Permalink
Merge pull request #189 from AppliedIS/feature-ui-design-2
Browse files Browse the repository at this point in the history
Feature ui design 2
  • Loading branch information
jefferey committed Nov 30, 2016
2 parents 886c1d6 + fa9924a commit 484a376
Show file tree
Hide file tree
Showing 18 changed files with 629 additions and 314 deletions.
11 changes: 11 additions & 0 deletions DOL.WHD.Section14c.Web/src/images/correct9.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
<div class="form-footer-controls" ng-show="vm.hasNext">
<button class="back-button" ng-show="vm.hasBack" ng-click="vm.onBackClick()">{{ vm.backLabel }}</button><span class="pull-right"><button class="save-button" ng-click="vm.onSaveClick()">Save &amp; Continue Later</button><button class="next-button" ng-click="vm.onNextClick()">{{ vm.nextLabel }}</button></span>
<div class="button-group">
<button class="back-button" ng-show="vm.hasBack" ng-click="vm.onBackClick()">{{ vm.backLabel }}</button>
<div class="pull-right">
<!--<button class="save-button" ng-click="vm.onSaveClick()">Save &amp; Continue Later</button>-->
<button class="next-button" ng-click="vm.onNextClick()">{{ vm.nextLabel }}</button>
</div>
</div>

<div class="dol-feedback-save">
<span class="dol-feedback-save-success" ng-show="vm.stateService.formData.lastSaved > 0">
Saved {{vm.stateService.formData.lastSaved | amUtc | amLocal | amDateFormat:'MM/DD/YYYY, h:mm A'}}
</span>
<span class="dol-feedback-save-error" ng-show="vm.stateService.formData.lastSaved === 0">
Error Saving Form
</span>
</div>
</div>

Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
<main-top-nav-control></main-top-nav-control>
<div class="dol-applicant-meta">
<div class="dol-applicant-ein" ng-show="!admin">
Applicant EIN: <span>{{ vm.stateService.ein ? vm.stateService.ein : "XX-XXXXXXX" }}</span>
</div>
<div class="dol-applicant-ein" ng-show="admin">
{{ appData.employer.legalName }}
</div>

<div class="dol-feedback-save">
<span class="dol-feedback-save-success" ng-show="vm.stateService.formData.lastSaved > 0">
Saved {{vm.stateService.formData.lastSaved | amUtc | amLocal | amDateFormat:'MM/DD/YYYY, h:mm A'}}
Expand All @@ -15,6 +8,13 @@
Error Saving Form
</span>
</div>

<div class="dol-applicant-ein" ng-show="!admin">
Applicant EIN: <span>{{ vm.stateService.ein ? vm.stateService.ein : "XX-XXXXXXX" }}</span>
</div>
<div class="dol-applicant-ein" ng-show="admin">
{{ appData.employer.legalName }}
</div>
</div>
<div class="dol-form-meta">
<div class="usa-content">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<button class="dol-nav-toggle" type="button">Form Menu</button>
<nav role="navigation" class="main-nav-bar">
<ul>
<li ng-repeat="section in vm.navService.getSections()" class="nav-button {{ vm.current === section.id ? 'active' : '' }}" data-sectionid="{{ section.id }}" ng-click="vm.onNavClick($event)" ng-show="section.id !== 'review' || vm.stateService.inReview">{{ section.display }}</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ <h2>Work Sites &amp; Employees</h2>
</div>

<div id="worksite_tab_box" class="form-tabbed-section" ng-show="vm.notInitialApp() && vm.addingWorkSite">
<div class="form-tab {{ vm.activeTab === 1 ? 'active' : '' }}" ng-click="vm.setActiveTab(1)"><div class="circle">1</div> Add Work Site</div>
<div class="form-tab {{ vm.activeTab === 2 ? 'active' : '' }}" ng-click="vm.setActiveTab(2)"><div class="circle">2</div> Add Employees</div>
<div class="form-tab {{ vm.activeTab === 1 ? 'active' : '' }}" ng-click="vm.setActiveTab(1)"><div class="circle">1</div> <span>Add</span> Work Site</div>
<div class="form-tab {{ vm.activeTab === 2 ? 'active' : '' }}" ng-click="vm.setActiveTab(2)"><div class="circle">2</div> <span>Add</span> Employees</div>
</div>

<!-- Tab 1 (Add Work Site) -->
Expand Down
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
<form ng-submit="onSubmitClick()">
<div class="login">
<div class="dol-panel-login">
<h2>Log in</h2>

<div class="usa-alert usa-alert-error" role="alert" ng-show="vm.unknownError">
<div class="usa-alert-body">
<!--<h3 class="usa-alert-heading">Error Status</h3>-->
<p class="usa-alert-text">An error occurred while connecting to the server. Please try again later if the error persists.</p>
</div>
</div>

<div class="usa-alert usa-alert-error" role="alert" ng-show="vm.loginError">
<div class="usa-alert-body">
<!--<h3 class="usa-alert-heading">Error Status</h3>-->
<p class="usa-alert-text">The email or password entered does not match our records.</p>
</div>
</div>

<div ng-class="vm.loginError ? 'usa-input-error' : ''"><label for="userName">Email</label><input name="userName" id="userName" type="email" placeholder="Email" ng-model="formVals.email" /></div>
<div ng-class="(vm.loginError ? 'usa-input-error' : '') + ' ' + 'password-wrap'"><label for="password">Password</label><input name="password" id="password" type="{{inputType}}" placeholder="Password" ng-model="formVals.pass" />
<div class="showpass">
<a href="" ng-click="hideShowPassword()"><span ng-show="inputType != 'password'">Hide</span><span ng-show="inputType === 'password'">Show</span> Password</a>
</div></div>

<div ng-class="vm.loginError ? 'usa-input-error' : ''">
<label for="userName">Email</label>
<input name="userName" id="userName" type="email" ng-model="formVals.email" />
</div>
<div ng-class="(vm.loginError ? 'usa-input-error' : '') + ' ' + 'password-wrap'">
<label for="password">Password</label>
<input name="password" id="password" type="{{inputType}}" ng-model="formVals.pass" />
<div class="showpass">
<a href="" ng-click="hideShowPassword()"><span ng-show="inputType != 'password'">Hide</span><span ng-show="inputType === 'password'">Show</span> Password</a>
</div>
</div>
<div class="loginbtn">
<button type="submit" ng-show="!vm.submittingForm">Log in</button>
<button type="button" ng-show="vm.submittingForm" class='usa-button-active'><span class="loading-blue" ng-show="vm.submittingForm"></span>Loading</button>
</div>
<div class="forgotpass"><a href="" ng-click="forgotPassword()">Forgot Your Password?</a></div>
<div class="forgotpass">
<a href="" ng-click="forgotPassword()">Forgot Your Password?</a>
</div>
</div>
<div class="login">
<div><strong>Questions?</strong></div>
<div>Contact the <a>Wage and Hour office closest to you</a></div>
<div class="dol-panel-info">
<h3>Questions?</h3>
<p>Contact the <a href="#">Wage and Hour office closest to you.</a></p>
</div>
</form>
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<form ng-submit="onSubmitClick()" ng-show="!vm.isEmailVerificationRequest">
<p>We are now accepting Section 14(c) Certificate Applications electronically.</p>
<ul>
<li>All employers, including current Certificate Holders, previous Certificate Holders and new applicants,
will have to create an account in order to submit the form electronically.</li>
<li>The Employer's EIN is required to create an account.</li>
<li>Once the Employer's account is created, additional users can be added.</li>
<li>The electronic form includes both form WH-226 and WH-226A.</li>
</ul>
<p>Read our <a>FAQs for Electronic Section 14(c) Certificate Application</a></p>
<hr/>
<div class="usa-content">
<p>We are now accepting Section 14(c) Certificate Applications electronically.</p>
<ul>
<li>All employers, including current Certificate Holders, previous Certificate Holders and new applicants,
will have to create an account in order to submit the form electronically.</li>
<li>The Employer's EIN is required to create an account.</li>
<li>Once the Employer's account is created, additional users can be added.</li>
<li>The electronic form includes both form WH-226 and WH-226A.</li>
</ul>
<p>Read our <a href="#">FAQs for Electronic Section 14(c) Certificate Application</a>.</p>
</div>

<div class="usa-alert usa-alert-success" role="alert" ng-show="vm.accountCreated">
<div class="usa-alert-body">
<h2 class="usa-alert-heading">Account Created</h2>
Expand Down Expand Up @@ -36,15 +38,14 @@ <h2>Create an Account</h2>
<p>Invalid EIN format. Example XX-XXXXXXX</p>
</div>
</span>
<input class="ein" name="EIN" id="EIN" type="text" mask="99-9999999" placeholder="EIN (XX-XXXXXXX)" ng-model="formVals.ein" />
<div>
<a href ng-click="vm.toggleEinHelp()">Why do you need an EIN to create an account?</a>
</div>
<input class="ein sidelabeled" name="EIN" id="EIN" type="text" mask="99-9999999" ng-model="formVals.ein" />
<span class="example">Example: XX-XXXXXXX</span>
<a class="dol-additional-info" href ng-click="vm.toggleEinHelp()">Why do you need an EIN to create an account?</a>
</div>
<div class="usa-alert usa-alert-info" ng-show="vm.showEinHelp">
<div class="usa-alert-body">
<p class="usa-alert-text">Providing the EIN at Registration helps us ensure there is only one account per Employer.</p>
<p class="usa-alert-text">Additional user can be added once the Employer is registered.</p>
<p>Additional users can be added once the Employer is registered.</p>
</div>
</div>
<div ng-class="vm.emailAddressError || vm.emailAddressRequired ? 'usa-input-error' : ''">
Expand All @@ -56,7 +57,7 @@ <h2>Create an Account</h2>
<span class="usa-input-error-message" id="input-error-message" role="alert" ng-show="vm.emailAddressRequired">
<p>Email address is required.</p>
</span>
<input type="email" name="registerEmail" id="registerEmail" placeholder="Email" ng-model="formVals.email" />
<input type="email" name="registerEmail" id="registerEmail" ng-model="formVals.email" />
</div>
<div class="usa-alert" ng-class="vm.passwordComplexity ? 'usa-alert-error' : 'usa-alert-info'" ng-show="vm.showPasswordHelp">
<div class="usa-alert-body">
Expand All @@ -82,22 +83,26 @@ <h3 class="usa-alert-heading">Passwords must</h3>
<p>Passwords do not match.</p>
</div>
</span>
<input type="{{inputType}}" name="registerPassword" id="registerPassword" placeholder="Password" ng-model="formVals.pass" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false" />
<meter max="4" id="password-strength-meter" value="{{passwordStrength.score}}"></meter>
<div ng-switch="passwordStrength.score">Password Strength:
<span ng-switch-when="0"></span>
<span ng-switch-when="1">Weak</span>
<span ng-switch-when="2">Fair</span>
<span ng-switch-when="3">Good</span>
<span ng-switch-when="4">Strong</span>
<div class="showpass">
<a href="" ng-click="hideShowPassword()" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false"><span ng-show="inputType != 'password'">Hide</span><span ng-show="inputType === 'password'">Show</span> Password</a>
<input type="{{inputType}}" name="registerPassword" id="registerPassword" ng-model="formVals.pass" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false" />
<div class="dol-password-help">
<div class="usa-content">
<meter max="4" id="password-strength-meter" value="{{passwordStrength.score}}"></meter>
<div ng-switch="passwordStrength.score">Password Strength:
<span ng-switch-when="0"></span>
<span ng-switch-when="1">Weak</span>
<span ng-switch-when="2">Fair</span>
<span ng-switch-when="3">Good</span>
<span ng-switch-when="4">Strong</span>
</div>
<div class="showpass">
<a href="" ng-click="hideShowPassword()" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false"><span ng-show="inputType != 'password'">Hide</span><span ng-show="inputType === 'password'">Show</span> Password</a>
</div>
</div>
</div>
</div>
</div>
<div ng-class="vm.passwordRequired || vm.passwordsDontMatch ? 'usa-input-error' : ''">
<label for="confirmPassword">Confirm Password</label>
<input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm Password" ng-model="formVals.confirmPass" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false" />
<input type="password" name="confirmPassword" id="confirmPassword" ng-model="formVals.confirmPass" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false" />
</div>
<div ng-class="vm.reCaptchaError ? 'usa-input-error' : ''">
<span class="usa-input-error-message" id="input-error-message" role="alert" ng-show="vm.reCaptchaError">
Expand Down
38 changes: 31 additions & 7 deletions DOL.WHD.Section14c.Web/src/modules/pages/landingPageTemplate.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,31 @@
<main-top-nav-control></main-top-nav-control>

<div class="usa-grid">
<div class="main-content">
<div ng-if="!stateService.user.email">
<div class="usa-width-one-half">
<user-registration-form></user-registration-form>
</div>
<div class="usa-width-one-half">
<user-login></user-login>
<div class="dol-landing-public">
<h1>Section 14(c) Certificate Application</h1>

<div class="dol-width-one-half">
<user-login></user-login>
</div>
<div class="dol-width-one-half">
<user-registration-form></user-registration-form>
</div>

</div>
</div>

<div ng-if="stateService.hasClaim('Application.Submit')">
<header role="header" class="dol-header-form">
<h1>Section 14(c) Certificate Application</h1>

<nav>
<ul>
<li><a href="">Dashboard</a></li>
<li><a href="" ng-click="vm.userClick()">{{ vm.stateService.user.email ? vm.stateService.user.email : "Username" }}</a></li>
<li><a href="" ng-click="vm.saveClick()">Sign Out</a></li>
</ul>
</nav>
</header>
<div ng-show="!stateService.formData.saved">
<button class="save-button"
onclick="window.location='#/section/assurances';">Start A New Application</button>
Expand All @@ -19,7 +34,16 @@
<button class="save-button" onclick="window.location='#/section/assurances';">Continue Application</button>
</div>
</div>

<div ng-if="stateService.user.email">
<a href ng-click="changePassword()" name="Change Password">Change Password</a>
</div>

<h2 ng-if="stateService.hasClaim('UserManagement.CreateAccount') || stateService.hasClaim('UserManagement.GetAccounts')">User Management</h2>
<div ng-if="stateService.hasClaim('UserManagement.CreateAccount')">
<account-create-button></account-create-button>
</div>
<div ng-if="stateService.hasClaim('UserManagement.GetAccounts')">
<account-grid></account-grid>
</div>
</div>
4 changes: 2 additions & 2 deletions DOL.WHD.Section14c.Web/src/styles/defaults.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,6 @@ $color-visited: #800080;
$text-color: $color-base;

// Mobile First Breakpoints
$small-screen: 481px;
$medium-screen: 600px;
$small-screen: 37.5em;
$medium-screen: 50em;
$large-screen: 1201px;
102 changes: 102 additions & 0 deletions DOL.WHD.Section14c.Web/src/styles/feedback.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@

// System Save Feedback
// Appears in form header and form footer
// ----------------------------------------
// Global styling for both locations
.dol-feedback-save {
span {
display: block;
padding: 1.5rem;

&.dol-feedback-save-success {
&:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 7px;
width: 20px;
height: 20px;
background: url('../images/dol-checkmark-green.png') center center;
background: url('../images/dol-checkmark-green.svg') center center;
background-size: contain;
}
}

&.dol-feedback-save-error {
&:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 7px;
width: 20px;
height: 20px;
background: url('../images/dol-error-red.png') center center;
background: url('../images/dol-error-red.svg') center center;
background-size: contain;
}
}

&.dol-feedback-save-process {
&:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 7px;
width: 20px;
height: 20px;
background: url('../images/dol-saving-small-green.gif') center center;
background-size: contain;
}
}
}
}

// Styling & positioning for System Save Feedback in form header
.dol-applicant-meta {
.dol-feedback-save {

background-color: $color-white;

span {
&.dol-feedback-save-success,
&.dol-feedback-save-process {
border-top: .6rem solid $color-green;
padding-top: .9rem;
}

&.dol-feedback-save-error {
border-top: .6rem solid $color-secondary;
padding-top: .9rem;
}
}
}
}

// Styling & positiong for System Save Feedback in form footer
.form-footer-controls {
.dol-feedback-save {
text-align: right;
border-top: 1px solid #aeb0b5;
margin-top: 1.5rem;

span {
padding-top: 2rem;
padding-right: 0;

&.dol-feedback-save-success {
display: block !important; // TEMPORARY FOR TESTING
}
}
}
}

@media (min-width: 50em) {
.dol-applicant-meta {
.dol-feedback-save {
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
}
}
Loading

0 comments on commit 484a376

Please sign in to comment.