-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove conditional rendering for extensionRefresh feature flag Co-authored-by: Daniel James Smith <[email protected]>
- Loading branch information
Showing
4 changed files
with
95 additions
and
274 deletions.
There are no files selected for viewing
236 changes: 66 additions & 170 deletions
236
apps/browser/src/auth/popup/account-switching/account-switcher.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,182 +1,78 @@ | ||
| <ng-container *ngIf="extensionRefreshFlag"> | ||
| <popup-page [loading]="loading"> | ||
| <popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton> | ||
| <ng-container slot="end"> | ||
| <app-pop-out></app-pop-out> | ||
| <app-current-account></app-current-account> | ||
| </ng-container> | ||
| </popup-header> | ||
| <popup-page [loading]="loading"> | ||
| <popup-header slot="header" pageTitle="{{ 'accountActions' | i18n }}" showBackButton> | ||
| <ng-container slot="end"> | ||
| <app-pop-out></app-pop-out> | ||
| <app-current-account></app-current-account> | ||
| </ng-container> | ||
| </popup-header> | ||
|
|
||
| <ng-container *ngIf="availableAccounts$ | async as availableAccounts"> | ||
| <bit-section [disableMargin]="!enableAccountSwitching"> | ||
| <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst"> | ||
| <div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }"> | ||
| <auth-account | ||
| [account]="availableAccount" | ||
| [extensionRefreshFlag]="extensionRefreshFlag" | ||
| (loading)="loading = $event" | ||
| ></auth-account> | ||
| </div> | ||
| <ng-container *ngIf="availableAccounts$ | async as availableAccounts"> | ||
| <bit-section [disableMargin]="!enableAccountSwitching"> | ||
| <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst"> | ||
| <div *ngIf="availableAccount.isActive" [ngClass]="{ 'tw-mb-6': enableAccountSwitching }"> | ||
| <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account> | ||
| </div> | ||
|
|
||
| <ng-container *ngIf="enableAccountSwitching"> | ||
| <bit-section-header *ngIf="isFirst"> | ||
| <h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2> | ||
| </bit-section-header> | ||
| <ng-container *ngIf="enableAccountSwitching"> | ||
| <bit-section-header *ngIf="isFirst"> | ||
| <h2 bitTypography="h6" class="tw-font-semibold">{{ "availableAccounts" | i18n }}</h2> | ||
| </bit-section-header> | ||
|
|
||
| <div *ngIf="!availableAccount.isActive"> | ||
| <auth-account | ||
| [account]="availableAccount" | ||
| [extensionRefreshFlag]="extensionRefreshFlag" | ||
| (loading)="loading = $event" | ||
| ></auth-account> | ||
| </div> | ||
| </ng-container> | ||
| <div *ngIf="!availableAccount.isActive"> | ||
| <auth-account [account]="availableAccount" (loading)="loading = $event"></auth-account> | ||
| </div> | ||
| </ng-container> | ||
| </ng-container> | ||
|
|
||
| <!-- | ||
| <!-- | ||
| If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of | ||
| 'SPECIAL_ADD_ACCOUNT_ID'. Since we don't want to count this as one of the actual accounts, | ||
| we check to make sure the 'id' of the last 'availableAccount' is not equal to 'SPECIAL_ADD_ACCOUNT_ID' | ||
| --> | ||
| <p | ||
| class="tw-text-sm tw-text-muted" | ||
| *ngIf=" | ||
| availableAccounts.length >= accountLimit && | ||
| availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId | ||
| " | ||
| > | ||
| {{ "accountLimitReached" | i18n }} | ||
| </p> | ||
| </bit-section> | ||
| </ng-container> | ||
| <p | ||
| class="tw-text-sm tw-text-muted" | ||
| *ngIf=" | ||
| availableAccounts.length >= accountLimit && | ||
| availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId | ||
| " | ||
| > | ||
| {{ "accountLimitReached" | i18n }} | ||
| </p> | ||
| </bit-section> | ||
| </ng-container> | ||
|
|
||
| <div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount"> | ||
| <bit-section> | ||
| <bit-section-header> | ||
| <h2 bitTypography="h6" class="tw-font-semibold"> | ||
| {{ "options" | i18n }} | ||
| </h2> | ||
| </bit-section-header> | ||
| <div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount"> | ||
| <bit-section> | ||
| <bit-section-header> | ||
| <h2 bitTypography="h6" class="tw-font-semibold"> | ||
| {{ "options" | i18n }} | ||
| </h2> | ||
| </bit-section-header> | ||
|
|
||
| <bit-item> | ||
| <button | ||
| type="button" | ||
| bit-item-content | ||
| (click)="lock(currentAccount.id)" | ||
| [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock" | ||
| [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''" | ||
| > | ||
| <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i> | ||
| {{ "lockNow" | i18n }} | ||
| </button> | ||
| </bit-item> | ||
| <bit-item> | ||
| <button type="button" bit-item-content (click)="logOut(currentAccount.id)"> | ||
| <i | ||
| slot="start" | ||
| class="bwi bwi-sign-out tw-text-2xl tw-text-main" | ||
| aria-hidden="true" | ||
| ></i> | ||
| {{ "logOut" | i18n }} | ||
| </button> | ||
| </bit-item> | ||
| <bit-item *ngIf="showLockAll$ | async"> | ||
| <button type="button" bit-item-content (click)="lockAll()"> | ||
| <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i> | ||
| {{ "lockAll" | i18n }} | ||
| </button> | ||
| </bit-item> | ||
| </bit-section> | ||
| </div> | ||
| </popup-page> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="!extensionRefreshFlag"> | ||
| <app-header> | ||
| <div class="left"> | ||
| <button type="button" (click)="back()">{{ "close" | i18n }}</button> | ||
| </div> | ||
| <div class="center tw-font-bold">{{ "switchAccounts" | i18n }}</div> | ||
| </app-header> | ||
|
|
||
| <main | ||
| *ngIf="loading" | ||
| class="tw-absolute tw-z-50 tw-box-border tw-flex tw-cursor-not-allowed tw-items-center tw-justify-center tw-bg-background tw-opacity-60" | ||
| > | ||
| <i class="bwi bwi-spinner bwi-2x bwi-spin" aria-hidden="true"></i> | ||
| </main> | ||
| <main> | ||
| <div class="tw-p-2"> | ||
| <div *ngIf="availableAccounts$ | async as availableAccounts"> | ||
| <ul class="tw-grid tw-list-none tw-gap-2" role="listbox"> | ||
| <ng-container *ngFor="let availableAccount of availableAccounts; first as isFirst"> | ||
| <li *ngIf="availableAccount.isActive" class="tw-mb-4" role="option"> | ||
| <auth-account | ||
| [account]="availableAccount" | ||
| (loading)="loading = $event" | ||
| ></auth-account> | ||
| </li> | ||
| <ng-container *ngIf="enableAccountSwitching"> | ||
| <div *ngIf="isFirst" class="tw-uppercase tw-text-muted"> | ||
| {{ "availableAccounts" | i18n }} | ||
| </div> | ||
| <li *ngIf="!availableAccount.isActive" role="option"> | ||
| <auth-account | ||
| [account]="availableAccount" | ||
| (loading)="loading = $event" | ||
| ></auth-account> | ||
| </li> | ||
| </ng-container> | ||
| </ng-container> | ||
| </ul> | ||
| <!-- | ||
| If the user has not reached the account limit, the last 'availableAccount' will have an 'id' of | ||
| 'SPECIAL_ADD_ACCOUNT_ID'. Since we don't want to count this as one of the actual accounts, | ||
| we check to make sure the 'id' of the last 'availableAccount' is not equal to 'SPECIAL_ADD_ACCOUNT_ID' | ||
| --> | ||
| <p | ||
| class="tw-text-sm tw-text-muted" | ||
| *ngIf=" | ||
| availableAccounts.length >= accountLimit && | ||
| availableAccounts[availableAccounts.length - 1].id !== specialAddAccountId | ||
| " | ||
| <bit-item> | ||
| <button | ||
| type="button" | ||
| bit-item-content | ||
| (click)="lock(currentAccount.id)" | ||
| [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock" | ||
| [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''" | ||
| > | ||
| {{ "accountLimitReached" | i18n }} | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="tw-mt-8" *ngIf="currentAccount$ | async as currentAccount"> | ||
| <div class="tw-mb-2 tw-uppercase tw-text-muted">{{ "options" | i18n }}</div> | ||
| <div class="tw-grid tw-gap-2"> | ||
| <button | ||
| type="button" | ||
| class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3 disabled:tw-cursor-not-allowed disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60" | ||
| (click)="lock(currentAccount.id)" | ||
| [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock" | ||
| [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''" | ||
| > | ||
| <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i> | ||
| {{ "lockNow" | i18n }} | ||
| </button> | ||
| <button | ||
| type="button" | ||
| class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3" | ||
| (click)="logOut(currentAccount.id)" | ||
| > | ||
| <i class="bwi bwi-sign-out tw-text-2xl" aria-hidden="true"></i> | ||
| {{ "logOut" | i18n }} | ||
| </button> | ||
| <button | ||
| type="button" | ||
| class="account-switcher-row tw-flex tw-w-full tw-items-center tw-gap-3 tw-rounded-md tw-p-3" | ||
| (click)="lockAll()" | ||
| *ngIf="showLockAll$ | async" | ||
| > | ||
| <i class="bwi bwi-lock tw-text-2xl" aria-hidden="true"></i> | ||
| {{ "lockAll" | i18n }} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </ng-container> | ||
| <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i> | ||
| {{ "lockNow" | i18n }} | ||
| </button> | ||
| </bit-item> | ||
| <bit-item> | ||
| <button type="button" bit-item-content (click)="logOut(currentAccount.id)"> | ||
| <i slot="start" class="bwi bwi-sign-out tw-text-2xl tw-text-main" aria-hidden="true"></i> | ||
| {{ "logOut" | i18n }} | ||
| </button> | ||
| </bit-item> | ||
| <bit-item *ngIf="showLockAll$ | async"> | ||
| <button type="button" bit-item-content (click)="lockAll()"> | ||
| <i slot="start" class="bwi bwi-lock tw-text-2xl tw-text-main" aria-hidden="true"></i> | ||
| {{ "lockAll" | i18n }} | ||
| </button> | ||
| </bit-item> | ||
| </bit-section> | ||
| </div> | ||
| </popup-page> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.