Fix msg for recovery code

Author: lakhansamani

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.15-beta.2",
+  "version": "1.1.15-beta.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/AuthorizerTOTPScanner.tsx

@@ -39,6 +39,7 @@ export const AuthorizerTOTPScanner: FC<{
           phone_number,
           urlProps,
         }}
+        is_totp
       />
     );
   }

src/components/AuthorizerVerifyOtp.tsx

@@ -116,8 +116,6 @@ export const AuthorizerVerifyOtp: FC<{
   useEffect(() => {
     if (formData.otp === '') {
       setErrorData({ ...errorData, otp: 'OTP is required' });
-    } else if (formData.otp && !isValidOtp(formData.otp)) {
-      setErrorData({ ...errorData, otp: 'Please enter valid OTP' });
     } else {
       setErrorData({ ...errorData, otp: null });
     }
@@ -161,6 +159,15 @@ export const AuthorizerVerifyOtp: FC<{
           {errorData.otp && (
             <div className={styles['form-input-error']}>{errorData.otp}</div>
           )}
+          {is_totp && (
+            <Message
+              type={MessageType.Info}
+              text={`If you have lost access to your device, please enter recovery code that were shared while enabling Multifactor Authentication.`}
+              extraStyles={{
+                color: 'var(--authorizer-text-color)',
+              }}
+            />
+          )}
         </div>
         <br />
         <StyledButton

src/components/Message.tsx

@@ -8,12 +8,13 @@ type Props = {
   type: MessageType;
   text: string;
   onClose?: () => void;
+  extraStyles?: Record<string, string>;
 };
 
-export const Message: FC<Props> = ({ type, text, onClose }) => {
+export const Message: FC<Props> = ({ type, text, extraStyles, onClose }) => {
   if (text.trim()) {
     return (
-      <StyledMessageWrapper type={type}>
+      <StyledMessageWrapper type={type} styles={extraStyles}>
         <StyledFlex alignItems="center" justifyContent="space-between">
           <div style={{ flex: 1 }}>{capitalizeFirstLetter(text)}</div>
           {onClose && (

src/constants/index.ts

@@ -12,6 +12,7 @@ export enum ButtonAppearance {
 export enum MessageType {
   Error,
   Success,
+  Info,
 }
 
 export enum AuthorizerProviderActionType {

src/styledComponents/StyledMessageWrapper.tsx

@@ -2,21 +2,34 @@ import React, { ReactNode } from 'react';
 import { MessageType } from '../constants';
 import styles from '../styles/default.css';
 
+const getBackgroundColor = (type: MessageType): string => {
+  switch (type) {
+    case MessageType.Error:
+      return 'var(--authorizer-danger-color)';
+    case MessageType.Success:
+      return 'var(--authorizer-success-color)';
+    case MessageType.Info:
+      return 'var(--authorizer-slate-color)';
+    default:
+      return 'var(--authorizer-success-color)';
+  }
+};
+
 const StyledMessageWrapper = ({
   type = MessageType.Success,
+  styles: extraStyles = {},
   children,
 }: {
   type: MessageType;
   children: ReactNode;
+  styles?: Record<string, string>;
 }) => {
   return (
     <div
       className={styles['styled-message-wrapper']}
       style={{
-        backgroundColor:
-          type === MessageType.Error
-            ? 'var(--authorizer-danger-color)'
-            : 'var(--authorizer-success-color)',
+        backgroundColor: getBackgroundColor(type),
+        ...extraStyles,
       }}
     >
       {children}

src/styles/default.css

@@ -2,6 +2,7 @@
   --authorizer-primary-color: #3b82f6;
   --authorizer-primary-disabled-color: #60a5fa;
   --authorizer-gray-color: #d1d5db;
+  --authorizer-slate-color: #e2e8f0;
   --authorizer-white-color: #ffffff;
   --authorizer-danger-color: #dc2626;
   --authorizer-success-color: #10b981;