Swap

web/apps/photos/src/components/Collections/CollectionShare.tsx

@@ -31,6 +31,10 @@ import {
     RowLabel,
     RowSwitch,
 } from "ente-base/components/RowButton";
+import {
+    SingleInputForm,
+    type SingleInputFormProps,
+} from "ente-base/components/SingleInputForm";
 import { useClipboardCopy } from "ente-base/components/utils/hooks";
 import {
     useModalVisibility,
@@ -52,9 +56,6 @@ import { PublicLinkCreated } from "ente-new/photos/components/share/PublicLinkCr
 import { avatarTextColor } from "ente-new/photos/services/avatar";
 import type { CollectionSummary } from "ente-new/photos/services/collection/ui";
 import { usePhotosAppContext } from "ente-new/photos/types/context";
-import SingleInputForm, {
-    type SingleInputFormProps,
-} from "ente-shared/components/SingleInputForm";
 import { CustomError, parseSharingErrorCodes } from "ente-shared/error";
 import { Formik, type FormikHelpers } from "formik";
 import { t } from "i18next";
@@ -1587,15 +1588,14 @@ const ManageLinkPassword: React.FC<ManageLinkPasswordProps> = ({
     updatePublicShareURLHelper,
 }) => {
     const { showMiniDialog } = useBaseContext();
-    const [changePasswordView, setChangePasswordView] = useState(false);
-
-    const closeConfigurePassword = () => setChangePasswordView(false);
+    const { show: showSetPassword, props: setPasswordVisibilityProps } =
+        useModalVisibility();
 
     const handlePasswordChangeSetting = async () => {
         if (publicShareProp.passwordEnabled) {
             await confirmDisablePublicUrlPassword();
         } else {
-            setChangePasswordView(true);
+            showSetPassword();
         }
     };
 
@@ -1622,36 +1622,36 @@ const ManageLinkPassword: React.FC<ManageLinkPasswordProps> = ({
                 checked={!!publicShareProp?.passwordEnabled}
                 onClick={handlePasswordChangeSetting}
             />
-            <PublicLinkSetPassword
-                open={changePasswordView}
-                onClose={closeConfigurePassword}
+            <SetPublicLinkPassword
+                {...setPasswordVisibilityProps}
                 collection={collection}
                 publicShareProp={publicShareProp}
                 updatePublicShareURLHelper={updatePublicShareURLHelper}
-                setChangePasswordView={setChangePasswordView}
             />
         </>
     );
 };
 
-function PublicLinkSetPassword({
+type SetPublicLinkPasswordProps = ModalVisibilityProps &
+    ManageLinkPasswordProps;
+
+const SetPublicLinkPassword: React.FC<SetPublicLinkPasswordProps> = ({
     open,
     onClose,
     collection,
     publicShareProp,
     updatePublicShareURLHelper,
-    setChangePasswordView,
-}) {
-    const savePassword: SingleInputFormProps["callback"] = async (
+}) => {
+    const savePassword: SingleInputFormProps["onSubmit"] = async (
         passphrase,
         setFieldError,
     ) => {
         if (passphrase && passphrase.trim().length >= 1) {
             await enablePublicUrlPassword(passphrase);
-            setChangePasswordView(false);
             publicShareProp.passwordEnabled = true;
+            onClose();
         } else {
-            setFieldError("can not be empty");
+            setFieldError(t("required"));
         }
     };
 
@@ -1668,10 +1668,10 @@ function PublicLinkSetPassword({
             memLimit: kek.memLimit,
         });
     };
+
     return (
         <Dialog
-            open={open}
-            onClose={onClose}
+            {...{ open, onClose }}
             disablePortal
             slotProps={{
                 // We're being shown within the sidebar drawer, so limit the
@@ -1691,14 +1691,13 @@ function PublicLinkSetPassword({
                     {t("password_lock")}
                 </Typography>
                 <SingleInputForm
-                    callback={savePassword}
-                    placeholder={t("password")}
-                    buttonText={t("lock")}
-                    fieldType="password"
-                    secondaryButtonAction={onClose}
-                    submitButtonProps={{ sx: { mt: 1, mb: 0 } }}
+                    inputType="password"
+                    label={t("password")}
+                    submitButtonTitle={t("lock")}
+                    onCancel={onClose}
+                    onSubmit={savePassword}
                 />
             </Stack>
         </Dialog>
     );
-}
+};