more

src/Components/SignupPage/SignupPage.js

@@ -23,9 +23,8 @@ import "../../styles/signup.scss";
 const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
-
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 440);
   const fieldsChunkSize = 2;
-
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
 
@@ -113,14 +112,35 @@ const SignupPage = () => {
     }
   };
 
-  return (
-    <div className="signup-super-container">
-      <div className="signup-sub-container">
-        <div className="signup-header">
-          <h1 className="signup-header-text">Create a Novodraft account</h1>
-        </div>
-        <Form className="signup-form">
-          {splitEvery(
+  const MobileForm = () => {
+    return splitEvery(
+      Object.keys(signupfields).slice(0, -2),
+      fieldsChunkSize
+    ).map((names, j) => (
+      <Col key={`row${j}`}>
+        {names.map((name, i) => (
+          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+            <TextInput
+              name={name}
+              value={data[name].value}
+              onChange={(e) => handleChangeInput(e, name)}
+              error={data[name].error}
+              message={data[name].message}
+              label={
+                data[name].value.length === 0 ? signupfields[name].label : ""
+              }
+              type={signupfields[name].type}
+              values={signupfields[name].values}
+              disabled={isBusy}
+            />
+          </Col>
+        ))}
+      </Col>
+    ));
+  };
+
+  const DesktopForm = () => {
+    return splitEvery(
       Object.keys(signupfields).slice(0, -2),
       fieldsChunkSize
     ).map((names, j) => (
@@ -134,9 +154,7 @@ const SignupPage = () => {
               error={data[name].error}
               message={data[name].message}
               label={
-                      data[name].value.length === 0
-                        ? signupfields[name].label
-                        : ""
+                data[name].value.length === 0 ? signupfields[name].label : ""
               }
               type={signupfields[name].type}
               values={signupfields[name].values}
@@ -145,7 +163,17 @@ const SignupPage = () => {
           </Col>
         ))}
       </Row>
-          ))}
+    ));
+  };
+
+  return (
+    <div className="signup-super-container">
+      <div className="signup-sub-container">
+        <div className="signup-header">
+          <h1 className="signup-header-text">Create a Novodraft account</h1>
+        </div>
+        <Form className="signup-form">
+          {isMobile ? <MobileForm /> : <DesktopForm />}
           <Row>
             <Col className="mb-3">
               <TextInput