Commit 9677397d authored by David Burke's avatar David Burke

Added marketing frame component for account pages

parent 3073f8cc
Pipeline #30732200 failed with stage
in 6 minutes and 41 seconds
......@@ -214,7 +214,8 @@
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
"styleext": "scss",
"changeDetection": "OnPush"
},
"@schematics/angular:directive": {
"prefix": "app"
......
......@@ -34,6 +34,7 @@ import { ErrorReportingContainer } from "./error-reporting/error-reporting.conta
import { ErrorReportingEffects } from "./error-reporting/error-reporting.effects";
import { BackupCodeComponent } from "./backup-code/backup-code.component";
import { ForgotPasswordComponent } from "./forgot-password/forgot-password.component";
import { MarketingFrameComponent } from "./marketing-frame/marketing-frame.component";
export const COMPONENTS = [
AccountComponent,
......@@ -50,7 +51,8 @@ export const COMPONENTS = [
RegisterComponent,
RegisterContainer,
BackupCodeComponent,
ForgotPasswordComponent
ForgotPasswordComponent,
MarketingFrameComponent
];
export const SERVICES = [UserService, ConfirmEmailGuard];
......
<div
class="account-container"
[class.account-container--popup]="isPopup">
<div class="account-column account-column--left">
<div class="account-column__inner account-column__inner--left">
<div class="account-column__logo" [inlineSVG]="'../assets/svg/passit-logo.svg'"></div>
<h1 class="account-column__heading">Gain peace of mind for your passwords</h1>
<p class="account-column__text">Store your passwords. Make them safer. Access them anywhere. Share them with others. It all starts here.</p>
<app-marketing-frame [isPopup]="isPopup">
<div class="account-column__inner account-column__inner--right">
<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>
</div>
</div>
</div>
<div class="account-column account-column--right">
<div class="account-column__inner account-column__inner--right">
<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>
</div>
<form novalidate [ngrxFormState]="form" (submit)="onSubmit()" class="auth-form__form">
<app-non-field-messages *ngIf="errorMessage" [messages]="[errorMessage]"></app-non-field-messages>
<div class="form-field form-field--large">
<label [for]="form.controls.email.id" class="form-field__label">Email</label>
<input
type="email"
autofocus
[ngrxFormControlState]="form.controls.email"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._email && form.isSubmitted }"
>
</div>
<form novalidate [ngrxFormState]="form" (submit)="onSubmit()" class="auth-form__form">
<ul *ngIf="form.isInvalid && form.isSubmitted"
class="form-field__error-list">
<li *ngIf="form.errors._email" class="form-field__error">
Enter your account's email address.
</li>
</ul>
<app-non-field-messages *ngIf="errorMessage" [messages]="[errorMessage]"></app-non-field-messages>
<div class="form-field form-field--large">
<label [for]="form.controls.password.id" class="form-field__label">Password</label>
<input
type="password"
[ngrxFormControlState]="form.controls.password"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._password && form.isSubmitted }"
>
</div>
<div class="form-field form-field--large">
<label [for]="form.controls.email.id" class="form-field__label">Email</label>
<input
type="email"
autofocus
[ngrxFormControlState]="form.controls.email"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._email && form.isSubmitted }"
>
</div>
<ul *ngIf="form.isSubmitted"
class="form-field__error-list">
<li *ngIf="form.errors._password" class="form-field__error">
Enter your account's password.
</li>
</ul>
<ul *ngIf="form.isInvalid && form.isSubmitted"
class="form-field__error-list">
<li *ngIf="form.errors._email" class="form-field__error">
Enter your account's email address.
</li>
</ul>
<div *ngIf="!isExtension">
<app-checkbox
title="Stay logged in on this device"
[control]="form.controls.rememberMe"
></app-checkbox>
</div>
<div *ngIf="isExtension">
<app-checkbox
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"
></app-checkbox>
<div class="form-field form-field--large">
<label [for]="form.controls.password.id" class="form-field__label">Password</label>
<div *ngIf="form.value.showUrl" class="form-field form-field--large">
<label [for]="form.controls.url.id" class="form-field__label">Server URL</label>
<input
type="password"
[ngrxFormControlState]="form.controls.password"
type="url"
[ngrxFormControlState]="form.controls.url"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._password && form.isSubmitted }"
[class.form-field__input--invalid]="form.errors._url"
[class.form-field__input--one-action]="form.controls.url.isValidationPending"
>
<div class="form-field__actions" *ngIf="form.controls.url.isValidationPending">
<progress-indicator
[inProgress]="form.controls.url.isValidationPending"
[inputAction]="true"></progress-indicator>
</div>
</div>
<ul *ngIf="form.isSubmitted"
class="form-field__error-list">
<li *ngIf="form.errors._password" class="form-field__error">
Enter your account's password.
<ul class="form-field__error-list">
<li *ngIf="form.errors._url?.$exists" class="form-field__error">
Cannot connect to {{ form.errors._url?.$exists }}
</li>
</ul>
<div *ngIf="!isExtension">
<app-checkbox
title="Stay logged in on this device"
[control]="form.controls.rememberMe"
></app-checkbox>
</div>
<div *ngIf="isExtension">
<app-checkbox
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"
></app-checkbox>
<div *ngIf="form.value.showUrl" class="form-field form-field--large">
<label [for]="form.controls.url.id" class="form-field__label">Server URL</label>
<input
type="url"
[ngrxFormControlState]="form.controls.url"
class="form-field__input"
[class.form-field__input--invalid]="form.errors._url"
[class.form-field__input--one-action]="form.controls.url.isValidationPending"
>
<div class="form-field__actions" *ngIf="form.controls.url.isValidationPending">
<progress-indicator
[inProgress]="form.controls.url.isValidationPending"
[inputAction]="true"></progress-indicator>
</div>
</div>
<ul class="form-field__error-list">
<li *ngIf="form.errors._url?.$exists" class="form-field__error">
Cannot connect to {{ form.errors._url?.$exists }}
</li>
</ul>
</div>
<div class="auth-form__actions">
<button
id="loginSubmit"
class="button button--large button--green"
[disabled]="hasLoginStarted"
type="submit">
Log in
</button>
<div class="auth-form__actions">
<button
id="loginSubmit"
class="button button--large button--green"
[disabled]="hasLoginStarted"
type="submit">
Log in
</button>
<progress-indicator
[inProgress]="hasLoginStarted"
inProgressText="Logging In"
[completed]="hasLoginFinished"
completedText="Logged In"></progress-indicator>
</div>
<progress-indicator
[inProgress]="hasLoginStarted"
inProgressText="Logging In"
[completed]="hasLoginFinished"
completedText="Logged In"></progress-indicator>
</div>
</form>
</div>
</form>
</div>
</div>
</app-marketing-frame>
<div
class="account-container"
[class.account-container--popup]="isPopup">
<div class="account-column account-column--left">
<div class="account-column__inner account-column__inner--left">
<div class="account-column__logo" [inlineSVG]="'../assets/svg/passit-logo.svg'"></div>
<h1 class="account-column__heading">Gain peace of mind for your passwords</h1>
<p class="account-column__text">Store your passwords. Make them safer. Access them anywhere. Share them with others. It all starts here.</p>
</div>
</div>
<div class="account-column account-column--right">
<ng-content></ng-content>
</div>
</div>
import { Component, ChangeDetectionStrategy, Input } from "@angular/core";
@Component({
selector: "app-marketing-frame",
templateUrl: "./marketing-frame.component.html",
styleUrls: ["./marketing-frame.component.scss", "../account.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarketingFrameComponent {
@Input()
isPopup: boolean;
constructor() {}
}
import { storiesOf } from "@storybook/angular";
import { InlineSVGModule } from "ng-inline-svg";
import { HttpClientModule } from "@angular/common/http";
import { storiesOf, moduleMetadata } from "@storybook/angular";
import { StoreModule } from "@ngrx/store";
import { NgrxFormsModule } from "ngrx-forms";
import { BackupCodeComponent } from "../app/account/backup-code/backup-code.component";
import { ForgotPasswordComponent } from "../app/account/forgot-password/forgot-password.component";
import { MarketingFrameComponent } from "../app/account/marketing-frame/marketing-frame.component";
import { LoginComponent } from "../app/account/login/login.component";
import { SharedModule } from "../app/shared";
import { ProgressIndicatorModule } from "../app/progress-indicator";
storiesOf("Register", module).add("Backup Code", () => ({
component: BackupCodeComponent,
props: {
code: "CBVDCH4G23MJ46FXJBR8GDX4WKBF97VR"
}
}));
storiesOf("Forgot Password", module).add("step 1", () => ({
component: ForgotPasswordComponent,
props: {}
}));
storiesOf("Account", module)
.addDecorator(
moduleMetadata({
imports: [
InlineSVGModule.forRoot(),
HttpClientModule,
NgrxFormsModule,
SharedModule,
ProgressIndicatorModule,
StoreModule.forRoot({})
],
declarations: [MarketingFrameComponent]
})
)
.add("Backup Code", () => ({
component: BackupCodeComponent,
props: {
code: "CBVDCH4G23MJ46FXJBR8GDX4WKBF97VR"
}
}))
.add("Forgot Password", () => ({
component: ForgotPasswordComponent
}))
.add("Marketing Frame", () => ({
component: MarketingFrameComponent
}))
.add("Login", () => ({
component: LoginComponent
}));
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