[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>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
*ngIf="form.loading"
|
||||
></i>
|
||||
<span>
|
||||
{{ "submit" | i18n }}
|
||||
</span>
|
||||
</button>
|
||||
<bit-submit-button [loading]="form.loading">
|
||||
{{ "submit" | i18n }}
|
||||
</bit-submit-button>
|
||||
<button
|
||||
bitButton
|
||||
buttonType="secondary"
|
||||
|
|
|
@ -57,7 +57,13 @@ import { InfiniteScrollModule } from "ngx-infinite-scroll";
|
|||
import { ToastrModule } from "ngx-toastr";
|
||||
|
||||
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(localeAz, "az");
|
||||
|
@ -126,6 +132,7 @@ registerLocaleData(localeZhTw, "zh-TW");
|
|||
BadgeModule,
|
||||
ButtonModule,
|
||||
MenuModule,
|
||||
SubmitButtonModule,
|
||||
],
|
||||
exports: [
|
||||
CommonModule,
|
||||
|
@ -142,6 +149,7 @@ registerLocaleData(localeZhTw, "zh-TW");
|
|||
BadgeModule,
|
||||
ButtonModule,
|
||||
MenuModule,
|
||||
SubmitButtonModule,
|
||||
],
|
||||
providers: [DatePipe],
|
||||
bootstrap: [],
|
||||
|
|
|
@ -66,10 +66,9 @@
|
|||
<app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "save" | i18n }}</span>
|
||||
</button>
|
||||
<bit-submit-button [loading]="form.loading">
|
||||
{{ "save" | i18n }}
|
||||
</bit-submit-button>
|
||||
</form>
|
||||
<ng-container *ngIf="canUseApi">
|
||||
<div class="secondary-header border-0 mb-0">
|
||||
|
|
|
@ -17,10 +17,9 @@
|
|||
<small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<button bitButton buttonType="primary" class="btn-submit" type="submit" [disabled]="form.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "checkBreaches" | i18n }}</span>
|
||||
</button>
|
||||
<bit-submit-button [loading]="form.loading">
|
||||
{{ "checkBreaches" | i18n }}
|
||||
</bit-submit-button>
|
||||
</form>
|
||||
<div class="mt-4" *ngIf="!form.loading && checkedUsername">
|
||||
<p *ngIf="error">{{ "reportError" | i18n }}...</p>
|
||||
|
|
|
@ -2,17 +2,9 @@
|
|||
<h1>{{ "exposedPasswordsReport" | i18n }}</h1>
|
||||
</div>
|
||||
<p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
|
||||
<button
|
||||
bitButton
|
||||
buttonType="primary"
|
||||
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>
|
||||
<bit-submit-button [loading]="loading" (click)="load()">
|
||||
{{ "checkExposedPasswords" | i18n }}
|
||||
</bit-submit-button>
|
||||
<div class="mt-4" *ngIf="hasLoaded">
|
||||
<app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
|
||||
{{ "noExposedPasswords" | i18n }}
|
||||
|
|
|
@ -71,8 +71,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "changeKdf" | i18n }}</span>
|
||||
</button>
|
||||
<bit-submit-button [loading]="form.loading">
|
||||
{{ "changeKdf" | i18n }}
|
||||
</bit-submit-button>
|
||||
</form>
|
||||
|
|
|
@ -87,8 +87,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "changeMasterPassword" | i18n }}</span>
|
||||
</button>
|
||||
<bit-submit-button [loading]="form.loading">
|
||||
{{ "changeMasterPassword" | i18n }}
|
||||
</bit-submit-button>
|
||||
</form>
|
||||
|
|
|
@ -100,20 +100,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
bitButton
|
||||
type="submit"
|
||||
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>
|
||||
<bit-submit-button [loading]="loading || form.loading" [disabled]="readOnly">
|
||||
{{ "save" | i18n }}
|
||||
</bit-submit-button>
|
||||
<button bitButton buttonType="secondary" type="button" data-dismiss="modal">
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
|
|
|
@ -68,16 +68,9 @@
|
|||
"licenseFileDesc" | i18n: "bitwarden_premium_license.json"
|
||||
}}</small>
|
||||
</div>
|
||||
<button
|
||||
bitButton
|
||||
buttonType="primary"
|
||||
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>
|
||||
<bit-submit-button [loading]="form.loading">
|
||||
{{ "submit" | i18n }}
|
||||
</bit-submit-button>
|
||||
</form>
|
||||
</ng-container>
|
||||
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
|
||||
|
@ -125,8 +118,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
|
||||
<button bitButton buttonType="primary" 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>
|
||||
<bit-submit-button [loading]="form.loading">
|
||||
{{ "submit" | i18n }}
|
||||
</bit-submit-button>
|
||||
</form>
|
||||
|
|
|
@ -77,22 +77,9 @@
|
|||
</div>
|
||||
<small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
bitButton
|
||||
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>
|
||||
<bit-submit-button [loading]="form.loading" *ngIf="isDeviceVerificationSectionEnabled">
|
||||
{{ "save" | i18n }}
|
||||
</bit-submit-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -5,3 +5,4 @@ export * from "./callout";
|
|||
export * from "./form-field";
|
||||
export * from "./menu";
|
||||
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