[CL-11] Submit button (#2971)
* Begin implementing submit button * Add submit button * Update figma url * Add disabled when loading * Update existing submit buttons * Move template to it's own file
This commit is contained in:
parent
4ea359a2d2
commit
e105a8f222
|
@ -32,16 +32,9 @@
|
||||||
<app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
|
<app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
|
<bit-submit-button [loading]="form.loading">
|
||||||
<i
|
|
||||||
class="bwi bwi-spinner bwi-spin"
|
|
||||||
title="{{ 'loading' | i18n }}"
|
|
||||||
*ngIf="form.loading"
|
|
||||||
></i>
|
|
||||||
<span>
|
|
||||||
{{ "submit" | i18n }}
|
{{ "submit" | i18n }}
|
||||||
</span>
|
</bit-submit-button>
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
bitButton
|
bitButton
|
||||||
buttonType="secondary"
|
buttonType="secondary"
|
||||||
|
|
|
@ -57,7 +57,13 @@ import { InfiniteScrollModule } from "ngx-infinite-scroll";
|
||||||
import { ToastrModule } from "ngx-toastr";
|
import { ToastrModule } from "ngx-toastr";
|
||||||
|
|
||||||
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||||
import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
|
import {
|
||||||
|
BadgeModule,
|
||||||
|
ButtonModule,
|
||||||
|
CalloutModule,
|
||||||
|
MenuModule,
|
||||||
|
SubmitButtonModule,
|
||||||
|
} from "@bitwarden/components";
|
||||||
|
|
||||||
registerLocaleData(localeAf, "af");
|
registerLocaleData(localeAf, "af");
|
||||||
registerLocaleData(localeAz, "az");
|
registerLocaleData(localeAz, "az");
|
||||||
|
@ -126,6 +132,7 @@ registerLocaleData(localeZhTw, "zh-TW");
|
||||||
BadgeModule,
|
BadgeModule,
|
||||||
ButtonModule,
|
ButtonModule,
|
||||||
MenuModule,
|
MenuModule,
|
||||||
|
SubmitButtonModule,
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
|
@ -142,6 +149,7 @@ registerLocaleData(localeZhTw, "zh-TW");
|
||||||
BadgeModule,
|
BadgeModule,
|
||||||
ButtonModule,
|
ButtonModule,
|
||||||
MenuModule,
|
MenuModule,
|
||||||
|
SubmitButtonModule,
|
||||||
],
|
],
|
||||||
providers: [DatePipe],
|
providers: [DatePipe],
|
||||||
bootstrap: [],
|
bootstrap: [],
|
||||||
|
|
|
@ -66,10 +66,9 @@
|
||||||
<app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
|
<app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
<bit-submit-button [loading]="form.loading">
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
{{ "save" | i18n }}
|
||||||
<span>{{ "save" | i18n }}</span>
|
</bit-submit-button>
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
<ng-container *ngIf="canUseApi">
|
<ng-container *ngIf="canUseApi">
|
||||||
<div class="secondary-header border-0 mb-0">
|
<div class="secondary-header border-0 mb-0">
|
||||||
|
|
|
@ -17,10 +17,9 @@
|
||||||
<small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
|
<small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button bitButton buttonType="primary" class="btn-submit" type="submit" [disabled]="form.loading">
|
<bit-submit-button [loading]="form.loading">
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
{{ "checkBreaches" | i18n }}
|
||||||
<span>{{ "checkBreaches" | i18n }}</span>
|
</bit-submit-button>
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
<div class="mt-4" *ngIf="!form.loading && checkedUsername">
|
<div class="mt-4" *ngIf="!form.loading && checkedUsername">
|
||||||
<p *ngIf="error">{{ "reportError" | i18n }}...</p>
|
<p *ngIf="error">{{ "reportError" | i18n }}...</p>
|
||||||
|
|
|
@ -2,17 +2,9 @@
|
||||||
<h1>{{ "exposedPasswordsReport" | i18n }}</h1>
|
<h1>{{ "exposedPasswordsReport" | i18n }}</h1>
|
||||||
</div>
|
</div>
|
||||||
<p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
|
<p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
|
||||||
<button
|
<bit-submit-button [loading]="loading" (click)="load()">
|
||||||
bitButton
|
{{ "checkExposedPasswords" | i18n }}
|
||||||
buttonType="primary"
|
</bit-submit-button>
|
||||||
type="button"
|
|
||||||
class="btn-submit"
|
|
||||||
[disabled]="loading"
|
|
||||||
(click)="load()"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
|
||||||
<span>{{ "checkExposedPasswords" | i18n }}</span>
|
|
||||||
</button>
|
|
||||||
<div class="mt-4" *ngIf="hasLoaded">
|
<div class="mt-4" *ngIf="hasLoaded">
|
||||||
<app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
|
<app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
|
||||||
{{ "noExposedPasswords" | i18n }}
|
{{ "noExposedPasswords" | i18n }}
|
||||||
|
|
|
@ -71,8 +71,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
|
<bit-submit-button [loading]="form.loading">
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
{{ "changeKdf" | i18n }}
|
||||||
<span>{{ "changeKdf" | i18n }}</span>
|
</bit-submit-button>
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -87,8 +87,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
|
<bit-submit-button [loading]="form.loading">
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
{{ "changeMasterPassword" | i18n }}
|
||||||
<span>{{ "changeMasterPassword" | i18n }}</span>
|
</bit-submit-button>
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -100,20 +100,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button
|
<bit-submit-button [loading]="loading || form.loading" [disabled]="readOnly">
|
||||||
bitButton
|
{{ "save" | i18n }}
|
||||||
type="submit"
|
</bit-submit-button>
|
||||||
buttonType="primary"
|
|
||||||
[disabled]="loading || form.loading || readOnly"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="bwi bwi-spinner bwi-spin"
|
|
||||||
title="{{ 'loading' | i18n }}"
|
|
||||||
aria-hidden="true"
|
|
||||||
*ngIf="loading || form.loading"
|
|
||||||
></i>
|
|
||||||
<span *ngIf="!loading && !form.loading">{{ "save" | i18n }}</span>
|
|
||||||
</button>
|
|
||||||
<button bitButton buttonType="secondary" type="button" data-dismiss="modal">
|
<button bitButton buttonType="secondary" type="button" data-dismiss="modal">
|
||||||
{{ "cancel" | i18n }}
|
{{ "cancel" | i18n }}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -68,16 +68,9 @@
|
||||||
"licenseFileDesc" | i18n: "bitwarden_premium_license.json"
|
"licenseFileDesc" | i18n: "bitwarden_premium_license.json"
|
||||||
}}</small>
|
}}</small>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<bit-submit-button [loading]="form.loading">
|
||||||
bitButton
|
{{ "submit" | i18n }}
|
||||||
buttonType="primary"
|
</bit-submit-button>
|
||||||
type="submit"
|
|
||||||
class="btn-submit"
|
|
||||||
[disabled]="form.loading"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
|
||||||
<span>{{ "submit" | i18n }}</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
|
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
|
||||||
|
@ -125,8 +118,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
|
<small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
|
||||||
<button bitButton buttonType="primary" type="submit" class="btn-submit" [disabled]="form.loading">
|
<bit-submit-button [loading]="form.loading">
|
||||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
{{ "submit" | i18n }}
|
||||||
<span>{{ "submit" | i18n }}</span>
|
</bit-submit-button>
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -77,22 +77,9 @@
|
||||||
</div>
|
</div>
|
||||||
<small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
|
<small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<bit-submit-button [loading]="form.loading" *ngIf="isDeviceVerificationSectionEnabled">
|
||||||
type="submit"
|
{{ "save" | i18n }}
|
||||||
bitButton
|
</bit-submit-button>
|
||||||
buttonType="primary"
|
|
||||||
class="btn-submit"
|
|
||||||
[disabled]="form.loading"
|
|
||||||
*ngIf="isDeviceVerificationSectionEnabled"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="bwi bwi-spinner bwi-spin"
|
|
||||||
title="{{ 'loading' | i18n }}"
|
|
||||||
aria-hidden="true"
|
|
||||||
*ngIf="form.loading"
|
|
||||||
></i>
|
|
||||||
<span>{{ "save" | i18n }}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -5,3 +5,4 @@ export * from "./callout";
|
||||||
export * from "./form-field";
|
export * from "./form-field";
|
||||||
export * from "./menu";
|
export * from "./menu";
|
||||||
export * from "./utils/i18n-mock.service";
|
export * from "./utils/i18n-mock.service";
|
||||||
|
export * from "./submit-button";
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./submit-button.module";
|
|
@ -0,0 +1,10 @@
|
||||||
|
<button bitButton type="submit" [buttonType]="buttonType" [disabled]="loading || disabled">
|
||||||
|
<span class="tw-relative">
|
||||||
|
<span [ngClass]="{ 'tw-invisible': loading }">
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</span>
|
||||||
|
<span class="tw-absolute tw-inset-0" [ngClass]="{ 'tw-invisible': !loading }">
|
||||||
|
<i class="bwi bwi-spinner bwi-lg bwi-spin tw-align-baseline" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { Component, Input } from "@angular/core";
|
||||||
|
|
||||||
|
import { ButtonTypes } from "../button";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "bit-submit-button",
|
||||||
|
templateUrl: "./submit-button.component.html",
|
||||||
|
})
|
||||||
|
export class SubmitButtonComponent {
|
||||||
|
@Input() buttonType: ButtonTypes = "primary";
|
||||||
|
@Input() disabled = false;
|
||||||
|
@Input() loading: boolean;
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
|
||||||
|
import { ButtonModule } from "../button";
|
||||||
|
|
||||||
|
import { SubmitButtonComponent } from "./submit-button.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [CommonModule, ButtonModule],
|
||||||
|
exports: [SubmitButtonComponent],
|
||||||
|
declarations: [SubmitButtonComponent],
|
||||||
|
})
|
||||||
|
export class SubmitButtonModule {}
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { Meta, moduleMetadata, Story } from "@storybook/angular";
|
||||||
|
|
||||||
|
import { SubmitButtonComponent } from "./submit-button.component";
|
||||||
|
import { SubmitButtonModule } from "./submit-button.module";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: "Component Library/Submit Button",
|
||||||
|
component: SubmitButtonComponent,
|
||||||
|
decorators: [
|
||||||
|
moduleMetadata({
|
||||||
|
imports: [SubmitButtonModule],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
args: {
|
||||||
|
buttonType: "primary",
|
||||||
|
loading: false,
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
design: {
|
||||||
|
type: "figma",
|
||||||
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16733",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} as Meta;
|
||||||
|
|
||||||
|
const Template: Story<SubmitButtonComponent> = (args: SubmitButtonComponent) => ({
|
||||||
|
props: args,
|
||||||
|
template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled">
|
||||||
|
Submit
|
||||||
|
</bit-submit-button>`,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Primary = Template.bind({});
|
||||||
|
Primary.args = {};
|
||||||
|
|
||||||
|
export const Loading = Template.bind({});
|
||||||
|
Loading.args = {
|
||||||
|
loading: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Disabled = Template.bind({});
|
||||||
|
Disabled.args = {
|
||||||
|
disabled: true,
|
||||||
|
};
|
Loading…
Reference in New Issue