Make continue without passkey a separate component

Author: deepjyoti30-st

lib/ts/recipe/webauthn/components/themes/signUp/continueWithoutPasskey.tsx

@@ -0,0 +1,32 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { withOverride } from "../../../../../components/componentOverride/withOverride";
+import { useTranslation } from "../../../../../translation/translationContext";
+
+export const ContinueWithoutPasskey = withOverride(
+    "continueWithoutPasskey",
+    function ContinueWithoutPasskeyButton(props: { onClick: () => void }): JSX.Element {
+        const t = useTranslation();
+
+        return (
+            <div data-supertokens="continueWithoutPasskey">
+                <a onClick={props.onClick} data-supertokens="formLabelLinkBtn continueWithoutPasskeyLabel">
+                    {t("WEBAUTHN_CONTINUE_WITHOUT_PASSKEY_BUTTON")}
+                </a>
+            </div>
+        );
+    }
+);

lib/ts/recipe/webauthn/components/themes/signUp/signUpForm.tsx

@@ -21,24 +21,19 @@ import { Label } from "../../../../emailpassword/components/library";
 import FormBase from "../../../../emailpassword/components/library/formBase";
 import { defaultEmailValidator } from "../../../../emailpassword/validators";
 
+import { ContinueWithoutPasskey } from "./continueWithoutPasskey";
+
 import type { SignUpFormProps } from "../../../types";
 
 export const SignUpForm = withOverride(
     "PasskeySignUpForm",
-    function PasswordlessEmailForm(
+    function PasskeyEmailForm(
         props: SignUpFormProps & {
             footer?: JSX.Element;
         }
     ): JSX.Element {
         const t = useTranslation();
-
-        const defaultFooter = (
-            <div data-supertokens="continueWithoutPasskey">
-                <a onClick={props.resetFactorList} data-supertokens="formLabelLinkBtn continueWithoutPasskeyLabel">
-                    {t("WEBAUTHN_CONTINUE_WITHOUT_PASSKEY_BUTTON")}
-                </a>
-            </div>
-        );
+        const defaultFooter = <ContinueWithoutPasskey onClick={props.resetFactorList} />;
 
         return (
             <FormBase