portainer/app/react/components/TLSFieldset/TLSFieldset.tsx

import { FormikErrors } from 'formik';
import { SchemaOf, boolean, object } from 'yup';

import { file, withFileSize } from '@@/form-components/yup-file-validation';
import { FileUploadField } from '@@/form-components/FileUpload';
import { SwitchField } from '@@/form-components/SwitchField';
import { FormControl } from '@@/form-components/FormControl';

import { TLSConfig } from './types';

interface Props {
  values: TLSConfig;
  onChange: (value: Partial<TLSConfig>) => void;
  errors?: FormikErrors<TLSConfig>;
}

export function TLSFieldset({ values, onChange, errors }: Props) {
  return (
    <>
      <div className="form-group">
        <div className="col-sm-12">
          <SwitchField
            label="TLS"
            labelClass="col-sm-3 col-lg-2"
            checked={values.tls}
            onChange={(checked) => handleChange({ tls: checked })}
          />
        </div>
      </div>

      {values.tls && (
        <>
          <div className="form-group">
            <div className="col-sm-12">
              <SwitchField
                label="Skip Certification Verification"
                checked={!!values.skipVerify}
                onChange={(checked) => handleChange({ skipVerify: checked })}
                labelClass="col-sm-3 col-lg-2"
              />
            </div>
          </div>

          {!values.skipVerify && (
            <>
              <FormControl
                label="TLS CA certificate"
                inputId="ca-cert-field"
                errors={errors?.caCertFile}
              >
                <FileUploadField
                  inputId="ca-cert-field"
                  onChange={(file) => handleChange({ caCertFile: file })}
                  value={values.caCertFile}
                />
              </FormControl>
              <FormControl
                label="TLS certificate"
                inputId="cert-field"
                errors={errors?.certFile}
              >
                <FileUploadField
                  inputId="cert-field"
                  onChange={(file) => handleChange({ certFile: file })}
                  value={values.certFile}
                />
              </FormControl>
              <FormControl
                label="TLS key"
                inputId="tls-key-field"
                errors={errors?.keyFile}
              >
                <FileUploadField
                  inputId="tls-key-field"
                  onChange={(file) => handleChange({ keyFile: file })}
                  value={values.keyFile}
                />
              </FormControl>
            </>
          )}
        </>
      )}
    </>
  );

  function handleChange(partialValue: Partial<TLSConfig>) {
    onChange(partialValue);
  }
}

const MAX_FILE_SIZE = 5_242_880; // 5MB

function certValidation(optional?: boolean) {
  return withFileSize(file(), MAX_FILE_SIZE).when(['tls', 'skipVerify'], {
    is: (tls: boolean, skipVerify: boolean) => tls && !skipVerify && !optional,
    then: (schema) => schema.required('File is required'),
  });
}

export function tlsConfigValidation({
  optionalCert,
}: { optionalCert?: boolean } = {}): SchemaOf<TLSConfig> {
  return object({
    tls: boolean().default(false),
    skipVerify: boolean().default(false),
    caCertFile: certValidation(optionalCert),
    certFile: certValidation(optionalCert),
    keyFile: certValidation(optionalCert),
  });
}