Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-03-22 15:19:15 +01:00
Code Issues Projects Releases Wiki Activity

[SG-632] - Change forwarded providers radio buttons list to dropdown (#4045)

Browse Source 
* SG-632 - Changed forwarded providers list of radio buttons to dropdown

* SG-632 - Added role attributes to improve accessibility.

* SG-632 - Added sorting to array and empty option

* SG-632 - Fix styling to match standards.
This commit is contained in:
Carlos Gonçalves 2022-11-21 17:08:47 +00:00 committed by GitHub
parent 156eabe774
commit a6226c7c90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/browser/src/popup/generator/generator.component.html
View File

@ -320,22 +320,18 @@
</div>
<div class="box" *ngIf="usernameOptions.type === 'forwarded'">
<div class="box-content">
<div class="box-content-row" role="radiogroup" aria-labelledby="forwardTypeHeading">
<label id="forwardTypeHeading" class="radio-header">{{ "service" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of forwardOptions">
<input
type="radio"
[(ngModel)]="usernameOptions.forwardedService"
name="ForwardType"
id="forwardtype_{{ o.value }}"
[value]="o.value"
(change)="saveUsernameOptions()"
[checked]="usernameOptions.forwardedService === o.value"
/>
<label for="forwardtype_{{ o.value }}">
<div class="box-content-row" role="listbox" aria-labelledby="forwardTypeHeading">
<label id="forwardTypeHeading">{{ "service" | i18n }}</label>
<select
id="ForwardTypeDropdown"
name="ForwardType"
[(ngModel)]="usernameOptions.forwardedService"
(change)="saveUsernameOptions()"
>
<option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
{{ o.name }}
</label>
</div>
</option>
</select>
</div>
<ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'">
<div class="box-content-row" appBoxRow>

26
apps/desktop/src/app/vault/generator.component.html
View File

@ -353,22 +353,18 @@
</div>
<div class="box" *ngIf="usernameOptions.type === 'forwarded'" [hidden]="!showOptions">
<div class="box-content condensed">
<div class="box-content-row" role="radiogroup" aria-labelledby="forwardTypeHeading">
<label id="forwardTypeHeading" class="radio-header">{{ "service" | i18n }}</label>
<div class="radio-group text-default" appBoxRow *ngFor="let o of forwardOptions">
<input
type="radio"
[(ngModel)]="usernameOptions.forwardedService"
name="ForwardType"
id="forwardtype_{{ o.value }}"
[value]="o.value"
(change)="saveUsernameOptions()"
[checked]="usernameOptions.forwardedService === o.value"
/>
<label for="forwardtype_{{ o.value }}">
<div class="box-content-row" role="listbox" aria-labelledby="forwardTypeHeading">
<label id="forwardTypeHeading">{{ "service" | i18n }}</label>
<select
id="ForwardTypeDropdown"
name="ForwardType"
[(ngModel)]="usernameOptions.forwardedService"
(change)="saveUsernameOptions()"
>
<option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
{{ o.name }}
</label>
</div>
</option>
</select>
</div>
<ng-container *ngIf="usernameOptions.forwardedService === 'simplelogin'">
<div class="box-content-row" appBoxRow>

26
apps/web/src/app/tools/generator.component.html
View File

@ -266,23 +266,19 @@
</div>
</div>
<ng-container *ngIf="usernameOptions.type === 'forwarded'">
<div class="form-group">
<div class="form-group" role="listbox">
<label class="d-block">{{ "service" | i18n }}</label>
<div class="form-check" *ngFor="let o of forwardOptions">
<input
class="form-check-input"
type="radio"
[(ngModel)]="usernameOptions.forwardedService"
name="ForwardType"
id="forwardtype_{{ o.value }}"
[value]="o.value"
(change)="saveUsernameOptions()"
[checked]="usernameOptions.forwardedService === o.value"
/>
<label class="form-check-label" for="forwardtype_{{ o.value }}">
<select
id="ForwardTypeDropdown"
name="ForwardType"
[(ngModel)]="usernameOptions.forwardedService"
(change)="saveUsernameOptions()"
class="form-control w-auto"
>
<option *ngFor="let o of forwardOptions" [ngValue]="o.value" role="option">
{{ o.name }}
</label>
</div>
</option>
</select>
</div>
<div class="row" *ngIf="usernameOptions.forwardedService === 'simplelogin'">
<div class="form-group col-4">

25
libs/angular/src/components/generator.component.ts
View File

@ -70,13 +70,7 @@ export class GeneratorComponent implements OnInit {
];
this.subaddressOptions = [{ name: i18nService.t("random"), value: "random" }];
this.catchallOptions = [{ name: i18nService.t("random"), value: "random" }];
this.forwardOptions = [
{ name: "SimpleLogin", value: "simplelogin" },
{ name: "AnonAddy", value: "anonaddy" },
{ name: "Firefox Relay", value: "firefoxrelay" },
{ name: "Fastmail", value: "fastmail" },
{ name: "DuckDuckGo", value: "duckduckgo" },
];
this.initForwardOptions();
}
async ngOnInit() {
@ -239,4 +233,21 @@ export class GeneratorComponent implements OnInit {
this.enforcedPasswordPolicyOptions
);
}
private async initForwardOptions() {
this.forwardOptions = [
{ name: "AnonAddy", value: "anonaddy" },
{ name: "DuckDuckGo", value: "duckduckgo" },
{ name: "Fastmail", value: "fastmail" },
{ name: "Firefox Relay", value: "firefoxrelay" },
{ name: "SimpleLogin", value: "simplelogin" },
];
this.usernameOptions = await this.usernameGenerationService.getOptions();
if (this.usernameOptions.forwardedService == null) {
this.forwardOptions.push({ name: "", value: null });
}
this.forwardOptions = this.forwardOptions.sort((a, b) => a.name.localeCompare(b.name));
}
}