Add custom domains (#314)

app/javascript/actions/Tenant/updateTenant.ts

@@ -50,6 +50,7 @@ interface UpdateTenantParams {
   siteLogo?: string;
   tenantSetting?: ITenantSetting;
   locale?: string;
+  customDomain?: string;
   authenticityToken: string;
 }
 
@@ -58,6 +59,7 @@ export const updateTenant = ({
   siteLogo = null,
   tenantSetting = null,
   locale = null,
+  customDomain = null,
   authenticityToken,
 }: UpdateTenantParams): ThunkAction<void, State, null, Action<string>> => async (dispatch) => {
   dispatch(tenantUpdateStart());
@@ -65,7 +67,8 @@ export const updateTenant = ({
   const tenant = Object.assign({},
     siteName !== null ? { site_name: siteName } : null,
     siteLogo !== null ? { site_logo: siteLogo } : null,
-    locale !== null ? { locale } : null
+    locale !== null ? { locale } : null,
+    customDomain !== null ? { custom_domain: customDomain } : null,
   );
 
   try {

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>
           

app/javascript/containers/GeneralSiteSettings.tsx

@@ -17,6 +17,7 @@ const mapDispatchToProps = (dispatch: any) => ({
     brandDisplaySetting: TenantSettingBrandDisplay,
     locale: string,
     rootBoardId: number,
+    customDomain: string,
     showRoadmapInHeader: boolean,
     collapseBoardsInHeader: TenantSettingCollapseBoardsInHeader,
     showVoteCount: boolean,
@@ -37,6 +38,7 @@ const mapDispatchToProps = (dispatch: any) => ({
         collapse_boards_in_header: collapseBoardsInHeader,
       },
       locale,
+      customDomain,
       authenticityToken,
     }));
   },

app/javascript/interfaces/ITenant.ts

@@ -3,6 +3,7 @@ interface ITenant {
   siteName: string;
   siteLogo: string;
   locale: string;
+  customDomain?: string;
 }
 
 export default ITenant;

app/javascript/interfaces/json/ITenant.ts

@@ -4,6 +4,7 @@ interface ITenantJSON {
   site_logo: string;
   brand_display_setting: string;
   locale: string;
+  custom_domain?: string;
 }
 
 export default ITenantJSON;