Forwarded email providers to username generator (#1628)

* forwarded emails * firefox relay * remove firefox relay * update jslib ref * remove dupe logService
2024-12-27 17:18:04 +01:00 · 2022-05-02 10:32:15 -04:00 · 2022-05-02 10:32:15 -04:00 · 248938ca00
commit 248938ca00
parent 06d95bb224
5 changed files with 111 additions and 29 deletions
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@ -31,13 +31,12 @@
      </app-user-verification>
    </div>
  </div>
-  <button type="submit" class="btn btn-primary" [disabled]="form.loading || exportForm.disabled">
-    <i
-      class="bwi bwi-spinner bwi-spin"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-      *ngIf="form.loading"
-    ></i>
-    <span *ngIf="!form.loading">{{ "exportVault" | i18n }}</span>
+  <button
+    type="submit"
+    class="btn btn-primary btn-submit"
+    [disabled]="form.loading || exportForm.disabled"
+  >
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <span>{{ "exportVault" | i18n }}</span>
  </button>
 </form>
--- a/src/app/tools/generator.component.html
+++ b/src/app/tools/generator.component.html
@ -265,23 +265,82 @@
      </label>
    </div>
  </div>
-  <div class="form-group" role="radiogroup" *ngIf="usernameOptions.type === 'forwarded'">
-    <div class="form-check form-check-inline" *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 }}">
-        {{ o.name }}
-      </label>
+  <ng-container *ngIf="usernameOptions.type === 'forwarded'">
+    <div class="form-group">
+      <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 }}">
+          {{ o.name }}
+        </label>
+      </div>
    </div>
-  </div>
+    <div class="row" *ngIf="usernameOptions.forwardedService === 'simplelogin'">
+      <div class="form-group col-4">
+        <label for="simplelogin-apikey">{{ "apiKey" | i18n }}</label>
+        <input
+          id="simplelogin-apikey"
+          class="form-control"
+          type="password"
+          [(ngModel)]="usernameOptions.forwardedSimpleLoginApiKey"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+      <div class="form-group col-4">
+        <label for="simplelogin-hostname">{{ "hostname" | i18n }}</label>
+        <input
+          id="simplelogin-hostname"
+          class="form-control"
+          type="text"
+          [(ngModel)]="usernameOptions.forwardedSimpleLoginHostname"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+    </div>
+    <div class="row" *ngIf="usernameOptions.forwardedService === 'anonaddy'">
+      <div class="form-group col-4">
+        <label for="anonaddy-apikey">{{ "apiAccessToken" | i18n }}</label>
+        <input
+          id="anonaddy-apikey"
+          class="form-control"
+          type="password"
+          [(ngModel)]="usernameOptions.forwardedAnonAddyApiToken"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+      <div class="form-group col-4">
+        <label for="anonaddy-domain">{{ "domainName" | i18n }}</label>
+        <input
+          id="anonaddy-domain"
+          class="form-control"
+          type="text"
+          [(ngModel)]="usernameOptions.forwardedAnonAddyDomain"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+    </div>
+    <div class="row" *ngIf="usernameOptions.forwardedService === 'firefoxrelay'">
+      <div class="form-group col-4">
+        <label for="firefox-apikey">{{ "apiAccessToken" | i18n }}</label>
+        <input
+          id="firefox-apikey"
+          class="form-control"
+          type="password"
+          [(ngModel)]="usernameOptions.forwardedFirefoxApiToken"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+    </div>
+  </ng-container>
  <div class="row" *ngIf="usernameOptions.type === 'subaddress'">
    <div class="form-group col-4">
      <label for="subaddress-email">{{ "emailAddress" | i18n }}</label>
@ -333,9 +392,15 @@
      </div>
    </div>
  </ng-container>
-  <div>
-    <button type="button" class="btn btn-primary" (click)="regenerate()">
-      {{ "regenerateUsername" | i18n }}
+  <div #form [appApiAction]="usernameGeneratingPromise">
+    <button
+      type="button"
+      class="btn btn-submit btn-primary"
+      (click)="regenerate()"
+      [disabled]="form.loading"
+    >
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <span>{{ "regenerateUsername" | i18n }}</span>
    </button>
    <button type="button" class="btn btn-outline-secondary" (click)="copy()">
      {{ "copyUsername" | i18n }}
--- a/src/app/tools/generator.component.ts
+++ b/src/app/tools/generator.component.ts
@ -26,8 +26,8 @@ export class GeneratorComponent extends BaseGeneratorComponent {
    stateService: StateService,
    platformUtilsService: PlatformUtilsService,
    i18nService: I18nService,
-    route: ActivatedRoute,
    logService: LogService,
+    route: ActivatedRoute,
    private modalService: ModalService
  ) {
    super(
@ -40,6 +40,11 @@ export class GeneratorComponent extends BaseGeneratorComponent {
      route,
      window
    );
+    // Cannot use Firefox Relay on the web vault yet due to CORS issues with Firefox Relay API
+    this.forwardOptions.splice(
+      this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
+      1
+    );
  }

  async history() {
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@ -4894,6 +4894,19 @@
  "service": {
    "message": "Service"
  },
+  "forwardedEmail": {
+    "message": "Forwarded Email Alias"
+  },
+  "forwardedEmailDesc": {
+    "message": "Generate an email alias with an external forwarding service."
+  },
+  "hostname": {
+    "message": "Hostname",
+    "description": "Part of a URL."
+  },
+  "apiAccessToken": {
+    "message": "API Access Token"
+  },
  "unknownCipher": {
    "message": "Unknown Item, you may need to login with another account to access this item."
  }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -205,7 +205,7 @@ const devServer =
              {
                key: "Content-Security-Policy",
                value:
-                  "default-src 'self'; script-src 'self' 'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w=' https://js.stripe.com https://js.braintreegateway.com https://www.paypalobjects.com; style-src 'self' https://assets.braintreegateway.com https://*.paypal.com 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='; img-src 'self' data: https://icons.bitwarden.net https://*.paypal.com https://www.paypalobjects.com https://q.stripe.com https://haveibeenpwned.com https://www.gravatar.com; child-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; frame-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; connect-src 'self' wss://notifications.bitwarden.com https://notifications.bitwarden.com https://cdn.bitwarden.net https://api.pwnedpasswords.com https://2fa.directory/api/v3/totp.json https://api.stripe.com https://www.paypal.com https://api.braintreegateway.com https://client-analytics.braintreegateway.com https://*.braintree-api.com https://*.blob.core.windows.net; object-src 'self' blob:;",
+                  "default-src 'self'; script-src 'self' 'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w=' https://js.stripe.com https://js.braintreegateway.com https://www.paypalobjects.com; style-src 'self' https://assets.braintreegateway.com https://*.paypal.com 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='; img-src 'self' data: https://icons.bitwarden.net https://*.paypal.com https://www.paypalobjects.com https://q.stripe.com https://haveibeenpwned.com https://www.gravatar.com; child-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; frame-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; connect-src 'self' wss://notifications.bitwarden.com https://notifications.bitwarden.com https://cdn.bitwarden.net https://api.pwnedpasswords.com https://2fa.directory/api/v3/totp.json https://api.stripe.com https://www.paypal.com https://api.braintreegateway.com https://client-analytics.braintreegateway.com https://*.braintree-api.com https://*.blob.core.windows.net https://app.simplelogin.io/api/alias/random/new https://app.anonaddy.com/api/v1/aliases; object-src 'self' blob:;",
              },
            ];
          }