diff --git a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx index 76ab292f..010226a4 100644 --- a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx +++ b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { useForm } from 'react-hook-form'; import { @@ -15,6 +15,7 @@ const SetupDomain = () => { handleSubmit, formState: { isValid }, watch, + setValue, } = useForm({ defaultValues: { domainName: '', @@ -22,6 +23,25 @@ const SetupDomain = () => { }, }); + const [domainStr, setDomainStr] = useState(''); + + useEffect(() => { + const subscription = watch((value, { name }) => { + if (name === 'domainName' && value.domainName) { + const domainArr = value.domainName.split('www.'); + setDomainStr(domainArr.length > 1 ? domainArr[1] : domainArr[0]); + + if (value.domainName.startsWith('www.')) { + setValue('isWWW', 'true'); + } else { + setValue('isWWW', 'false'); + } + } + }); + + return () => subscription.unsubscribe(); + }, [watch]); + return (
{})} @@ -53,14 +73,14 @@ const SetupDomain = () => { Primary domain
{ />
- ^ For simplicity, we’ll redirect the www variant to{' '} - {watch('domainName')}. Redirect preferences can be changed later. + ^ For simplicity, we’ll redirect the{' '} + {watch('isWWW') === 'true' + ? `non-www variant to www.${domainStr}` + : `www variant to ${domainStr}`} + . Redirect preferences can be changed later )}