Moved v3 code from NginxProxyManager/nginx-proxy-manager-3 to NginxProxyManager/nginx-proxy-manager

frontend/src/modals/SetPasswordModal.tsx

@@ -0,0 +1,152 @@
+import {
+	Button,
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Input,
+	Modal,
+	ModalOverlay,
+	ModalContent,
+	ModalHeader,
+	ModalCloseButton,
+	ModalBody,
+	ModalFooter,
+	Stack,
+	useToast,
+} from "@chakra-ui/react";
+import { setAuth } from "api/npm";
+import { PrettyButton } from "components";
+import { Formik, Form, Field } from "formik";
+import { intl } from "locale";
+import { validateString } from "modules/Validations";
+
+interface SetPasswordModalProps {
+	userId: number;
+	isOpen: boolean;
+	onClose: () => void;
+}
+function SetPasswordModal({ userId, isOpen, onClose }: SetPasswordModalProps) {
+	const toast = useToast();
+
+	const onSubmit = async (payload: any, { setSubmitting, setErrors }: any) => {
+		const showErr = (msg: string) => {
+			toast({
+				description: intl.formatMessage({
+					id: `error.${msg}`,
+				}),
+				status: "error",
+				position: "top",
+				duration: 3000,
+				isClosable: true,
+			});
+		};
+
+		try {
+			await setAuth(userId, {
+				type: "password",
+				secret: payload.password,
+			});
+			onClose();
+		} catch (err: any) {
+			if (err.message === "current-password-invalid") {
+				setErrors({
+					current: intl.formatMessage({
+						id: `error.${err.message}`,
+					}),
+				});
+			} else {
+				showErr(err.message);
+			}
+		}
+		setSubmitting(false);
+	};
+
+	return (
+		<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
+			<ModalOverlay />
+			<ModalContent>
+				<Formik
+					initialValues={{}}
+					onSubmit={onSubmit}
+					validate={(values: any) => {
+						const errors = {} as any;
+						if (values.password !== values.password2) {
+							errors.password2 = "New passwords do not match";
+						}
+						return errors;
+					}}>
+					{({ isSubmitting, values }: any) => (
+						<Form>
+							<ModalHeader>
+								{intl.formatMessage({ id: "set-password" })}
+							</ModalHeader>
+							<ModalCloseButton />
+							<ModalBody>
+								<Stack spacing={4}>
+									<Field name="password" validate={validateString(8, 100)}>
+										{({ field, form }: any) => (
+											<FormControl
+												isRequired
+												isInvalid={
+													form.errors.password && form.touched.password
+												}>
+												<FormLabel htmlFor="password">
+													{intl.formatMessage({ id: "password.new" })}
+												</FormLabel>
+												<Input
+													{...field}
+													id="password"
+													type="password"
+													placeholder={intl.formatMessage({
+														id: "password.new",
+													})}
+												/>
+												<FormErrorMessage>
+													{form.errors.password}
+												</FormErrorMessage>
+											</FormControl>
+										)}
+									</Field>
+									<Field name="password2" validate={validateString(8, 100)}>
+										{({ field, form }: any) => (
+											<FormControl
+												isRequired
+												isInvalid={
+													form.errors.password2 && form.touched.password2
+												}>
+												<FormLabel htmlFor="password2">
+													{intl.formatMessage({ id: "password.confirm" })}
+												</FormLabel>
+												<Input
+													{...field}
+													id="password2"
+													type="password"
+													placeholder={intl.formatMessage({
+														id: "password.confirm",
+													})}
+												/>
+												<FormErrorMessage>
+													{form.errors.password2}
+												</FormErrorMessage>
+											</FormControl>
+										)}
+									</Field>
+								</Stack>
+							</ModalBody>
+							<ModalFooter>
+								<PrettyButton mr={3} isLoading={isSubmitting}>
+									{intl.formatMessage({ id: "form.save" })}
+								</PrettyButton>
+								<Button onClick={onClose} isLoading={isSubmitting}>
+									{intl.formatMessage({ id: "form.cancel" })}
+								</Button>
+							</ModalFooter>
+						</Form>
+					)}
+				</Formik>
+			</ModalContent>
+		</Modal>
+	);
+}
+
+export { SetPasswordModal };