Commit ae115fa4 authored by Emily Jensen's avatar Emily Jensen

Merges in 179 branch

parents b1c4b51c 4bc148f3
Pipeline #35881937 passed with stage
in 8 minutes and 24 seconds
......@@ -79,6 +79,9 @@ src/app/**/*.js.map
# brendan?!? #
*.sublime-workspace
# Emily #
.vscode/settings.json
# delete #
/src/app/oldlist
......
......@@ -205,7 +205,7 @@ label.import__toggle-preview.form-field__checkbox {
font-size: 20px;
transition: padding $transition-time, border $transition-time,
color $transition-time, box-shadow $transition-time;
&--edit {
margin-top: 4px;
font-size: 14px;
......
<div class="account l-container-narrow u-margin-tb-50">
<a class="text-link text-link--left-caret heading-back-link" [routerLink]=" ['/account'] ">Account Management</a>
<h2 class="heading-main heading-main--pad-bottom">
Change Account Password
</h2>
......@@ -10,14 +10,15 @@
<app-non-field-messages [messages]="nonFieldErrors"></app-non-field-messages>
<div class="form-field form-field--large">
<label for="oldPassword" class="form-field__label">Current Password</label>
<input type="password"
[ngrxFormControlState]="form.controls.oldPassword"
class="form-field__input form-field__input--one-action"
[class.form-field__input--invalid]="form.errors._oldPassword && form.isSubmitted"
name="oldPassword"
autocomplete="off"
/>
<div class="form-field__wrapper-for-link">
<label for="oldPassword" class="form-field__label">Current Password</label>
<a class="sign-out text-link text-link--caret form-field__label-link" href="javascript:void(0)" (click)="onForgotPassword.emit()">
<span class="u-visible--all-but-small">Forgot? </span>Log&nbsp;out&nbsp;to&nbsp;reset
</a>
</div>
<input type="password" [ngrxFormControlState]="form.controls.oldPassword" class="form-field__input form-field__input--one-action"
[class.form-field__input--invalid]="form.errors._oldPassword && form.isSubmitted" name="oldPassword"
autocomplete="off" />
</div>
<ul *ngIf="form.errors._oldPassword && form.isSubmitted" class="form-field__error-list">
......@@ -29,14 +30,9 @@
</li>
</ul>
<app-password-input
[showConfirm]="form.controls.showConfirm"
[newPassword]="form.controls.newPassword"
[newPasswordConfirm]="form.controls.newPasswordConfirm"
[errors]="form.errors"
[isSubmitted]="form.isSubmitted"
(toggleConfirm)="toggleConfirm.emit()"
></app-password-input>
<app-password-input [showConfirm]="form.controls.showConfirm" [newPassword]="form.controls.newPassword"
[newPasswordConfirm]="form.controls.newPasswordConfirm" [errors]="form.errors" [isSubmitted]="form.isSubmitted"
(toggleConfirm)="toggleConfirm.emit()"></app-password-input>
<div class="change-password__actions">
......@@ -44,11 +40,7 @@
Change Password
</button>
<progress-indicator
[inProgress]="hasStarted"
inProgressText="Saving"
[completed]="hasFinished"
completedText="Saved"></progress-indicator>
<progress-indicator [inProgress]="hasStarted" inProgressText="Saving" [completed]="hasFinished" completedText="Saved"></progress-indicator>
</div>
......@@ -56,4 +48,4 @@
We’re currently changing your password. This takes a little while, so don’t navigate away.
</div>
</form>
</div>
</div>
\ No newline at end of file
......@@ -22,6 +22,8 @@ export class ChangePasswordComponent {
changePassword = new EventEmitter();
@Output()
toggleConfirm = new EventEmitter();
@Output()
onForgotPassword = new EventEmitter();
onSubmit() {
if (this.form.isValid) {
......
import {take} from 'rxjs/operators';
import { take } from "rxjs/operators";
import { Component } from "@angular/core";
import { Store } from "@ngrx/store";
......@@ -19,7 +18,8 @@ import { SetValueAction } from "ngrx-forms";
[hasFinished]="hasFinished"
[nonFieldErrors]="nonFieldErrors"
(changePassword)="changePassword()"
(toggleConfirm)="toggleConfirm()">
(toggleConfirm)="toggleConfirm()"
(onForgotPassword)="onForgotPassword()">
</change-password>
`
})
......@@ -29,6 +29,7 @@ export class ChangePasswordContainer {
hasFinished = false;
showConfirm: boolean;
nonFieldErrors: string[];
clickMessage = "";
constructor(
private store: Store<fromRoot.IState>,
......@@ -48,6 +49,16 @@ export class ChangePasswordContainer {
);
}
onForgotPassword() {
if (
window.confirm(
"Account recovery will log you out. Have your backup code ready, and download your passwords just in case."
)
) {
this.store.dispatch(new LogoutAction());
}
}
changePassword() {
this.form$.pipe(take(1)).subscribe(form => {
this.hasStarted = true;
......@@ -70,12 +81,18 @@ export class ChangePasswordContainer {
// console.error(err);
if (err.res && err.res.status === 400) {
if (err.res.error.old_password) {
this.nonFieldErrors = this.nonFieldErrors.concat("Current password is not correct.");
this.nonFieldErrors = this.nonFieldErrors.concat(
"Current password is not correct."
);
} else {
this.nonFieldErrors = this.nonFieldErrors.concat("Unknown error. Password was not reset.");
this.nonFieldErrors = this.nonFieldErrors.concat(
"Unknown error. Password was not reset."
);
}
} else {
this.nonFieldErrors = this.nonFieldErrors.concat("Unknown error.");
this.nonFieldErrors = this.nonFieldErrors.concat(
"Unknown error."
);
}
});
}, 200);
......
......@@ -3,7 +3,7 @@
<div class="account-column__right-heading">
<h1 class="heading-medium">Log&nbsp;In</h1>
<div class="account-column__link">
<a class="text-link text-link--caret text-link--large" id="btn-signup" href="javascript:void(0)" (click)="toggleDisplay()">Not&nbsp;registered? Sign&nbsp;up</a>
<a class="text-link text-link--caret text-link--large" id="btn-signup" href="javascript:void(0)" (click)="toggleDisplay()" tabindex="1">Not&nbsp;registered? Sign&nbsp;up</a>
</div>
</div>
......@@ -19,6 +19,7 @@
[ngrxFormControlState]="form.controls.email"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._email && form.isSubmitted }"
tabindex="2"
>
</div>
......@@ -30,12 +31,16 @@
</ul>
<div class="form-field form-field--large">
<label [for]="form.controls.password.id" class="form-field__label">Password</label>
<div class="form-field__wrapper-for-link">
<label [for]="form.controls.password.id" class="form-field__label">Password</label>
<a class="text-link text-link--caret form-field__label-link" href="javascript:void(0)" [routerLink]="['/reset-password']" tabindex="8"><span class="u-visible--all-but-small">Forgot? </span>Recover&nbsp;your&nbsp;account</a>
</div>
<input
type="password"
[ngrxFormControlState]="form.controls.password"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._password && form.isSubmitted }"
tabindex="3"
>
</div>
......@@ -50,6 +55,7 @@
<app-checkbox
title="Stay logged in on this device"
[control]="form.controls.rememberMe"
tabindex="4"
></app-checkbox>
</div>
......@@ -58,6 +64,7 @@
title="My company has its own Passit server"
subtext="If you signed up for Passit anywhere other than app.passit.io (e.g. passit.mycompany.com, or your self-hosted server), you’ll need to specify where you want to log&nbsp;in."
[control]="form.controls.showUrl"
tabindex="5"
></app-checkbox>
<div *ngIf="form.value.showUrl" class="form-field form-field--large">
......@@ -68,6 +75,7 @@
class="form-field__input"
[class.form-field__input--invalid]="form.errors._url"
[class.form-field__input--one-action]="form.controls.url.isValidationPending"
tabindex="6"
>
<div class="form-field__actions" *ngIf="form.controls.url.isValidationPending">
<progress-indicator
......@@ -87,7 +95,8 @@
id="loginSubmit"
class="button button--large button--green"
[disabled]="hasLoginStarted"
type="submit">
type="submit"
tabindex="7">
Log in
</button>
......
@import './colors';
@import "./colors";
.form-field {
position: relative;
......@@ -8,6 +8,12 @@
margin-bottom: 0;
}
&__wrapper-for-link {
display: flex;
align-items: center;
justify-content: space-between;
}
&__label {
display: block;
margin-bottom: 5px;
......@@ -16,6 +22,12 @@
font-weight: 600;
}
&__label-link {
position: relative;
top: -3px;
font-size: 12px;
}
&__input {
width: 100%;
padding: 8px;
......@@ -67,7 +79,6 @@
transition: box-shadow 0.2s margin 0.2s;
}
&__input:focus,
&__textarea:focus,
&--dirty-feedback.ng-dirty,
......@@ -82,24 +93,24 @@
border: 1px solid $color-botticelli;
border-bottom-color: $color-thunder;
}
&__input--invalid {
border-bottom-color: $color-brick-red;
box-shadow: inset 0 -1px 0 0 $color-brick-red;
&:focus {
border: 1px solid $color-wafer;
border-bottom-color: $color-brick-red;
box-shadow: inset 0 -4px 0 0 $color-just-right;
border: 1px solid $color-wafer;
border-bottom-color: $color-brick-red;
box-shadow: inset 0 -4px 0 0 $color-just-right;
}
}
&__input--invalid {
.form-field__input {
.form-field__input {
border: 1px solid $color-wafer;
border-bottom-color: $color-brick-red;
box-shadow: inset 0 -4px 0 0 $color-just-right;
}
}
}
// Fix bottom-border here
......@@ -107,51 +118,59 @@
&__input--valid {
border-bottom-color: $color-de-york;
box-shadow: inset 0 -4px 0 0 $color-de-york;
&:focus {
border: 1px solid $color-wafer;
border-bottom-color: $color-de-york;
box-shadow: inset 0 -4px 0 0 $color-de-york;
border: 1px solid $color-wafer;
border-bottom-color: $color-de-york;
box-shadow: inset 0 -4px 0 0 $color-de-york;
}
}
&__input--valid {
.form-field__input {
.form-field__input {
border: 1px solid $color-wafer;
border-bottom-color: $color-de-york;
box-shadow: inset 0 -4px 0 0 $color-de-york;
}
}
}
&__input--invalid.ng-dirty {
box-shadow: inset 0 -1px 0 0 $color-brick-red;
&:focus,&.ng-dirty:not(:focus), &.ng-dirty:not(:focus) + .form-field__input {
&:focus,
&.ng-dirty:not(:focus),
&.ng-dirty:not(:focus) + .form-field__input {
border: 1px solid $color-wafer;
border-bottom-color: $color-brick-red;
box-shadow: inset 0 -4px 0 0 $color-brick-red;
}
}
}
&__input--invalid.ng-pristine {
box-shadow: inset 0 -1px 0 0 $color-brick-red;
&:focus,&.ng-pristine:not(:focus), &.ng-pristine:not(:focus) + .form-field__input {
&:focus,
&.ng-pristine:not(:focus),
&.ng-pristine:not(:focus) + .form-field__input {
border: 1px solid $color-wafer;
border-bottom-color: $color-brick-red;
box-shadow: inset 0 -4px 0 0 $color-brick-red;
}
}
}
&--dirty-feedback {
&.ng-dirty:not(:focus),
&.ng-dirty:not(:focus) + .form-field__input {
&.ng-dirty:not(:focus) + .form-field__input {
box-shadow: inset 0 -3px 0 0 $color-deep-cerulean;
border-bottom-color: $color-deep-cerulean;
}
}
}
&--large {
.form-field__label {
font-size: 1.2em;
&--with-link {
font-size: 1.2em;
}
}
.form-field__input {
......@@ -202,7 +221,7 @@
}
&:after {
content: '\25BC';
content: "\25BC";
position: absolute;
top: 0;
right: 0;
......@@ -260,9 +279,9 @@
.form-field__checkbox__check--checked {
background-color: $color-white;
border-color: $color-deep-cerulean;
box-shadow: inset 0 0 0 0 $color-deep-cerulean,
0 0 0 1px $color-deep-cerulean;
box-shadow: inset 0 0 0 0 $color-deep-cerulean,
0 0 0 1px $color-deep-cerulean;
svg {
fill: $color-thunder;
transform: scale(1);
......@@ -292,7 +311,7 @@
height: 16px;
border-width: 1px;
}
svg {
position: absolute;
top: 0;
......@@ -348,4 +367,3 @@
margin-bottom: 10px;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment