wip Custom Domain form for Territory Edit; fix endpoint typo; upsert customDomain resolver

Author: Soxasora

api/resolvers/sub.js

@@ -1,5 +1,5 @@
 import { whenRange } from '@/lib/time'
-import { validateSchema, territorySchema } from '@/lib/validate'
+import { validateSchema, validateDomain, territorySchema } from '@/lib/validate'
 import { decodeCursor, LIMIT, nextCursorEncoded } from '@/lib/cursor'
 import { viewGroup } from './growth'
 import { notifyTerritoryTransfer } from '@/lib/webPush'
@@ -277,6 +277,35 @@ export default {
       }
 
       return await performPaidAction('TERRITORY_UNARCHIVE', data, { me, models, lnd })
+    },
+    updateCustomDomain: async (parent, { subName, domain }, { me, models }) => {
+      if (!me) {
+        throw new GqlAuthenticationError()
+      }
+
+      const sub = await models.sub.findUnique({ where: { name: subName } })
+      if (!sub) {
+        throw new GqlInputError('sub not found')
+      }
+
+      if (sub.userId !== me.id) {
+        throw new GqlInputError('you do not own this sub')
+      }
+      domain = domain.trim()
+      if (domain && !validateDomain(domain)) {
+        throw new GqlInputError('Invalid domain format')
+      }
+
+      if (domain) {
+        const existing = await models.customDomain.findUnique({ where: { subName } })
+        if (existing) {
+          return await models.customDomain.update({ where: { subName }, data: { domain, verificationState: 'PENDING' } })
+        } else {
+          return await models.customDomain.create({ data: { domain, subName, verificationState: 'PENDING' } })
+        }
+      } else {
+        return await models.customDomain.delete({ where: { subName } })
+      }
     }
   },
   Sub: {

api/typeDefs/sub.js

@@ -39,6 +39,7 @@ export default gql`
       replyCost: Int!, postTypes: [String!]!,
       billingType: String!, billingAutoRenew: Boolean!,
       moderated: Boolean!, nsfw: Boolean!): SubPaidAction!
+    updateCustomDomain(subName: String!, domain: String!): CustomDomain
   }
 
   type Sub {

components/territory-domains.js

@@ -0,0 +1,94 @@
+import { useState } from 'react'
+import { Badge } from 'react-bootstrap'
+import { Form, Input, SubmitButton } from './form'
+import { gql, useMutation } from '@apollo/client'
+import Info from './info'
+
+const UPDATE_CUSTOM_DOMAIN = gql`
+  mutation UpdateCustomDomain($subName: String!, $domain: String!) {
+    updateCustomDomain(subName: $subName, domain: $domain) {
+      domain
+      verificationState
+      lastVerifiedAt
+    }
+  }
+`
+
+export default function CustomDomainForm ({ sub }) {
+  const [updateCustomDomain] = useMutation(UPDATE_CUSTOM_DOMAIN)
+  const [error, setError] = useState(null)
+  const [success, setSuccess] = useState(false)
+
+  const onSubmit = async ({ domain }) => {
+    setError(null)
+    setSuccess(false)
+    console.log('domain', domain)
+
+    const { data } = await updateCustomDomain({
+      variables: {
+        subName: sub.name,
+        domain
+      }
+    })
+    console.log('success', data)
+    setSuccess(true)
+  }
+
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case 'VERIFIED':
+        return <Badge bg='success'>verified</Badge>
+      case 'PENDING':
+        return <Badge bg='warning'>pending</Badge>
+      case 'FAILED':
+        return <Badge bg='danger'>failed</Badge>
+    }
+  }
+
+  return (
+    <Form
+      initial={{
+        domain: sub?.customDomain?.domain || ''
+      }}
+      onSubmit={onSubmit}
+      className='mb-2'
+    >
+      <div className='d-flex align-items-center gap-2'>
+        <Input
+          label={
+            <div className='d-flex align-items-center'>
+              <span>domain</span>
+              {error && <Info variant='danger'>error</Info>}
+              {success && <Info variant='success'>Domain settings updated successfully!</Info>}
+              {sub?.customDomain && (
+                <div className='d-flex align-items-center gap-2'>
+                  {getStatusBadge(sub.customDomain.verificationState)}
+                  <span className='text-muted'>
+                    {sub.customDomain.lastVerifiedAt &&
+                    ` (Last checked: ${new Date(sub.customDomain.lastVerifiedAt).toLocaleString()})`}
+                  </span>
+
+                  {sub.customDomain.verificationState === 'PENDING' && (
+                    <Info>
+                      <h6>Verify your domain</h6>
+                      <p>Add the following DNS records to verify ownership of your domain:</p>
+                      <pre>
+                        CNAME record:
+                        Host: @
+                        Value: stacker.news
+                      </pre>
+                    </Info>
+                  )}
+                </div>
+              )}
+            </div>
+          }
+          name='domain'
+          placeholder='example.com'
+        />
+        {/* TODO: toaster */}
+        <SubmitButton variant='primary' className='mt-3'>save</SubmitButton>
+      </div>
+    </Form>
+  )
+}

components/territory-form.js

@@ -14,6 +14,7 @@ import { purchasedType } from '@/lib/territory'
 import { SUB } from '@/fragments/subs'
 import { usePaidMutation } from './use-paid-mutation'
 import { UNARCHIVE_TERRITORY, UPSERT_SUB } from '@/fragments/paidAction'
+import TerritoryDomains from './territory-domains'
 
 export default function TerritoryForm ({ sub }) {
   const router = useRouter()
@@ -276,25 +277,7 @@ export default function TerritoryForm ({ sub }) {
                 name='nsfw'
                 groupClassName='ms-1'
               />
-              <Input
-                label={
-                  <div className='d-flex align-items-center'>[NOT IMPLEMENTED] custom domain
-                    <Info>
-                      <ol>
-                        <li>TODO Immediate infos on Custom Domains</li>
-                      </ol>
-                    </Info>
-                  </div>
-                }
-                name='customDomain'
-                type='text'
-                required
-                append={
-                  <>
-                    <InputGroup.Text className='text-monospace'>{sub?.customDomain?.verificationState || 'not verified'}</InputGroup.Text>
-                  </>
-                }
-              />
+              <TerritoryDomains sub={sub} />
               {sub?.customDomain?.verificationState === 'VERIFIED' &&
                 <>
                   <BootstrapForm.Label>[NOT IMPLEMENTED] branding</BootstrapForm.Label>

lib/validate.js

@@ -323,10 +323,7 @@ export function territorySchema (args) {
       .max(100000, 'must be at most 100k'),
     postTypes: array().of(string().oneOf(POST_TYPES)).min(1, 'must support at least one post type'),
     billingType: string().required('required').oneOf(TERRITORY_BILLING_TYPES, 'required'),
-    nsfw: boolean(),
-    customDomain: string().matches(/^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/, {
-      message: 'enter a valid domain name (e.g., example.com)'
-    }).nullable()
+    nsfw: boolean()
   })
 }
 
@@ -349,6 +346,15 @@ export function territoryTransferSchema ({ me, ...args }) {
   })
 }
 
+// TODO: validate domain
+export function customDomainSchema (args) {
+  return object({
+    customDomain: string().matches(/^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/, {
+      message: 'enter a valid domain name (e.g., example.com)'
+    }).nullable()
+  })
+}
+
 export function userSchema (args) {
   return object({
     name: nameValidator

middleware.js

@@ -17,7 +17,7 @@ const NO_REWRITE_PATHS = ['/api', '/_next', '/_error', '/404', '/500', '/offline
 
 // fetch custom domain mappings from our API, caching it for 5 minutes
 const getDomainMappingsCache = cachedFetcher(async function fetchDomainMappings () {
-  const url = `${process.env.NEXT_PUBLIC_URL}/api/domains/map`
+  const url = `${process.env.NEXT_PUBLIC_URL}/api/domains`
   try {
     const response = await fetch(url)
     if (!response.ok) {
@@ -49,6 +49,7 @@ export async function customDomainMiddleware (request, referrerResp) {
   console.log('referer', referer)
 
   const domainMapping = await getDomainMappingsCache()
+  console.log('domainMapping', domainMapping)
   const domainInfo = domainMapping?.[host.toLowerCase()]
   if (!domainInfo) {
     return NextResponse.redirect(new URL(pathname, mainDomain))