MycroftAI
/
selene-ui
mirror of https://github.com/MycroftAI/selene-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

small design changes to navigation buttons and a refactor of how the form is implemented

pull/1/head
Chris Veilleux 2019-02-13 15:20:23 -06:00
parent ea2c1fb263
commit 56e5a2760c
2 changed files with 110 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
projects/account/src/app/create-account/create-account.component.html
View File

@ -10,43 +10,50 @@
<fa-icon [icon]="stepDoneIcon"></fa-icon>
</ng-template>
<!-- Step 1: Accept Terms of Use -->
<mat-step label="{{termsOfUse}}" [stepControl]="termsOfUseControl">
<account-agreement-step [newAcctForm]="newAcctForm" [step]="termsOfUse"></account-agreement-step>
<mat-step label="Terms Of Use" [stepControl]="'termsOfUse'">
<account-agreement-step [newAcctForm]="newAcctForm" [step]="'Terms of Use'">
</account-agreement-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button" [disabled]="!termsOfUseControl.valid">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!termsOfUseControl.valid">
Next
</button>
</div>
</mat-step>
<!-- Step 2: Accept Privacy Policy -->
<mat-step label="{{privacyPolicy}}" [stepControl]="privacyPolicyControl">
<account-agreement-step [newAcctForm]="newAcctForm" [step]="privacyPolicy"></account-agreement-step>
<mat-step label="Privacy Policy" [stepControl]="'privacyPolicy'">
<account-agreement-step [newAcctForm]="newAcctForm" [step]="'Privacy Policy'">
</account-agreement-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button" [disabled]="!privacyPolicyControl.valid">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!privacyPolicyControl.valid">
Next
</button>
</div>
</mat-step>
<!-- Step 3: Authentication -->
<mat-step label="Log In Method" [stepControl]="emailControl">
<mat-step label="Log In Method" [stepControl]="'login'">
<account-authentication-step [newAcctForm]="newAcctForm"></account-authentication-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!loginControl.valid">
Next
</button>
</div>
</mat-step>
<!-- Step 4: Username -->
<mat-step label="Display Name" [stepControl]="displayNameControl">
<mat-step label="Display Name" [stepControl]="'displayName'">
<account-display-name-step [newAcctForm]="newAcctForm"></account-display-name-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button" [disabled]="!displayNameControl.valid">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!displayNameControl.valid">
Next
</button>
</div>
</mat-step>
<!-- Step 5: Support Mycroft -->
<mat-step label="Support Mycroft" [stepControl]="membershipControl">
<mat-step label="Support Mycroft" [stepControl]="'support'">
<account-subscription-step [newAcctForm]="newAcctForm"></account-subscription-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!supportControl.valid">
Next
</button>
</div>
</mat-step>
@ -74,35 +81,50 @@
</div>
</mat-step>
<!-- Step 2: Accept Privacy Policy -->
<mat-step label="{{privacyPolicy}}" [stepControl]="privacyPolicyControl">
<account-agreement-step [newAcctForm]="newAcctForm" [step]="privacyPolicy"></account-agreement-step>
<mat-step label="Terms Of Use" [stepControl]="'termsOfUse'">
<account-agreement-step [newAcctForm]="newAcctForm" [step]="'Terms of Use'">
</account-agreement-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button" [disabled]="!privacyPolicyControl.valid">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!termsOfUseControl.valid">
Next
</button>
</div>
</mat-step>
<!-- Step 3: Authentication -->
<mat-step label="Log In Method" [stepControl]="emailControl">
<mat-step label="Privacy Policy" [stepControl]="'privacyPolicy'">
<account-agreement-step [newAcctForm]="newAcctForm" [step]="'Privacy Policy'">
</account-agreement-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button" [disabled]="!privacyPolicyControl.valid">
Next
</button>
</div>
</mat-step>
<mat-step label="Log In Method" [stepControl]="'login'">
<account-authentication-step [newAcctForm]="newAcctForm"></account-authentication-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!loginControl.valid">
Next
</button>
</div>
</mat-step>
<!-- Step 4: Username -->
<mat-step label="Display Name" [stepControl]="displayNameControl">
<mat-step label="Display Name" [stepControl]="'displayName'">
<account-display-name-step [newAcctForm]="newAcctForm"></account-display-name-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button" [disabled]="!displayNameControl.valid">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!displayNameControl.valid">
Next
</button>
</div>
</mat-step>
<!-- Step 5: Support Mycroft -->
<mat-step label="Support Mycroft" [stepControl]="membershipControl">
<mat-step label="Support Mycroft" [stepControl]="'support'">
<account-subscription-step [newAcctForm]="newAcctForm"></account-subscription-step>
<div fxLayout="row" fxLayoutAlign="end">
<button mat-button matStepperNext type="button">Next</button>
<button mat-button matStepperNext type="button" [disabled]="!supportControl.valid">
Next
</button>
</div>
</mat-step>
@ -110,6 +132,5 @@
<mat-step label="Done!">
<account-done-step [newAcctForm]="newAcctForm"></account-done-step>
</mat-step>
</mat-vertical-stepper>
</form>

81
projects/account/src/app/create-account/create-account.component.ts
View File

@ -1,10 +1,27 @@
import { Component, OnInit } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import {
AbstractControl,
FormBuilder,
FormGroup,
ValidatorFn,
Validators
} from '@angular/forms';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { Subscription } from 'rxjs';
export function loginValidator(): ValidatorFn {
return (loginGroup: FormGroup) => {
let valid = true;
const federatedPlatformControl = loginGroup.controls['federatedPlatform'];
const passwordControl = loginGroup.controls['password'];
if (!passwordControl && !federatedPlatformControl) {
valid = false;
}
return valid ? null : {platformOrPassword: true};
};
}
@Component({
selector: 'account-create-account',
templateUrl: './create-account.component.html',
@ -12,20 +29,16 @@ import { Subscription } from 'rxjs';
})
export class CreateAccountComponent implements OnInit {
public alignVertical: boolean;
public displayNameControl = new FormControl('', Validators.required);
public emailControl = new FormControl('', Validators.email);
public newAcctForm: FormGroup;
public displayNameControl: AbstractControl;
public loginControl: AbstractControl;
private mediaWatcher: Subscription;
public membershipControl = new FormControl(null);
public openDatasetControl = new FormControl(null, Validators.required);
public passwordControl = new FormControl('', Validators.required);
public privacyPolicy = 'Privacy Policy';
public privacyPolicyControl = new FormControl(false, Validators.requiredTrue);
public newAcctForm: FormGroup;
public privacyPolicyControl: AbstractControl;
public stepDoneIcon = faCheck;
public termsOfUse = 'Terms of Use';
public termsOfUseControl = new FormControl(false, Validators.requiredTrue);
public supportControl: AbstractControl;
public termsOfUseControl: AbstractControl;
constructor(public mediaObserver: MediaObserver) {
constructor(private formBuilder: FormBuilder, public mediaObserver: MediaObserver) {
this.mediaWatcher = mediaObserver.media$.subscribe(
(change: MediaChange) => {
this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
@ -33,19 +46,41 @@ export class CreateAccountComponent implements OnInit {
);
}
ngOnInit() {
this.newAcctForm = new FormGroup(
{
displayName: this.displayNameControl,
emailAddress: this.emailControl,
privacyPolicy: this.privacyPolicyControl,
membership: this.membershipControl,
openDataset: this.openDatasetControl,
password: this.passwordControl,
termsOfUse: this.termsOfUseControl
}
);
this.buildForm();
this.setControlFormAliases();
}
private buildForm() {
const loginGroup = this.formBuilder.group(
{
federatedPlatform: [null],
emailAddress: [null, [Validators.required, Validators.email]],
password: [null]
},
{validator: loginValidator()}
);
const supportGroup = this.formBuilder.group({
openDataset: [null, Validators.required],
membership: [null, Validators.required]
});
this.newAcctForm = this.formBuilder.group({
displayName: ['', Validators.required],
privacyPolicy: [false, Validators.requiredTrue],
termsOfUse: [false, Validators.requiredTrue],
login: loginGroup,
support: supportGroup
});
}
private setControlFormAliases() {
this.displayNameControl = this.newAcctForm.controls['displayName'];
this.loginControl = this.newAcctForm.controls['login'];
this.privacyPolicyControl = this.newAcctForm.controls['privacyPolicy'];
this.supportControl = this.newAcctForm.controls['support'];
this.termsOfUseControl = this.newAcctForm.controls['termsOfUse'];
}
onFormSubmit() {
console.log(this.newAcctForm.value);
}