add mobile config form

client/src/components/ui/Guide/Guide.tsx

@@ -7,7 +7,7 @@ import { MOBILE_CONFIG_LINKS } from '../../../helpers/constants';
 
 import Tabs from '../Tabs';
 
-import MobileConfigForm from './MobileConfigForm';
+import { MobileConfigForm } from './MobileConfigForm';
 import { RootState } from '../../../initialState';
 
 interface renderLiProps {

client/src/components/ui/Guide/MobileConfigForm.tsx

@@ -1,27 +1,24 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
-import { useSelector } from 'react-redux';
-
-import { Field, reduxForm } from 'redux-form';
+import { useForm } from 'react-hook-form';
 import i18next from 'i18next';
 import cn from 'classnames';
 
 import { getPathWithQueryString } from '../../../helpers/helpers';
-import { CLIENT_ID_LINK, FORM_NAME, MOBILE_CONFIG_LINKS, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
-import { renderInputField, renderSelectField, toNumber } from '../../../helpers/form';
+import { CLIENT_ID_LINK, MOBILE_CONFIG_LINKS, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
+import { toNumber } from '../../../helpers/form';
 import {
     validateConfigClientId,
     validateServerName,
     validatePort,
     validateIsSafePort,
 } from '../../../helpers/validators';
-import { RootState } from '../../../initialState';
 
-const getDownloadLink = (host: any, clientId: any, protocol: any, invalid: any) => {
+const getDownloadLink = (host: string, clientId: string, protocol: string, invalid: boolean) => {
     if (!host || invalid) {
         return (
             <button type="button" className="btn btn-success btn-standard btn-large disabled">
-                <Trans>download_mobileconfig</Trans>
+                {i18next.t('download_mobileconfig')}
             </button>
         );
     }
@@ -36,30 +33,49 @@ const getDownloadLink = (host: any, clientId: any, protocol: any, invalid: any)
         <a
             href={getPathWithQueryString(protocol, linkParams)}
             className={cn('btn btn-success btn-standard btn-large')}
-            download>
-            <Trans>download_mobileconfig</Trans>
+            download
+        >
+            {i18next.t('download_mobileconfig')}
         </a>
     );
 };
 
-interface MobileConfigFormProps {
-    invalid: boolean;
+const githubLink = (
+    <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer">
+        text
+    </a>
+);
+
+type FormValues = {
+    host: string;
+    clientId: string;
+    protocol: string;
+    port?: number;
 }
 
-const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
-    const formValues = useSelector((state: RootState) => state.form[FORM_NAME.MOBILE_CONFIG]?.values);
+type Props = {
+    initialValues?: FormValues;
+}
 
-    if (!formValues) {
-        return null;
-    }
+export const MobileConfigForm = ({ initialValues }: Props) => {
+    const {
+        register,
+        watch,
+        formState: { errors, isValid },
+      } = useForm<FormValues>({
+        mode: 'onChange',
+        defaultValues: {
+          host: initialValues?.host || '',
+          clientId: initialValues?.clientId || '',
+          protocol: initialValues?.protocol || MOBILE_CONFIG_LINKS.DOT,
+          port: initialValues?.port || undefined,
+        },
+    });
 
-    const { host, clientId, protocol, port } = formValues;
-
-    const githubLink = (
-        <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer">
-            text
-        </a>
-    );
+    const protocol = watch('protocol');
+    const host = watch('host');
+    const clientId = watch('clientId');
+    const port = watch('port');
 
     const getHostName = () => {
         if (port && port !== STANDARD_HTTPS_PORT && protocol === MOBILE_CONFIG_LINKS.DOH) {
@@ -79,14 +95,20 @@ const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
                                 {i18next.t('dhcp_table_hostname')}
                             </label>
 
-                            <Field
-                                name="host"
+                            <input
+                                id="host"
                                 type="text"
-                                component={renderInputField}
                                 className="form-control"
                                 placeholder={i18next.t('form_enter_hostname')}
-                                validate={validateServerName}
+                                {...register('host', {
+                                    validate: validateServerName,
+                                })}
                             />
+                            {errors.host && (
+                                <div className="form__message form__message--error">
+                                    {errors.host.message}
+                                </div>
+                            )}
                         </div>
                         {protocol === MOBILE_CONFIG_LINKS.DOH && (
                             <div className="col">
@@ -94,15 +116,25 @@ const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
                                     {i18next.t('encryption_https')}
                                 </label>
 
-                                <Field
-                                    name="port"
+                                <input
+                                    id="port"
                                     type="number"
-                                    component={renderInputField}
                                     className="form-control"
                                     placeholder={i18next.t('encryption_https')}
-                                    validate={[validatePort, validateIsSafePort]}
-                                    normalize={toNumber}
+                                    {...register('port', {
+                                        setValueAs: (val) => toNumber(val),
+                                        validate: {
+                                            range: (value) => validatePort(value) || true,
+                                            safety: (value) => validateIsSafePort(value) || true,
+                                        },
+                                    })}
                                 />
+
+                                {errors.port && (
+                                    <div className="form__message form__message--error">
+                                        {errors.port.message}
+                                    </div>
+                                )}
                             </div>
                         )}
                     </div>
@@ -117,14 +149,21 @@ const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
                         <Trans components={{ a: githubLink }}>client_id_desc</Trans>
                     </div>
 
-                    <Field
-                        name="clientId"
+                    <input
+                        id="clientId"
                         type="text"
-                        component={renderInputField}
                         className="form-control"
                         placeholder={i18next.t('client_id_placeholder')}
-                        validate={validateConfigClientId}
+                        {...register('clientId', {
+                            validate: validateConfigClientId,
+                        })}
                     />
+                    
+                    {errors.clientId && (
+                        <div className="form__message form__message--error">
+                            {errors.clientId.message}
+                        </div>
+                    )}
                 </div>
 
                 <div className="form__group form__group--settings">
@@ -132,17 +171,18 @@ const MobileConfigForm = ({ invalid }: MobileConfigFormProps) => {
                         {i18next.t('protocol')}
                     </label>
 
-                    <Field name="protocol" type="text" component={renderSelectField} className="form-control">
+                    <select
+                        id="protocol"
+                        className="form-control"
+                        {...register('protocol')}
+                    >
                         <option value={MOBILE_CONFIG_LINKS.DOT}>{i18next.t('dns_over_tls')}</option>
-
                         <option value={MOBILE_CONFIG_LINKS.DOH}>{i18next.t('dns_over_https')}</option>
-                    </Field>
+                    </select>
                 </div>
             </div>
 
-            {getDownloadLink(getHostName(), clientId, protocol, invalid)}
+            {getDownloadLink(getHostName(), clientId, protocol, !isValid)}
         </form>
     );
 };
-
-export default reduxForm({ form: FORM_NAME.MOBILE_CONFIG })(MobileConfigForm);

client/src/helpers/validators.ts

@@ -180,7 +180,7 @@ export const validateConfigClientId = (value: any) => {
     }
     const formattedValue = value.trim();
     if (formattedValue && !R_CLIENT_ID.test(formattedValue)) {
-        return 'form_error_client_id_format';
+        return i18next.t('form_error_client_id_format');
     }
     return undefined;
 };
@@ -195,7 +195,7 @@ export const validateServerName = (value: any) => {
     }
     const formattedValue = value ? value.trim() : value;
     if (formattedValue && !R_DOMAIN.test(formattedValue)) {
-        return 'form_error_server_name';
+        return i18next.t('form_error_server_name');
     }
     return undefined;
 };
@@ -239,7 +239,7 @@ export const validateMac = (value: any) => {
  */
 export const validatePort = (value: any) => {
     if ((value || value === 0) && (value < STANDARD_WEB_PORT || value > MAX_PORT)) {
-        return 'form_error_port_range';
+        return i18next.t('form_error_port_range');
     }
     return undefined;
 };
@@ -281,7 +281,7 @@ export const validatePortQuic = validatePortTLS;
  */
 export const validateIsSafePort = (value: any) => {
     if (UNSAFE_PORTS.includes(value)) {
-        return 'form_error_port_unsafe';
+        return i18next.t('form_error_port_unsafe');
     }
     return undefined;
 };