feat: add instructions to bot create form

Author: beeman

libs/web/bot/ui/src/lib/user-bot-server-ui-update-form.tsx

@@ -7,10 +7,6 @@ import { ReactNode } from 'react'
 import { DiscordUiChannelSelect } from './discord-ui-channel-select'
 import { DiscordUiRoleSelect } from './discord-ui-role-select'
 
-export interface GroupedOption {
-  group: string
-  data: { value: string; label: string }[]
-}
 export function UserBotServerUiUpdateForm({
   children,
   submit,
@@ -40,11 +36,7 @@ export function UserBotServerUiUpdateForm({
   })
 
   return (
-    <form
-      onSubmit={form.onSubmit((values) => {
-        return submit(values)
-      })}
-    >
+    <form onSubmit={form.onSubmit((values) => submit(values))}>
       <UiStack>
         <DiscordUiRoleSelect
           label="Admin Role"

libs/web/bot/ui/src/lib/user-bot-ui-create-form.tsx

@@ -1,25 +1,54 @@
-import { Button, Group } from '@mantine/core'
+import { Anchor, Button, Group, Text, TextInput } from '@mantine/core'
+import { useForm } from '@mantine/form'
 import { UserCreateBotInput } from '@pubkey-link/sdk'
-import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core'
+import { UiInfo, UiStack } from '@pubkey-ui/core'
 
 export function UserBotUiCreateForm({ submit }: { submit: (res: UserCreateBotInput) => Promise<boolean> }) {
-  const model: UserCreateBotInput = {
-    token: '',
-    clientId: '',
-    clientSecret: '',
-    communityId: '',
-  }
+  const form = useForm<UserCreateBotInput>({
+    initialValues: {
+      clientId: '',
+      clientSecret: '',
+      communityId: '',
+      token: '',
+    },
+  })
 
-  const fields: UiFormField<UserCreateBotInput>[] = [
-    formFieldText('token', { label: 'Token', required: true }),
-    formFieldText('clientId', { label: 'Client ID', required: true }),
-    formFieldText('clientSecret', { label: 'Client Secret', required: true }),
-  ]
   return (
-    <UiForm model={model} fields={fields} submit={(res) => submit(res as UserCreateBotInput)}>
-      <Group justify="right">
-        <Button type="submit">Create</Button>
-      </Group>
-    </UiForm>
+    <form onSubmit={form.onSubmit((values) => submit(values))}>
+      <UiStack>
+        <Text span size="lg">
+          Create an app in the{' '}
+          <Anchor target="_blank" rel="noopener noreferrer" href="https://discord.com/developers/applications">
+            Discord Developer Portal
+          </Anchor>{' '}
+          or use an existing one.
+        </Text>
+
+        <TextInput
+          label="Discord Client ID"
+          description="Copy the CLIENT ID value from the OAuth2 section of your app."
+          placeholder="123456789987654321"
+          {...form.getInputProps('clientId')}
+        />
+        <TextInput
+          label="Discord Client Secret"
+          description="Copy the CLIENT SECRET value from OAuth2 section of your app."
+          placeholder="ABCDEFGHIJKL-MNOPQRSTUVWXYZ"
+          {...form.getInputProps('clientSecret')}
+        />
+        <TextInput
+          label="Discord Bot Token"
+          description="Copy the TOKEN value from the Bot section of your app."
+          placeholder="ABCDEFGHIJKLMNOPQRSTUVWXYZ.12345.ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+          {...form.getInputProps('token')}
+        />
+
+        <UiInfo message="Make sure to enable the 'SERVER MEMBERS INTENT' option in the bot settings." />
+
+        <Group justify="right">
+          <Button type="submit">Create</Button>
+        </Group>
+      </UiStack>
+    </form>
   )
 }