...
 
Commits (4)
...@@ -189,3 +189,9 @@ ActionBar, ...@@ -189,3 +189,9 @@ ActionBar,
background-color: #0092a8; background-color: #0092a8;
color: #0092a8; color: #0092a8;
} }
.text-link {
font-weight: bold;
color: #0092a8;
text-decoration: underline;
}
<Label class="p-10 m-b-10" text="Backup Code: "></Label> <StackLayout #printArea>
<Label class="p-10 m-b-10" [text]="code"></Label> <Label class="p-10 m-b-10" text="Backup Code: "></Label>
<Button <Label class="p-10 m-b-10" [text]="code"></Label>
(tap)="generateBarcode()" <Button
id="barcode" (tap)="generateBarcode()"
text="Step 3: Generate Backup Code Page" id="barcode"
></Button> text="Step 3: Generate Backup Code Page"
<Image ></Button>
#barcodeImg <Image
id="barcode-img" #barcodeImg
height="500" id="barcode-img"
stretch="aspectFill" height="500"
class="text-center" stretch="aspectFill"
></Image> class="text-center"
<app-button text="Step 4: Print" type="text" (tap)="print()"></app-button> ></Image>
<app-button text="Step 4: Print" type="text" (tap)="print()"></app-button>
</StackLayout>
import { Component, Input, ViewChild } from "@angular/core"; import { Component, Input, ViewChild, ElementRef } from "@angular/core";
import { Printer } from "nativescript-printer"; import { Printer } from "nativescript-printer";
import { Image } from "tns-core-modules/ui/image"; import { Image } from "tns-core-modules/ui/image";
......
<Scrollview #printArea> <ns-action-bar-container></ns-action-bar-container>
<StackLayout class="auth-form-body"> <account-frame
<app-text-field title="Change Backup Code"
#password submitText="Next"
autocorrect="false" (onSubmit)="onSubmit()"
autocapitalizationType="none" >
type="password" <Label class="text-label m-b-20" textWrap="true" (tap)="learnMore()">
label="Step 1: Verify Password" <FormattedString>
returnKeyType="next" <Span
[isFormSubmitted]="form.isSubmitted" text="Replace your old backup code with a new one. Not sure what this is? "
[ngrxFormControl]="form.controls.oldPassword" ></Span>
></app-text-field> <Span text="Learn More &#8250;" class="text-link"></Span>
<app-button text="Step 2: Submit" (tap)="onSubmit()"></app-button> </FormattedString>
<app-download-backup-code </Label>
*ngIf="hasFinished" <app-non-field-errors
[code]="backupCode" *ngIf="nonFieldErrors"
></app-download-backup-code> [nonFieldErrors]="nonFieldErrors"
</StackLayout> ></app-non-field-errors>
</Scrollview> <app-text-field
#password
autocorrect="false"
autocapitalizationType="none"
type="password"
label="Verify Password"
returnKeyType="next"
[isFormSubmitted]="form.isSubmitted"
[ngrxFormControl]="form.controls.oldPassword"
></app-text-field>
<progress-indicator
[inProgress]="hasStarted"
inProgressText="Verifying"
></progress-indicator>
<app-download-backup-code
*ngIf="hasFinished"
[code]="backupCode"
></app-download-backup-code>
</account-frame>
...@@ -38,7 +38,6 @@ export class ManageBackupCodeComponent implements OnDestroy { ...@@ -38,7 +38,6 @@ export class ManageBackupCodeComponent implements OnDestroy {
onSubmit() { onSubmit() {
if (this.form.isValid) { if (this.form.isValid) {
alert("submitted and valid");
this.newBackupCode.emit(); this.newBackupCode.emit();
} }
} }
...@@ -46,4 +45,8 @@ export class ManageBackupCodeComponent implements OnDestroy { ...@@ -46,4 +45,8 @@ export class ManageBackupCodeComponent implements OnDestroy {
ngOnDestroy() { ngOnDestroy() {
this.reset.emit(); this.reset.emit();
} }
learnMore() {
alert("TODO: create learn more page and navigate to it");
}
} }
...@@ -47,8 +47,8 @@ export class SideDrawer { ...@@ -47,8 +47,8 @@ export class SideDrawer {
templates: [ templates: [
{ title: "Passwords" }, { title: "Passwords" },
// {title: "Groups"}, // {title: "Groups"},
{ title: "Change Account Password" }, { title: "Change Account Password & Backup Code" },
{ title: "Manage Backup Code" }, { title: "Change Backup Code" },
{ title: "Import" }, { title: "Import" },
{ title: "Export" }, { title: "Export" },
{ title: "Error Reporting" }, { title: "Error Reporting" },
......
...@@ -37,13 +37,11 @@ ...@@ -37,13 +37,11 @@
</FlexboxLayout> </FlexboxLayout>
<StackLayout orientation="vertical"> <StackLayout orientation="vertical">
<Label <app-non-field-errors
class="p-10 m-b-10"
*ngIf="nonFieldErrors" *ngIf="nonFieldErrors"
[text]="nonFieldErrors" [nonFieldErrors]="nonFieldErrors"
backgroundColor="#f0f0f0" ></app-non-field-errors>
flexGrow="1"
></Label>
<ng-content></ng-content> <ng-content></ng-content>
</StackLayout> </StackLayout>
</StackLayout> </StackLayout>
......
import { Component, Input } from "@angular/core";
@Component({
selector: "app-non-field-errors",
template: `
<Label
class="p-10 m-b-10"
[text]="nonFieldErrors"
backgroundColor="#f0f0f0"
flexGrow="1"
></Label>
`
})
export class NonFieldErrorsComponent {
@Input() nonFieldErrors?: string[];
}
...@@ -16,6 +16,7 @@ import { NsCheckboxComponent } from "./ns-checkbox/ns-checkbox.component"; ...@@ -16,6 +16,7 @@ import { NsCheckboxComponent } from "./ns-checkbox/ns-checkbox.component";
import { ServerSelectComponent } from "./server-select/server-select.component"; import { ServerSelectComponent } from "./server-select/server-select.component";
import { AccountFrameComponent } from "./account-frame/account-frame.component"; import { AccountFrameComponent } from "./account-frame/account-frame.component";
import { BulletListComponent } from "./bullet-list/bullet-list.component.tns"; import { BulletListComponent } from "./bullet-list/bullet-list.component.tns";
import { NonFieldErrorsComponent } from "./non-field-errors/non-field-errors.component";
export const COMPONENTS = [ export const COMPONENTS = [
ButtonComponent, ButtonComponent,
...@@ -29,7 +30,8 @@ export const COMPONENTS = [ ...@@ -29,7 +30,8 @@ export const COMPONENTS = [
TextLinkComponent, TextLinkComponent,
ServerSelectComponent, ServerSelectComponent,
AccountFrameComponent, AccountFrameComponent,
BulletListComponent BulletListComponent,
NonFieldErrorsComponent
]; ];
@NgModule({ @NgModule({
......