Commit 6d2ca05a authored by Emily Jensen's avatar Emily Jensen

Styling for reset password

parent 93d31325
Pipeline #42769364 passed with stage
in 5 minutes and 17 seconds
<DockLayout stretchLastChild="true" class="auth-container">
<StackLayout class="auth-form-body">
<FlexboxLayout flexDirection="row" alignItems="center" justifyContent="space-between" class="auth-header">
<app-heading text="Reset Password"></app-heading>
<app-button
height="36"
text="Back to Login"
type="border"
(tap)="goToLogin()"
></app-button>
</FlexboxLayout>
<StackLayout dock="bottom" class="auth-actions">
<label
class="text-label text-label--light m-b-15"
text="You are currently resetting your password for the main website, app.passit.io. If you meant to log into a different server, select change server below."
textWrap="true"
></label>
<FlexboxLayout
class="auth-actions"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<app-button
height="36"
text="Change Server"
type="text"
(tap)="changeServer()"
></app-button>
<app-button width="100" text="Next" (tap)="onSubmit()"></app-button>
</FlexboxLayout>
</StackLayout>
<StackLayout orientation="vertical">
<Label class="p-10 m-b-10" *ngIf="errorMessage" [text]="errorMessage" backgroundColor="#f0f0f0" flexGrow="1"></Label>
<StackLayout class="auth-form-body">
<FlexboxLayout
flexDirection="row"
alignItems="center"
justifyContent="space-between"
class="auth-header"
>
<app-heading text="Reset Password"></app-heading>
<app-button
height="36"
text="Back to Login"
type="border"
(tap)="goToLogin()"
></app-button>
</FlexboxLayout>
<app-text-field
autocorrect="false"
autocapitalizationType="none"
label="Email"
type="email"
returnKeyType="next"
[isFormSubmitted]="form.isSubmitted"
[ngrxFormControl]="form.controls.email"
></app-text-field>
<StackLayout orientation="vertical">
<label
class="p-10 m-b-10"
*ngIf="errorMessage"
[text]="errorMessage"
backgroundColor="#f0f0f0"
flexGrow="1"
></label>
<Label
*ngIf="form.errors._email && form.isSubmitted"
class="text-label text-label--error"
text="Enter your account's email address."
textWrap="true"
></Label>
<app-text-field
autocorrect="false"
autocapitalizationType="none"
label="Email"
type="email"
returnKeyType="next"
[isFormSubmitted]="form.isSubmitted"
[ngrxFormControl]="form.controls.email"
></app-text-field>
<label
*ngIf="form.errors._email && form.isSubmitted"
class="text-label text-label--error"
text="Enter your account's email address."
textWrap="true"
></label>
<app-server-select
*ngIf="!hasFinished"
[showUrlControl]="form.controls.showUrl"
[urlControl]="form.controls.url"
[formErrors]="form.errors"
></app-server-select>
</StackLayout>
<label
class="text-label m-b-5 m-t-2"
text="Have your backup code ready to go, then enter the email address you used to sign up for your Passit account."
textWrap="true"
></label>
<app-server-select
*ngIf="showServer"
[showUrlControl]="form.controls.showUrl"
[urlControl]="form.controls.url"
[formErrors]="form.errors"
></app-server-select>
</StackLayout>
</StackLayout>
</DockLayout>
......@@ -14,6 +14,7 @@ import { IResetPasswordForm } from "./reset-password.reducer";
@Component({
selector: "app-reset-password",
templateUrl: "./reset-password.component.html",
styleUrls: ["../shared/auth.styles.css"],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResetPasswordComponent implements OnInit {
......@@ -34,7 +35,7 @@ export class ResetPasswordComponent implements OnInit {
reset = new EventEmitter();
constructor(private routerExtensions: RouterExtensions) {}
showServer = false;
ngOnInit() {}
onSubmit() {
......@@ -52,4 +53,7 @@ export class ResetPasswordComponent implements OnInit {
goToLogin() {
this.routerExtensions.navigate(["/login"], { clearHistory: true });
}
changeServer() {
this.showServer = !this.showServer;
}
}
......@@ -33,6 +33,7 @@ export class ResetPasswordComponent implements OnInit {
emailInput: ElementRef;
constructor() {}
showServer = true;
ngOnInit() {
if (this.emailInput) {
......@@ -53,4 +54,8 @@ export class ResetPasswordComponent implements OnInit {
this.reset.emit();
setTimeout(() => this.emailInput.nativeElement.focus(), 0);
}
toggleServer() {
this.showServer = !this.showServer;
}
}
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