Add custom domains (#314)

app/javascript/components/SiteSettings/General/GeneralSiteSettingsP.tsx

@@ -17,6 +17,8 @@ import {
 import { DangerText, SmallMutedText } from '../../common/CustomTexts';
 import { getLabel, getValidationMessage } from '../../../helpers/formUtils';
 import IBoardJSON from '../../../interfaces/json/IBoard';
+import ActionLink from '../../common/ActionLink';
+import { LearnMoreIcon } from '../../common/Icons';
 
 export interface ISiteSettingsGeneralForm {
   siteName: string;
@@ -27,6 +29,7 @@ export interface ISiteSettingsGeneralForm {
   showVoteButtonInBoard: boolean;
   showPoweredBy: boolean;
   rootBoardId?: string;
+  customDomain?: string;
   showRoadmapInHeader: boolean;
   collapseBoardsInHeader: string;
 }
@@ -45,6 +48,7 @@ interface Props {
     brandDisplaySetting: string,
     locale: string,
     rootBoardId: number,
+    customDomain: string,
     showRoadmapInHeader: boolean,
     collapseBoardsInHeader: string,
     showVoteCount: boolean,
@@ -66,7 +70,8 @@ const GeneralSiteSettingsP = ({
   const {
     register,
     handleSubmit,
-    formState: { isDirty, isSubmitSuccessful, errors }
+    formState: { isDirty, isSubmitSuccessful, errors },
+    watch,
   } = useForm<ISiteSettingsGeneralForm>({
     defaultValues: {
       siteName: originForm.siteName,
@@ -77,6 +82,7 @@ const GeneralSiteSettingsP = ({
       showVoteButtonInBoard: originForm.showVoteButtonInBoard,
       showPoweredBy: originForm.showPoweredBy,
       rootBoardId: originForm.rootBoardId,
+      customDomain: originForm.customDomain,
       showRoadmapInHeader: originForm.showRoadmapInHeader,
       collapseBoardsInHeader: originForm.collapseBoardsInHeader,
     },
@@ -89,6 +95,7 @@ const GeneralSiteSettingsP = ({
       data.brandDisplaySetting,
       data.locale,
       Number(data.rootBoardId),
+      data.customDomain,
       data.showRoadmapInHeader,
       data.collapseBoardsInHeader,
       data.showVoteCount,
@@ -101,6 +108,8 @@ const GeneralSiteSettingsP = ({
     });
   };
 
+  const customDomain = watch('customDomain');
+
   return (
     <>
       <Box>
@@ -186,6 +195,29 @@ const GeneralSiteSettingsP = ({
             </select>
           </div>
 
+          <div className="formGroup">
+            <label htmlFor="customDomain">{ getLabel('tenant', 'custom_domain') }</label>
+            <input
+              {...register('customDomain')}
+              id="customDomain"
+              className="formControl"
+            />
+            {
+              originForm.customDomain !== customDomain && customDomain !== '' &&
+              <div style={{marginTop: 16}}>
+                <SmallMutedText>
+                  { I18n.t('site_settings.general.custom_domain_help', { domain: customDomain }) }
+                </SmallMutedText>
+                <ActionLink
+                  onClick={() => window.open('https://docs.astuto.io/custom-domain', '_blank')}
+                  icon={<LearnMoreIcon />}
+                >
+                  {I18n.t('site_settings.general.custom_domain_learn_more')}
+                </ActionLink>
+              </div>
+            }
+          </div>
+
           <br />
           <h4>{ I18n.t('site_settings.general.subtitle_header') }</h4>