bitwarden/web
1
0
Fork 0
mirror of https://github.com/bitwarden/web synced 2026-01-08 19:44:08 +00:00
Code Issues Releases Wiki Activity

Responsive Updates

Browse Source 
Initial commit for responsive and dark mode updates
Further work maybe required on resolved merge conflicts
This commit is contained in:
DanHillesheim
2021-09-01 13:29:00 -06:00
committed by Thomas Rittson
parent 9dd859af7a
commit bc8e90ecc2
50 changed files with 272 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/settings/add-credit.component.html
View File

@@ -19,7 +19,7 @@
</div>
<div class="form-group">
<div class="row">
<div class="col-4">
<div class="col-12 col-md-4 mt-4 mt-md-0">
<label for="creditAmount">{{'amount' | i18n}}</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$USD</span></div>

2
src/app/settings/adjust-storage.component.html
View File

@@ -4,7 +4,7 @@
aria-hidden="true">&times;</span></button>
<h3 class="card-body-header">{{(add ? 'addStorage' : 'removeStorage') | i18n}}</h3>
<div class="row">
<div class="form-group col-6">
<div class="form-group col-md-6">
<label for="storageAdjustment">{{(add ? 'gbStorageAdd' : 'gbStorageRemove') | i18n}}</label>
<input id="storageAdjustment" class="form-control" type="number" name="StroageGbAdjustment"
[(ngModel)]="storageAdjustment" min="0" max="99" step="1" required>

4
src/app/settings/change-email.component.html
View File

@@ -3,7 +3,7 @@
{{'changeEmailTwoFactorWarning' | i18n}}
</app-callout>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -21,7 +21,7 @@
<p>{{'changeEmailDesc' | i18n : newEmail}}</p>
<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="token">{{'code' | i18n}}</label>
<input id="token" class="form-control" type="text" name="Token" [(ngModel)]="token" required

6
src/app/settings/change-kdf.component.html
View File

@@ -1,7 +1,7 @@
<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="kdfMasterPassword">{{'masterPass' | i18n}}</label>
<input id="kdfMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -10,7 +10,7 @@
</div>
</div>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group mb-0">
<label for="kdf">{{'kdfAlgorithm' | i18n}}</label>
<a class="ml-auto" href="https://en.wikipedia.org/wiki/Key_derivation_function" target="_blank"
@@ -22,7 +22,7 @@
</select>
</div>
</div>
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group mb-0">
<label for="kdfIterations">{{'kdfIterations' | i18n}}</label>
<a class="ml-auto" href="https://bitwarden.com/help/article/what-encryption-is-used/#pbkdf2" target="_blank" rel="noopener"

6
src/app/settings/change-password.component.html
View File

@@ -4,7 +4,7 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="currentMasterPassword">{{'currentMasterPass' | i18n}}</label>
<input id="currentMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -13,7 +13,7 @@
</div>
</div>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="newMasterPassword">{{'newMasterPass' | i18n}}</label>
<input id="newMasterPassword" type="password" name="NewMasterPasswordHash" class="form-control mb-1"
@@ -22,7 +22,7 @@
<app-password-strength [score]="masterPasswordScore" [showText]="true"></app-password-strength>
</div>
</div>
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="password" name="MasterPasswordRetype" class="form-control"

2
src/app/settings/emergency-access-add-edit.component.html
View File

@@ -46,7 +46,7 @@
<small>{{'takeoverDesc' | i18n}}</small>
</label>
</div>
<div class="form-group col-6 mt-4">
<div class="form-group col-12 col-md-6 mt-4">
<label for="waitTime">{{'waitTime' | i18n}}</label>
<select id="waitTime" name="waitTime" [(ngModel)]="waitTime" class="form-control" [disabled]="readOnly">
<option *ngFor="let o of waitTimes" [ngValue]="o.value">{{o.name}}</option>

4
src/app/settings/emergency-access-takeover.component.html
View File

@@ -15,7 +15,7 @@
<app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
</app-callout>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="masterPassword">{{'newMasterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="NewMasterPasswordHash"
@@ -26,7 +26,7 @@
</app-password-strength>
</div>
</div>
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
<input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"

6
src/app/settings/options.component.html
View File

@@ -4,7 +4,7 @@
<p>{{'optionsDesc' | i18n}}</p>
<form (ngSubmit)="submit()" ngNativeValidate>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<app-vault-timeout-input [vaultTimeouts]="vaultTimeouts" [formControl]="vaultTimeout" ngDefaultControl>
</app-vault-timeout-input>
</div>
@@ -29,7 +29,7 @@
</div>
</div>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<div class="d-flex">
<label for="locale">{{'language' | i18n}}</label>
@@ -83,7 +83,7 @@
<small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
</div>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="theme">{{'theme' | i18n}}</label>
<select id="theme" name="theme" [(ngModel)]="theme" class="form-control">

18
src/app/settings/organization-plans.component.html
View File

@@ -21,16 +21,16 @@
*ngIf="!loading && !selfHosted && this.plans">
<h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
<div class="row" *ngIf="createOrganization">
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="name">{{'organizationName' | i18n}}</label>
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
</div>
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="billingEmail">{{'billingEmail' | i18n}}</label>
<input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail"
required>
</div>
<div class="form-group col-6" *ngIf="!!providerId">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="!!providerId">
<label for="email">{{'clientOwnerEmail' | i18n}}</label>
<input id="email" class="form-control" type="text" name="Email" [(ngModel)]="clientOwnerEmail" required>
<small class="text-muted">{{'clientOwnerDesc' | i18n : '20'}}</small>
@@ -43,7 +43,7 @@
<label for="ownedBusiness" class="form-check-label">{{'accountOwnedBusiness' | i18n}}</label>
</div>
<div class="row" *ngIf="ownedBusiness">
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="businessName">{{'businessName' | i18n}}</label>
<input id="businessName" class="form-control" type="text" name="BusinessName"
[(ngModel)]="businessName">
@@ -111,7 +111,7 @@
<ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
<h2 class="mt-5">{{'users' | i18n}}</h2>
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<label for="additionalSeats">{{'userSeats' | i18n}}</label>
<input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
[(ngModel)]="additionalSeats" min="1" max="100000" placeholder="{{'userSeatsDesc' | i18n}}"
@@ -122,7 +122,7 @@
</ng-container>
<h2 class="mt-5">{{'addons' | i18n}}</h2>
<div class="row" *ngIf="selectedPlan.hasAdditionalSeatsOption && selectedPlan.baseSeats">
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="additionalSeats">{{'additionalUserSeats' | i18n}}</label>
<input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
[(ngModel)]="additionalSeats" min="0" max="100000" placeholder="{{'userSeatsDesc' | i18n}}">
@@ -131,7 +131,7 @@
</div>
</div>
<div class="row">
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
<input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
[(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -141,7 +141,7 @@
</div>
</div>
<div class="row">
<div class="form-group col-6" *ngIf="selectedPlan.hasPremiumAccessOption">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="selectedPlan.hasPremiumAccessOption">
<div class="form-check">
<input id="premiumAccess" class="form-check-input" type="checkbox" name="PremiumAccessAddon"
[(ngModel)]="premiumAccessAddon">
@@ -229,7 +229,7 @@
{{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
</ng-container>
</div>
<hr class="my-1 col-3 ml-0">
<hr class="my-1 col-6 col-md-3 ml-0">
<p class="text-lg"><strong>{{'total' | i18n}}:</strong>
{{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p>
</div>

16
src/app/settings/payment.component.html
View File

@@ -26,19 +26,19 @@
</div>
<ng-container *ngIf="showMethods && method === paymentMethodType.Card">
<div class="row">
<div class="form-group col-4">
<div class="form-group col-12 col-md-4 mt-4 mt-md-0">
<label for="stripe-card-number-element">{{'number' | i18n}}</label>
<div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
</div>
<div class="form-group col-8 d-flex align-items-end">
<div class="form-group col-12 col-md-8 mt-4 mt-md-0 d-flex align-items-end">
<img src="../../images/cards.png" alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
width="323" height="32">
</div>
<div class="form-group col-4">
<div class="form-group col-12 col-md-4 mt-4 mt-md-0">
<label for="stripe-card-expiry-element">{{'expiration' | i18n}}</label>
<div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
</div>
<div class="form-group col-4">
<div class="form-group col-12 col-md-4 mt-4 mt-md-0">
<div class="d-flex">
<label for="stripe-card-cvc-element">
{{'securityCode' | i18n}}
@@ -57,22 +57,22 @@
{{'verifyBankAccountInitialDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}
</app-callout>
<div class="row">
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="routing_number">{{'routingNumber' | i18n}}</label>
<input id="routing_number" class="form-control" type="text" name="routing_number"
[(ngModel)]="bank.routing_number" required appInputVerbatim>
</div>
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="account_number">{{'accountNumber' | i18n}}</label>
<input id="account_number" class="form-control" type="text" name="account_number"
[(ngModel)]="bank.account_number" required appInputVerbatim>
</div>
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="account_holder_name">{{'accountHolderName' | i18n}}</label>
<input id="account_holder_name" class="form-control" type="text" name="account_holder_name"
[(ngModel)]="bank.account_holder_name" required>
</div>
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="account_holder_type">{{'bankAccountType' | i18n}}</label>
<select id="account_holder_type" class="form-control" name="account_holder_type"
[(ngModel)]="bank.account_holder_type" required>

4
src/app/settings/premium.component.html
View File

@@ -59,7 +59,7 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
<h2 class="mt-5">{{'addons' | i18n}}</h2>
<div class="row">
<div class="form-group col-6">
<div class="form-group col-12 col-md-6">
<label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
<input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
[(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -84,7 +84,7 @@
{{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
</ng-container>
</div>
<hr class="my-1 col-3 ml-0">
<hr class="my-1 col-12 col-md-3 ml-0">
<p class="text-lg"><strong>{{'total' | i18n}}:</strong>
{{total | currency:'USD $'}}/{{'year' | i18n}}</p>
</div>

4
src/app/settings/profile.component.html
View File

@@ -4,7 +4,7 @@
</div>
<form *ngIf="profile && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
<div class="row">
<div class="col-6">
<div class="col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="name">{{'name' | i18n}}</label>
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="profile.name">
@@ -19,7 +19,7 @@
[(ngModel)]="profile.masterPasswordHint">
</div>
</div>
<div class="col-6">
<div class="col-md-6 mt-4 mt-md-0">
<div class="mb-3">
<app-avatar data="{{profile | userName}}" [email]="profile.email" dynamic="true" size="75"
fontSize="35"></app-avatar>

4
src/app/settings/settings.component.html
View File

@@ -1,6 +1,6 @@
<div class="container page-content">
<div class="row">
<div class="col-3">
<div class="col-12 col-md-4 col-lg-3 mt-4 mt-md-0">
<div class="card">
<div class="card-header">{{'settings' | i18n}}</div>
<div class="list-group list-group-flush">
@@ -34,7 +34,7 @@
</div>
</div>
</div>
<div class="col-9">
<div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
<router-outlet></router-outlet>
</div>
</div>

16
src/app/settings/tax-info.component.html
View File

@@ -1,5 +1,5 @@
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="addressCountry">{{'country' | i18n}}</label>
<select id="addressCountry" class="form-control" [(ngModel)]="taxInfo.country" required name="addressCountry"
@@ -258,14 +258,14 @@
</select>
</div>
</div>
<div class="col-3">
<div class="col-12 col-md-3 mt-4 mt-md-0">
<div class="form-group">
<label for="addressPostalCode">{{'zipPostalCode' | i18n}}</label>
<input id="addressPostalCode" class="form-control" type="text" name="addressPostalCode"
[(ngModel)]="taxInfo.postalCode" [required]="taxInfo.country === 'US'" autocomplete="postal-code">
</div>
</div>
<div class="col-6" *ngIf="organizationId && taxInfo.country !== 'US'">
<div class="col-12 col-md-6 mt-4 mt-md-0" *ngIf="organizationId && taxInfo.country !== 'US'">
<div class="form-group form-check">
<input class="form-check-input" id="addressIncludeTaxId" name="addressIncludeTaxId" type="checkbox"
[(ngModel)]="taxInfo.includeTaxId">
@@ -274,7 +274,7 @@
</div>
</div>
<div class="row" *ngIf="organizationId && taxInfo.includeTaxId">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="taxId">{{'taxIdNumber' | i18n}}</label>
<input id="taxId" class="form-control" type="text" name="taxId" [(ngModel)]="taxInfo.taxId">
@@ -282,28 +282,28 @@
</div>
</div>
<div class="row" *ngIf="organizationId && taxInfo.includeTaxId">
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="addressLine1">{{'address1' | i18n}}</label>
<input id="addressLine1" class="form-control" type="text" name="addressLine1"
[(ngModel)]="taxInfo.line1" autocomplete="address-line1">
</div>
</div>
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="addressLine2">{{'address2' | i18n}}</label>
<input id="addressLine2" class="form-control" type="text" name="addressLine2"
[(ngModel)]="taxInfo.line2" autocomplete="address-line2">
</div>
</div>
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="addressCity">{{'cityTown' | i18n}}</label>
<input id="addressCity" class="form-control" type="text" name="addressCity"
[(ngModel)]="taxInfo.city" autocomplete="address-level2">
</div>
</div>
<div class="col-6">
<div class="col-12 col-md-6 mt-4 mt-md-0">
<div class="form-group">
<label for="addressState">{{'stateProvince' | i18n}}</label>
<input id="addressState" class="form-control" type="text" name="addressState"

2
src/app/settings/two-factor-webauthn.component.html
View File

@@ -52,7 +52,7 @@
<li>{{'twoFactorU2fSaveForm' | i18n}}</li>
</ol>
<div class="row">
<div class="form-group col-6">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0">
<label for="name">{{'name' | i18n}}</label>
<input id="name" type="text" name="Name" class="form-control" [(ngModel)]="name"
[disabled]="!keyIdAvailable">

2
src/app/settings/two-factor-yubikey.component.html
View File

@@ -36,7 +36,7 @@
</ol>
<hr>
<div class="row">
<div class="form-group col-6" *ngFor="let k of keys; let i = index">
<div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngFor="let k of keys; let i = index">
<label for="key{{i + 1}}">{{'yubikeyX' | i18n : i + 1}}</label>
<input id="key{{i + 1}}" type="password" name="Key{{i + 1}}" class="form-control"
[(ngModel)]="k.key" *ngIf="!k.existingKey" appInputVerbatim autocomplete="new-password">

4
src/app/settings/user-subscription.component.html
View File

@@ -28,7 +28,7 @@
<dd *ngIf="!sub.expiration">{{'neverExpires' | i18n}}</dd>
</dl>
<div class="row" *ngIf="!selfHosted">
<div class="col-4">
<div class="col-12 col-md-4 mt-4 mt-md-0">
<dl>
<dt>{{'status' | i18n}}</dt>
<dd>
@@ -42,7 +42,7 @@
</dd>
</dl>
</div>
<div class="col-8" *ngIf="subscription">
<div class="col-12 col-md-8 mt-4 mt-md-0" *ngIf="subscription">
<strong class="d-block mb-1">{{'details' | i18n}}</strong>
<table class="table">
<tbody>