feat: add branding prop for customise QR branding (aws-amplify#6333)

* feat: add branding prop for customise QR branding * refactor: move branding to constant * chore: add new constant for TOTP * Update packages/amplify-ui-components/src/components/amplify-totp-setup/amplify-totp-setup.tsx Co-authored-by: Jordan Ranz <[email protected]> * chore(components): renaming prop as suggestion Co-authored-by: Alex Hinson <[email protected]> Co-authored-by: Ashika <[email protected]> Co-authored-by: Jordan Ranz <[email protected]>
abdielou · Jul 27, 2020 · 28efe52 · 28efe52
1 parent 84c620a
commit 28efe52
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/amplify-ui-components/src/common/Translations.ts b/packages/amplify-ui-components/src/common/Translations.ts
@@ -53,6 +53,7 @@ export enum AuthStrings {
   SUCCESS_MFA_TYPE = 'Success! Your MFA Type is now:',
   TOTP_HEADER_TEXT = 'Scan then enter verification code',
   TOTP_LABEL = 'Enter Security Code:',
+  TOTP_ISSUER = 'AWSCognito',
   TOTP_SETUP_FAILURE = 'TOTP Setup has failed',
   TOTP_SUBMIT_BUTTON_TEXT = 'Verify Security Token',
   TOTP_SUCCESS_MESSAGE = 'Setup TOTP successfully!',

diff --git a/packages/amplify-ui-components/src/components/amplify-totp-setup/amplify-totp-setup.tsx b/packages/amplify-ui-components/src/components/amplify-totp-setup/amplify-totp-setup.tsx
@@ -26,7 +26,9 @@ export class AmplifyTOTPSetup {
   /** Auth state change handler for this component */
   @Prop() handleAuthStateChange: AuthStateHandler = dispatchAuthStateChangeEvent;
   /** Used for header text in totp setup component */
-  @Prop() headerText: string = Translations.TOTP_HEADER_TEXT;
+  @Prop() headerText: string = I18n.get(Translations.TOTP_HEADER_TEXT);
+  /** Used for customizing the issuer string in the qr code image */
+  @Prop() issuer: string = I18n.get(Translations.TOTP_ISSUER);
 
   @State() code: string | null = null;
   @State() setupMessage: string | null = null;
@@ -82,7 +84,7 @@ export class AmplifyTOTPSetup {
 
   private async setup() {
     this.setupMessage = null;
-    const issuer = encodeURI('AWSCognito');
+    const encodedIssuer = encodeURI(this.issuer);
 
     if (!Auth || typeof Auth.setupTOTP !== 'function') {
       throw new Error(NO_AUTH_MODULE_FOUND);
@@ -93,7 +95,7 @@ export class AmplifyTOTPSetup {
       const secretKey = await Auth.setupTOTP(this.user);
 
       logger.debug('secret key', secretKey);
-      this.code = this.buildOtpAuthPath(this.user, issuer, secretKey);
+      this.code = this.buildOtpAuthPath(this.user, encodedIssuer, secretKey);
 
       this.generateQRCode(this.code);
     } catch (error) {