wip

web/pages/components/config/defaults.ts

@@ -3,3 +3,5 @@
 export const DEFAULT_NAME = 'Owncast User';
 export const DEFAULT_TITLE = 'Owncast Server';
 export const DEFAULT_SUMMARY = '';
+
+export const TEXT_MAXLENGTH = 255;

web/pages/components/config/form-textfield.tsx

@@ -1,5 +1,5 @@
 /*
-- auto saves ,ajax call
+- auto saves ,ajax call (submit when blur or onEnter)
 - set default text
 - show error state/confirm states
 - show info
@@ -16,10 +16,49 @@ update vals to state, andthru api.
 
 
 */
-import React, { useContext } from 'react';
-import { ServerStatusContext } from '../../../utils/server-status-context';
+import React from 'react';
+import { Form, Input } from 'antd';
 
 
+interface TextFieldProps {
+  onSubmit: (value: string) => void;
+  label: string;
+  defaultValue: string;
+  value: string;
+  helpInfo: string;
+  maxLength: number;
+  type: string;
+}
 
-Server Name
-<Input placeholder="Owncast" value={name} />
+// // do i need this?
+// export const initialProps: TextFieldProps = {
+// }
+
+export const TEXTFIELD_TYPE_TEXT = 'default';
+export const TEXTFIELD_TYPE_PASSWORD = 'password'; //Input.Password
+export const TEXTFIELD_TYPE_NUMBER = 'numeric';
+
+export default function TextField(props: TextFieldProps) {
+  const {
+    label,
+    defaultValue,
+    value,
+    onSubmit,
+    helpInfo,
+    maxLength,
+    type,
+  } = props;
+  
+  return (
+    <div className="textfield">
+      <Form.Item
+        label={label}
+        hasFeedback
+        validateStatus="error"
+        help="Should be combination of numbers & alphabets"
+      >
+       <Input placeholder="Owncast" value={value} />
+      </Form.Item>
+    </div>
+  ); 
+}

web/pages/components/config/public-facing-details.tsx

@@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
-import { Typography, Input } from 'antd';
+import { Typography, Input, Form } from 'antd';
+
+import TextField from './form-textfield';
 
 
 import { ServerStatusContext } from '../../../utils/server-status-context';
@@ -18,16 +20,18 @@ export default function PublicFacingDetails() {
     <>
       <Title level={2}>Edit your public facing instance details</Title>
       <div className="config-public-details-container">
-        <div className="text-fields" role="form">
-            Server Name
-            <Input placeholder="Owncast" value={name} />
-
-
+        <div className="text-fields">
+          <Form name="text-fields" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+            <TextField
+              label="name"
+              value={name}
+            />
+          </Form>
         </div>
         <div className="misc-optionals">
-          add social handles
+          add social handles comp
           <br/>
-          add tags 
+          add tags comp
           
         </div>
       </div>