bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 07:43:35 +00:00
Code Issues Releases Wiki Activity

Add a copy button to browser ext about dialog (#13465)

Browse Source 
Add a copy button to browser extension about dialog for quickly copying the version number now that we have 3 different values we'd like to collect.
This commit is contained in:
Oscar Hinton
2025-02-20 09:48:31 +01:00
committed by GitHub
parent 2425cda4d7
commit aa2b0a9fe8
3 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/browser/src/_locales/en/messages.json
View File

@@ -176,6 +176,10 @@
"copyNotes": {
"message": "Copy notes"
},
"copy": {
"message": "Copy",
"description": "Copy to clipboard"
},
"fill":{
"message": "Fill",
"description": "This string is used on the vault page to indicate autofilling. Horizontal space is limited in the interface here so try and keep translations as concise as possible."

56
apps/browser/src/tools/popup/settings/about-dialog/about-dialog.component.html
View File

@@ -5,43 +5,49 @@
<div bitDialogTitle>Bitwarden</div>
<div bitDialogContent>
<p>&copy; Bitwarden Inc. 2015-{{ year }}</p>
<p class="user-select">{{ "version" | i18n }}: {{ version$ | async }}</p>
<p class="user-select">SDK: {{ sdkVersion$ | async }}</p>
<ng-container *ngIf="data$ | async as data">
<p *ngIf="data.isCloud">
{{ "serverVersion" | i18n }}: {{ data.serverConfig?.version }}
<span *ngIf="!data.serverConfig.isValid()">
({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
</span>
</p>
<ng-container *ngIf="!data.isCloud">
<ng-container *ngIf="data.serverConfig.server">
<p class="user-select">
{{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
<div #version class="user-select">
<p>{{ "version" | i18n }}: {{ version$ | async }}</p>
<p>SDK: {{ sdkVersion$ | async }}</p>
<ng-container *ngIf="data$ | async as data">
<p *ngIf="data.isCloud">
{{ "serverVersion" | i18n }}: {{ data.serverConfig?.version }}
<span *ngIf="!data.serverConfig.isValid()">
({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
</span>
</p>
<ng-container *ngIf="!data.isCloud">
<ng-container *ngIf="data.serverConfig.server">
<p>
{{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
{{ data.serverConfig?.version }}
<span *ngIf="!data.serverConfig.isValid()">
({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
</span>
</p>
<div>
<small>{{ "thirdPartyServerMessage" | i18n: data.serverConfig.server?.name }}</small>
</div>
</ng-container>
<p *ngIf="!data.serverConfig.server">
{{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
{{ data.serverConfig?.version }}
<span *ngIf="!data.serverConfig.isValid()">
({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
</span>
</p>
<div>
<small>{{ "thirdPartyServerMessage" | i18n: data.serverConfig.server?.name }}</small>
</div>
</ng-container>
<p class="user-select" *ngIf="!data.serverConfig.server">
{{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
{{ data.serverConfig?.version }}
<span *ngIf="!data.serverConfig.isValid()">
({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
</span>
</p>
</ng-container>
</ng-container>
</div>
</div>
<div bitDialogFooter>
<button bitButton bitDialogClose buttonType="primary" type="button">
{{ "close" | i18n }}
</button>
<button bitButton type="button" (click)="copyVersion()">
{{ "copy" | i18n }}
</button>
</div>
</bit-simple-dialog>

22
apps/browser/src/tools/popup/settings/about-dialog/about-dialog.component.ts
View File

@@ -1,20 +1,24 @@
import { DialogRef } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { Component, ElementRef, ViewChild } from "@angular/core";
import { Observable, combineLatest, defer, map } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { SdkService } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
import { ButtonModule, DialogModule } from "@bitwarden/components";
import { ButtonModule, DialogModule, ToastService, TypographyModule } from "@bitwarden/components";
@Component({
templateUrl: "about-dialog.component.html",
standalone: true,
imports: [CommonModule, JslibModule, DialogModule, ButtonModule],
imports: [CommonModule, JslibModule, DialogModule, ButtonModule, TypographyModule],
})
export class AboutDialogComponent {
@ViewChild("version") protected version!: ElementRef;
protected year = new Date().getFullYear();
protected version$: Observable<string>;
@@ -26,11 +30,23 @@ export class AboutDialogComponent {
protected sdkVersion$ = this.sdkService.version$;
constructor(
private dialogRef: DialogRef,
private configService: ConfigService,
private environmentService: EnvironmentService,
private platformUtilsService: PlatformUtilsService,
private toastService: ToastService,
private i18nService: I18nService,
private sdkService: SdkService,
) {
this.version$ = defer(() => this.platformUtilsService.getApplicationVersion());
}
protected copyVersion() {
this.platformUtilsService.copyToClipboard(this.version.nativeElement.innerText);
this.toastService.showToast({
message: this.i18nService.t("copySuccessful"),
variant: "success",
});
this.dialogRef.close();
}
}