Forwarded email providers to username generator (#1628)

* forwarded emails

* firefox relay

* remove firefox relay

* update jslib ref

* remove dupe logService

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>

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 }}

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() {

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."
   }

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:;",
               },
             ];
           }