Untitled

import React, { useState } from "react";

import { Formik, Form as FormikForm } from "formik";
import { Check, Close } from "neetoicons";
import { Button, Typography } from "neetoui";
import { Input, Checkbox } from "neetoui/formik";

import settingsApi from "apis/settings";
import { useAuthDispatch } from "contexts/auth";

import {
  GENERAL_FORM_VALIDATION_SCHEMA,
  REGEX_PATTERN_ATLEAST_ONE_CHARACTER_AND_NUMBER,
} from "../constants";

const renderHelpText = () => (
  <>
    Customize the site name which is used to show the site name in
    <b> Open Graph Tags.</b>
  </>
);
const renderCheckboxLabel = () => (
  <Typography style="h5">Password Protect Knowledge Base</Typography>
);
const renderPasswordCondition = (condition, message) => {
  const Icon = condition ? (
    <Check color="green" size={18} />
  ) : (
    <Close color="red" size={18} />
  );

  return (
    <div className="mt-0 flex space-x-1">
      {Icon}
      <Typography style="body3">{message}</Typography>
    </div>
  );
};

const Form = ({ settings, refetch }) => {
  const [submitted, setSubmitted] = useState(false);
  const authDispatch = useAuthDispatch();

  const handleSubmit = async values => {
    try {
      const {
        data: { authentication_token },
      } = await settingsApi.update(values);
      if (authentication_token) {
        authDispatch({ type: "LOGIN", authentication_token });
      } else {
        await refetch();
        authDispatch({ type: "LOGOUT" });
      }
    } catch (err) {
      logger.error(err);
    }
  };

  return (
    <Formik
      initialValues={settings}
      validateOnBlur={submitted}
      validateOnChange={submitted}
      validationSchema={GENERAL_FORM_VALIDATION_SCHEMA}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting, values }) => (
        <FormikForm className="my-8 space-y-5">
          <Input
            required
            helpText={renderHelpText()}
            label="Site Name"
            name="site_name"
          />
          <hr />
          <Checkbox
            label={renderCheckboxLabel()}
            name="password_protection_status"
          />
          {values.password_protection_status && (
            <div className="space-y-3">
              <Input
                required
                error=""
                label="Password"
                name="password"
                placeholder="******"
                type="password"
              />
              {renderPasswordCondition(
                values.password.length >= 6,
                "Have atleast 6 characters"
              )}
              {renderPasswordCondition(
                REGEX_PATTERN_ATLEAST_ONE_CHARACTER_AND_NUMBER.test(
                  values.password
                ),
                "Include at least 1 letter and 1 number"
              )}
            </div>
          )}
          <div className="flex space-x-2">
            <Button
              disabled={isSubmitting}
              label="Save Changes"
              loading={isSubmitting}
              size="medium"
              type="submit"
              onClick={() => setSubmitted(true)}
            />
            <Button
              disabled={isSubmitting}
              label="Cancel"
              loading={isSubmitting}
              size="medium"
              style="text"
              type="reset"
            />
          </div>
        </FormikForm>
      )}
    </Formik>
  );
};

export default Form;