From f63fe9ea7bde06e9d453d524540ed48d07990c91 Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Sat, 26 Dec 2020 19:44:09 -0800
Subject: [PATCH] wip

---
 web/pages/components/config/defaults.ts       |  2 +
 .../components/config/form-textfield.tsx      | 49 +++++++++++++++++--
 .../config/public-facing-details.tsx          | 20 +++++---
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/web/pages/components/config/defaults.ts b/web/pages/components/config/defaults.ts
index 678193934..7e8cd5a68 100644
--- a/web/pages/components/config/defaults.ts
+++ b/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;
\ No newline at end of file
diff --git a/web/pages/components/config/form-textfield.tsx b/web/pages/components/config/form-textfield.tsx
index 146be9713..ec8b696d3 100644
--- a/web/pages/components/config/form-textfield.tsx
+++ b/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} />
\ No newline at end of file
+// // 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>
+  ); 
+}
diff --git a/web/pages/components/config/public-facing-details.tsx b/web/pages/components/config/public-facing-details.tsx
index 3d1ee6f8f..2b785a9ed 100644
--- a/web/pages/components/config/public-facing-details.tsx
+++ b/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>