From d69ef2b71ed94eae0186bc01334763189c95ae12 Mon Sep 17 00:00:00 2001
From: Spectralitree <spectralitree@gmail.com>
Date: Tue, 13 Apr 2021 20:46:43 +0200
Subject: [PATCH] fix react-hook-form stuffs

---
 package-lock.json            |  5 +++++
 package.json                 |  1 +
 src/App.js                   |  4 ++--
 src/Components/MemberCard.js | 34 +++++++++++++++++-----------------
 src/Components/MemberPage.js | 36 ++++++++++++++++++------------------
 src/Components/Memberlist.js | 30 +++++++++++++++---------------
 src/Components/Public.js     |  2 +-
 src/Components/System.js     | 18 +++++++++---------
 8 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b6248ae1..566117ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12456,6 +12456,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
       "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
     },
+    "react-hook-form": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.0.7.tgz",
+      "integrity": "sha512-PUiiEzAsLoO0hlO9Q3z/smDQ0mgPffL52QhLYvtjK11vDkXUgDc1l3ZXXvdeR4+VGwJNIuhl0bboFkhJN3E+Qg=="
+    },
     "react-icons": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.1.0.tgz",
diff --git a/package.json b/package.json
index 44e594c5..d1627a76 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^7.0.7",
     "react-icons": "^4.1.0",
     "react-lazyload": "^3.1.0",
     "react-moment": "^1.0.0",
diff --git a/src/App.js b/src/App.js
index 4cea5913..5770c846 100644
--- a/src/App.js
+++ b/src/App.js
@@ -58,7 +58,7 @@ export default function App() {
         headers: {
           'Authorization': JSON.stringify(localStorage.getItem("token")).slice(1, -1)
         }}).then ( res => res.json()
-        ).then (data => { 
+        ).then (data => {
           localStorage.setItem('user', JSON.stringify(data));
           setIsSubmit(true);
           setIsLoading(false);
@@ -145,7 +145,7 @@ export default function App() {
             </BS.Form.Row>
             <BS.Form.Row>
               <BS.Col xs={12} lg={10}>
-                <BS.Form.Control required name="pkToken" type="text" ref={register} placeholder="token" />
+                <BS.Form.Control required name="pkToken" type="text" {...register("pkToken")} placeholder="token" />
               </BS.Col>
               <BS.Col>
                 <BS.Button variant="primary" type="submit" block >Submit</BS.Button>
diff --git a/src/Components/MemberCard.js b/src/Components/MemberCard.js
index 71086e20..3f92e672 100644
--- a/src/Components/MemberCard.js
+++ b/src/Components/MemberCard.js
@@ -229,34 +229,34 @@ export default function MemberCard(props) {
                 <BS.Form.Row>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Name:</BS.Form.Label>
-                   <BS.Form.Control name="name" ref={registerEdit} defaultValue={member.name} />
+                   <BS.Form.Control name="name" {...registerEdit("name")} defaultValue={member.name} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Display name: </BS.Form.Label>
-                    <BS.Form.Control name="display_name" ref={registerEdit}  defaultValue={displayName} />
+                    <BS.Form.Control name="display_name" {...registerEdit("display_name")}  defaultValue={displayName} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Birthday:</BS.Form.Label>
-                    <BS.Form.Control  pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" ref={registerEdit}  defaultValue={birthdate}/>
+                    <BS.Form.Control  pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" {...registerEdit("birthday")}  defaultValue={birthdate}/>
                     <BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Pronouns:</BS.Form.Label>
-                    <BS.Form.Control maxLength="100" name="pronouns" ref={registerEdit} defaultValue={editPronouns} />
+                    <BS.Form.Control maxLength="100" name="pronouns" {...registerEdit("pronouns")} defaultValue={editPronouns} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Avatar url:</BS.Form.Label> 
-                  <BS.Form.Control type="url" name="avatar_url" ref={registerEdit}  defaultValue={avatar} />
+                  <BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")}  defaultValue={avatar} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Color:</BS.Form.Label> 
-                   <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" ref={registerEdit}  defaultValue={color} />
+                   <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />
                     <BS.Form.Text>(hexcode)</BS.Form.Text>
                 </BS.Col>
             </BS.Form.Row>
             <BS.Form.Group className="mt-3">
                 <BS.Form.Label>Description:</BS.Form.Label>
-                <BS.Form.Control maxLength="1000" as="textarea" name="description" ref={registerEdit} defaultValue={editDesc}/>
+                <BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} defaultValue={editDesc}/>
             </BS.Form.Group>
             <BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="danger" className="float-right" onClick={() => setOpen(o => !o)}>Delete</BS.Button>
             </BS.Form>
@@ -271,7 +271,7 @@ export default function MemberCard(props) {
                                <p>If you're sure you want to delete this member, please enter the member ID ({member.id}) below.</p>
                                <BS.Form id='Delete' onSubmit={handleSubmitDelete(deleteMember)}>
                                    <BS.Form.Label>Member ID:</BS.Form.Label>
-                                   <BS.Form.Control className="mb-4" name="memberID" ref={registerDelete({required: true})} placeholder={member.id} />
+                                   <BS.Form.Control className="mb-4" name="memberID" {...registerDelete("memberID", {required: true})} placeholder={member.id} />
                                    <BS.Button variant="danger" type="submit">Delete</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
                                </BS.Form>
                            </BS.Card.Body>
@@ -298,49 +298,49 @@ export default function MemberCard(props) {
                     <BS.Form.Row>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                         <BS.Form.Label>Visibility:</BS.Form.Label>
-                        <BS.Form.Control name="visibility" defaultValue={member.visibility} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="visibility" defaultValue={member.visibility} as="select" {...registerPrivacy("visibility")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Name:</BS.Form.Label>
-                        <BS.Form.Control name="name_privacy" defaultValue={member.name_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="name_privacy" defaultValue={member.name_privacy} as="select" {...registerPrivacy("name_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Description:</BS.Form.Label>
-                        <BS.Form.Control name="description_privacy" defaultValue={member.description_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="description_privacy" defaultValue={member.description_privacy} as="select" {...registerPrivacy("description_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Avatar:</BS.Form.Label>
-                        <BS.Form.Control name="avatar_privacy" defaultValue={member.avatar_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="avatar_privacy" defaultValue={member.avatar_privacy} as="select" {...registerPrivacy("avatar_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Birthday:</BS.Form.Label>
-                        <BS.Form.Control name="birthday_privacy" defaultValue={member.birthday_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="birthday_privacy" defaultValue={member.birthday_privacy} as="select" {...registerPrivacy("birthday_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Pronouns:</BS.Form.Label>
-                        <BS.Form.Control name="pronoun_privacy" defaultValue={member.pronoun_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="pronoun_privacy" defaultValue={member.pronoun_privacy} as="select" {...registerPrivacy("pronoun_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-3" xs={12} lg={3}>
                     <BS.Form.Label>Meta:</BS.Form.Label>
-                        <BS.Form.Control name="metadata_privacy" defaultValue={member.metadata_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="metadata_privacy" defaultValue={member.metadata_privacy} as="select" {...registerPrivacy("metadata_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
@@ -370,9 +370,9 @@ export default function MemberCard(props) {
                     <BS.Col key={index} className="mb-lg-2" xs={12} lg={3}>
                         <BS.Form.Row>
                         <BS.InputGroup className="ml-1 mr-1 mb-1">
-                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} ref={registerProxy}/> 
+                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} {...registerProxy(`proxy_tags[${index}].prefix`)}/> 
                         <BS.Form.Control as="textarea" rows="1" disabled placeholder='text'/>
-                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} ref={registerProxy}/>
+                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} {...registerProxy(`proxy_tags[${index}].suffix`)}/>
                         </BS.InputGroup>
                         </BS.Form.Row>
                     </BS.Col>
diff --git a/src/Components/MemberPage.js b/src/Components/MemberPage.js
index e287df94..7fae1ebb 100644
--- a/src/Components/MemberPage.js
+++ b/src/Components/MemberPage.js
@@ -254,34 +254,34 @@ export default function MemberPage(props) {
                 <BS.Form.Row>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Name:</BS.Form.Label>
-                   <BS.Form.Control name="name" ref={registerEdit} defaultValue={member.name} />
+                   <BS.Form.Control name="name" {...registerEdit("name")} defaultValue={member.name} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Display name: </BS.Form.Label>
-                    <BS.Form.Control name="display_name" ref={registerEdit}  defaultValue={displayName} />
+                    <BS.Form.Control name="display_name" {...registerEdit("display_name")}  defaultValue={displayName} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Birthday:</BS.Form.Label>
-                    <BS.Form.Control  pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" ref={registerEdit}  defaultValue={birthdate}/>
+                    <BS.Form.Control  pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" {...registerEdit("birthday")}  defaultValue={birthdate}/>
                     <BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Pronouns:</BS.Form.Label>
-                    <BS.Form.Control maxLength="100" name="pronouns" ref={registerEdit} defaultValue={editPronouns} />
+                    <BS.Form.Control maxLength="100" name="pronouns" {...registerEdit("pronouns")} defaultValue={editPronouns} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Avatar url:</BS.Form.Label> 
-                  <BS.Form.Control type="url" name="avatar_url" ref={registerEdit}  defaultValue={avatar} />
+                  <BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")}  defaultValue={avatar} />
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Color:</BS.Form.Label> 
-                   <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" ref={registerEdit}  defaultValue={color} />
+                   <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />
                     <BS.Form.Text>(hexcode)</BS.Form.Text>
                 </BS.Col>
             </BS.Form.Row>
             <BS.Form.Group className="mt-3">
                 <BS.Form.Label>Description:</BS.Form.Label>
-                <BS.Form.Control maxLength="1000" as="textarea" name="description" ref={registerEdit} defaultValue={editDesc}/>
+                <BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} defaultValue={editDesc}/>
             </BS.Form.Group>
             <BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="danger" className="float-right" onClick={() => setOpen(o => !o)}>Delete</BS.Button>
             </BS.Form>
@@ -296,7 +296,7 @@ export default function MemberPage(props) {
                                <p>If you're sure you want to delete this member, please enter the member ID ({member.id}) below.</p>
                                <BS.Form id='Delete' onSubmit={handleSubmitDelete(deleteMember)}>
                                    <BS.Form.Label>Member ID:</BS.Form.Label>
-                                   <BS.Form.Control className="mb-4" name="memberID" ref={registerDelete({required: true})} placeholder={member.id} />
+                                   <BS.Form.Control className="mb-4" name="memberID" {...registerDelete("memberID", {required: true})} placeholder={member.id} />
                                    <BS.Button variant="danger" type="submit">Delete</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
                                </BS.Form>
                            </BS.Card.Body>
@@ -320,52 +320,52 @@ export default function MemberPage(props) {
             { privacyMode ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>
                 <hr/>
                 <h5>Editing privacy settings</h5>
-                    <BS.Form.Row>
+                <BS.Form.Row>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                         <BS.Form.Label>Visibility:</BS.Form.Label>
-                        <BS.Form.Control name="visibility" defaultValue={member.visibility} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="visibility" defaultValue={member.visibility} as="select" {...registerPrivacy("visibility")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Name:</BS.Form.Label>
-                        <BS.Form.Control name="name_privacy" defaultValue={member.name_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="name_privacy" defaultValue={member.name_privacy} as="select" {...registerPrivacy("name_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Description:</BS.Form.Label>
-                        <BS.Form.Control name="description_privacy" defaultValue={member.description_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="description_privacy" defaultValue={member.description_privacy} as="select" {...registerPrivacy("description_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Avatar:</BS.Form.Label>
-                        <BS.Form.Control name="avatar_privacy" defaultValue={member.avatar_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="avatar_privacy" defaultValue={member.avatar_privacy} as="select" {...registerPrivacy("avatar_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Birthday:</BS.Form.Label>
-                        <BS.Form.Control name="birthday_privacy" defaultValue={member.birthday_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="birthday_privacy" defaultValue={member.birthday_privacy} as="select" {...registerPrivacy("birthday_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Pronouns:</BS.Form.Label>
-                        <BS.Form.Control name="pronoun_privacy" defaultValue={member.pronoun_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="pronoun_privacy" defaultValue={member.pronoun_privacy} as="select" {...registerPrivacy("pronoun_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-3" xs={12} lg={3}>
                     <BS.Form.Label>Meta:</BS.Form.Label>
-                        <BS.Form.Control name="metadata_privacy" defaultValue={member.metadata_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="metadata_privacy" defaultValue={member.metadata_privacy} as="select" {...registerPrivacy("metadata_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
@@ -395,9 +395,9 @@ export default function MemberPage(props) {
                     <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}>
                         <BS.Form.Row>
                         <BS.InputGroup className="ml-1 mr-1 mb-1">
-                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} ref={registerProxy}/> 
+                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} {...registerProxy(`proxy_tags[${index}].prefix`)}/> 
                         <BS.Form.Control as="textarea" rows="1" disabled placeholder='text'/>
-                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} ref={registerProxy}/>
+                        <BS.Form.Control as="textarea" rows="1" name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} {...registerProxy(`proxy_tags[${index}].suffix`)}/>
                         </BS.InputGroup>
                         </BS.Form.Row>
                     </BS.Col>
diff --git a/src/Components/Memberlist.js b/src/Components/Memberlist.js
index 6ca8ffb0..81711ece 100644
--- a/src/Components/Memberlist.js
+++ b/src/Components/Memberlist.js
@@ -279,28 +279,28 @@ export default function Memberlist() {
                             <BS.Form.Row>
                         <BS.Col className="mb-lg-2" xs={12} lg={3}>
                             <BS.Form.Label>Name:</BS.Form.Label>
-                          <BS.Form.Control name="name" ref={register()} defaultValue={''} required/>
+                          <BS.Form.Control name="name"{...register("name")} defaultValue={''} required/>
                         </BS.Col>
                         <BS.Col className="mb-lg-2" xs={12} lg={3}>
                             <BS.Form.Label>Display name: </BS.Form.Label>
-                            <BS.Form.Control name="display_name" ref={register}  defaultValue={''} />
+                            <BS.Form.Control name="display_name" {...register("display_name")}  defaultValue={''} />
                         </BS.Col>
                         <BS.Col className="mb-lg-2" xs={12} lg={3}>
                             <BS.Form.Label>Birthday:</BS.Form.Label>
-                            <BS.Form.Control  pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" ref={register}  defaultValue={''}/>
+                            <BS.Form.Control  pattern="^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$" name="birthday" {...register("birthday")}  defaultValue={''}/>
                             <BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>
                         </BS.Col>
                         <BS.Col className="mb-lg-2" xs={12} lg={3}>
                             <BS.Form.Label>Pronouns:</BS.Form.Label>
-                            <BS.Form.Control name="pronouns" ref={register} defaultValue={''} />
+                            <BS.Form.Control name="pronouns" {...register("pronouns")} defaultValue={''} />
                         </BS.Col>
                         <BS.Col className="mb-lg-2" xs={12} lg={3}>
                             <BS.Form.Label>Avatar url:</BS.Form.Label> 
-                          <BS.Form.Control type="url" name="avatar_url" ref={register}  defaultValue={''} />
+                          <BS.Form.Control type="url" name="avatar_url" {...register("avatar_url")}  defaultValue={''} />
                         </BS.Col>
                         <BS.Col className="mb-lg-2" xs={12} lg={3}>
                             <BS.Form.Label>Color:</BS.Form.Label> 
-                          <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" ref={register}  defaultValue={''} />
+                          <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" {...register("color")}  defaultValue={''} />
                             <BS.Form.Text>(hexcode)</BS.Form.Text>
                         </BS.Col>
                         <BS.Col className="mb-lg-2" xs={12} lg={2}>
@@ -320,9 +320,9 @@ export default function Memberlist() {
                     <BS.Col key={index} className="mb-lg-2" xs={12} lg={2}>
                         <BS.Form.Row>
                         <BS.InputGroup className="ml-1 mr-1 mb-1">
-                        <BS.Form.Control name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} ref={register}/> 
+                        <BS.Form.Control name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} {...register(`proxy_tags[${index}].prefix`)}/> 
                         <BS.Form.Control disabled placeholder='text'/>
-                        <BS.Form.Control name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} ref={register}/>
+                        <BS.Form.Control name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} {...register(`proxy_tags[${index}].suffix`)}/>
                         </BS.InputGroup>
                         </BS.Form.Row>
                     </BS.Col>
@@ -333,42 +333,42 @@ export default function Memberlist() {
                     <BS.Form.Row>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                         <BS.Form.Label>Visibility:</BS.Form.Label>
-                        <BS.Form.Control name="visibility" as="select" ref={register}>
+                        <BS.Form.Control name="visibility" as="select" {...register("visibility")} >
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Name:</BS.Form.Label>
-                        <BS.Form.Control name="name_privacy" as="select" ref={register}>
+                        <BS.Form.Control name="name_privacy" as="select" {...register("name_privacy")} >
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Description:</BS.Form.Label>
-                        <BS.Form.Control name="description_privacy" as="select" ref={register}>
+                        <BS.Form.Control name="description_privacy" as="select" {...register("description_privacy")} >
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Birthday:</BS.Form.Label>
-                        <BS.Form.Control name="birthday_privacy" as="select" ref={register}>
+                        <BS.Form.Control name="birthday_privacy" as="select" {...register("birthday_privacy")} >
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Pronouns:</BS.Form.Label>
-                        <BS.Form.Control name="pronoun_privacy" as="select" ref={register}>
+                        <BS.Form.Control name="pronoun_privacy" as="select" {...register("pronoun_privacy")} >
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-3" xs={12} lg={3}>
                     <BS.Form.Label>Meta:</BS.Form.Label>
-                        <BS.Form.Control name="metadata_privacy" as="select" ref={register}>
+                        <BS.Form.Control name="metadata_privacy" as="select" {...register("metadata_privacy")} >
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
@@ -377,7 +377,7 @@ export default function Memberlist() {
                 <hr/></> : "" }
                 <BS.Form.Group className="mt-3">
                         <BS.Form.Label>Description:</BS.Form.Label>
-                        <BS.Form.Control maxLength="1000" as="textarea" rows="7" name="description" ref={register} defaultValue={''}/>
+                        <BS.Form.Control maxLength="1000" as="textarea" rows="7" name="description" {...register("description")}  defaultValue={''}/>
                     </BS.Form.Group>
                     <BS.Button variant="primary" type="submit">Submit</BS.Button> <BS.Button variant="light" className="float-right" onClick={closeModal}>Cancel</BS.Button>
                     </BS.Form>
diff --git a/src/Components/Public.js b/src/Components/Public.js
index 932e90ba..ba95d61a 100644
--- a/src/Components/Public.js
+++ b/src/Components/Public.js
@@ -29,7 +29,7 @@ export default function Public () {
                     </BS.Form.Label>
                     <BS.Form.Row>
                         <BS.Col className="mb-1"  xs={12} lg={10}>
-                            <BS.Form.Control name="sysID" ref={register} defaultValue="" />
+                            <BS.Form.Control name="sysID" {...register("sysID")} defaultValue="" />
                         </BS.Col>
                         <BS.Col>
                             <BS.Button variant="primary" type="submit" block >Submit</BS.Button>
diff --git a/src/Components/System.js b/src/Components/System.js
index 14c172dc..0d726a4f 100644
--- a/src/Components/System.js
+++ b/src/Components/System.js
@@ -139,25 +139,25 @@ const submitPrivacy = data => {
                 <BS.Form.Row>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Name:</BS.Form.Label>
-               <BS.Form.Control name="name" ref={registerEdit}  defaultValue={name}/>
+               <BS.Form.Control name="name" {...registerEdit("name")}  defaultValue={name}/>
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Tag:</BS.Form.Label>
-                    <BS.Form.Control name="tag" ref={registerEdit}  defaultValue={tag}/>
+                    <BS.Form.Control name="tag" {...registerEdit("tag")}  defaultValue={tag}/>
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Timezone:</BS.Form.Label>
-                    <BS.Form.Control name="tz" ref={registerEdit}  defaultValue={timezone} required/>
+                    <BS.Form.Control name="tz" {...registerEdit("tz")}  defaultValue={timezone} required/>
                     { invalidTimezone ? <BS.Form.Text>Please enter a valid <a href='https://xske.github.io/tz/' rel="noreferrer" target="_blank">timezone</a></BS.Form.Text> : "" }
                 </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Avatar url:</BS.Form.Label> 
-                    <BS.Form.Control name="avatar_url" ref={registerEdit}   defaultValue={avatar}/>
+                    <BS.Form.Control name="avatar_url" {...registerEdit("avatar_url")} defaultValue={avatar}/>
                 </BS.Col>
                 </BS.Form.Row>
                 <BS.Form.Group className="mt-3">
                 <BS.Form.Label>Description:</BS.Form.Label>
-                <BS.Form.Control maxLength="1000" as="textarea" name="description" ref={registerEdit} defaultValue={editDesc}/>
+                <BS.Form.Control maxLength="1000" as="textarea" name="description" {...registerEdit("description")} defaultValue={editDesc}/>
             </BS.Form.Group>
                 <BS.Button variant="light" onClick={() => setEditMode(false)}>Cancel</BS.Button>  <BS.Button variant="primary" type="submit">Submit</BS.Button>
                 </BS.Form> :
@@ -173,28 +173,28 @@ const submitPrivacy = data => {
                     <BS.Form.Row>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                         <BS.Form.Label>Description:</BS.Form.Label>
-                        <BS.Form.Control name="description_privacy" defaultValue={user.description_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="description_privacy" defaultValue={user.description_privacy} as="select" {...registerPrivacy("description_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Member list:</BS.Form.Label>
-                        <BS.Form.Control name="member_list_privacy" defaultValue={user.member_list_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="member_list_privacy" defaultValue={user.member_list_privacy} as="select" {...registerPrivacy("member_list_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Front:</BS.Form.Label>
-                        <BS.Form.Control name="front_privacy" as="select" defaultValue={user.front_privacy} ref={registerPrivacy}>
+                        <BS.Form.Control name="front_privacy" as="select" defaultValue={user.front_privacy} {...registerPrivacy("front_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>
                     </BS.Col>
                     <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Front history:</BS.Form.Label>
-                        <BS.Form.Control name="front_history_privacy" defaultValue={user.front_history_privacy} as="select" ref={registerPrivacy}>
+                        <BS.Form.Control name="front_history_privacy" defaultValue={user.front_history_privacy} as="select" {...registerPrivacy("front_history_privacy")}>
                             <option>public</option>
                             <option>private</option>
                         </BS.Form.Control>