From 8e892fe2f6cd3ffec61c762fe0daf9f7477e07bf Mon Sep 17 00:00:00 2001
From: Caleb Okpara <cokpara@insistglobal.com>
Date: Sat, 21 May 2022 13:25:14 +0000
Subject: [PATCH] style register page

---
 Accounts/src/App.scss                         | 137 ++++++++++++------
 Accounts/src/App.tsx                          |   3 +-
 Accounts/src/Pages/ForgotPassword.tsx         |  23 +--
 Accounts/src/Pages/Login.tsx                  |  27 ++--
 Accounts/src/Pages/Register.tsx               |  67 ++++++---
 Accounts/src/Pages/SsoLogin.tsx               |  23 +--
 Common/Models/BaseModel.ts                    |   6 +-
 CommonUI/src/Components/Forms/BasicForm.tsx   |  25 +++-
 .../src/Components/Forms/BasicModelForm.tsx   |   9 +-
 9 files changed, 205 insertions(+), 115 deletions(-)

diff --git a/Accounts/src/App.scss b/Accounts/src/App.scss
index 5552826080..472dd694be 100644
--- a/Accounts/src/App.scss
+++ b/Accounts/src/App.scss
@@ -72,18 +72,7 @@ body {
     }
 }
 
-form {
-    height: fit-content;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: $bglight;
-    border-radius: 5px;
-    box-shadow: 1px 2px 10px lighten($bgDark, 85%);
-    padding: 50px 70px;
-    z-index: 40;
-
+.grid_form_1 {
     @include responsive($xs) {
         width: 95%;
         padding: 25px;
@@ -106,13 +95,50 @@ form {
     @include responsive($xl) {
         width: 35%;
     }
+}
+
+.grid_form_2 {
+    width: 45%;
+
+    @include responsive($xs) {
+        width: 100%;
+    }
+
+    @include responsive($sm) {
+        width: 90%;
+    }
+
+    @include responsive($med) {
+        width: 75%;
+    }
+
+    @include responsive($lg) {
+        width: 50%;
+    }
+
+    @include responsive($xl) {
+        width: 50%;
+    }
+}
+
+form {
+    height: fit-content;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: $bglight;
+    border-radius: 5px;
+    box-shadow: 1px 2px 10px lighten($bgDark, 85%);
+    padding: 50px 70px;
+    z-index: 40;
 
     h1 {
         color: lighten($bgDark, 20%);
         font-family: 'Helvetica Neue', sans-serif;
         font-size: 2.4rem;
         font-weight: 500;
-        margin-bottom: 20px;
+        margin-bottom: 30px;
         letter-spacing: -0.2px;
         line-height: 32px;
     }
@@ -123,53 +149,74 @@ form {
         color: lighten($bgDark, 40%);
     }
 
-    div {
+    .grid_1 {
         display: flex;
         flex-direction: column;
+    }
 
+    .grid_2 {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        width: 100%;
+
+        div {
+            flex: 0 0 48%;
+            input {
+                padding: 10px 15px;
+            }
+        }
+    }
+
+    div {
         &:not(:last-child) {
             margin-bottom: 30px;
         }
 
-        label {
-            font-size: 1.35rem;
-            font-weight: 400;
-            color: lighten($bgDark, 20%);
-            margin-bottom: 5px;
-
+        div {
             display: flex;
-            justify-content: space-between;
+            flex-direction: column;
 
-            span:last-child {
-                color: $lightBlue;
-                cursor: pointer;
-                transition: $transition;
+            label {
+                font-size: 1.35rem;
+                font-weight: 400;
+                color: lighten($bgDark, 20%);
+                margin-bottom: 5px;
 
-                &:hover {
-                    color: darken($lightBlue, 50%);
+                display: flex;
+                justify-content: space-between;
+
+                span:last-child {
+                    color: $lightBlue;
+                    cursor: pointer;
+                    transition: $transition;
+
+                    &:hover {
+                        color: darken($lightBlue, 50%);
+                    }
                 }
             }
-        }
 
-        input {
-            width: 100%;
-            padding: 15px 20px;
-            border: 1px solid $colorLightGrey;
-            border-radius: 5px;
-            outline: none;
-            appearance: none;
-            background: transparent;
-            font-size: 1.3rem;
-            color: darken($colorLightGrey, 50%);
+            input {
+                width: 100%;
+                padding: 15px 20px;
+                border: 1px solid $colorLightGrey;
+                border-radius: 5px;
+                outline: none;
+                appearance: none;
+                background: transparent;
+                font-size: 1.3rem;
+                color: darken($colorLightGrey, 50%);
 
-            &:focus {
-                outline: 2px solid rgba(84, 84, 238, 0.72);
-            }
+                &:focus {
+                    outline: 2px solid rgba(84, 84, 238, 0.72);
+                }
 
-            & + div {
-                color: rgb(189, 11, 11);
-                margin-top: 5px;
-                font-size: 1.2rem;
+                & + div {
+                    color: rgb(189, 11, 11);
+                    margin-top: 5px;
+                    font-size: 1.2rem;
+                }
             }
         }
     }
diff --git a/Accounts/src/App.tsx b/Accounts/src/App.tsx
index e5e51c8e04..dbbe412b0b 100644
--- a/Accounts/src/App.tsx
+++ b/Accounts/src/App.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import LoginPage from './Pages/Login';
 import SsoLoginPage from './Pages/SsoLogin';
 import ForgotPasswordPage from './Pages/ForgotPassword';
+import RegisterPage from './Pages/Register';
 
 function App(): ReactElement {
     return (
@@ -22,7 +23,7 @@ function App(): ReactElement {
                         path="/forgot-password"
                         element={<ForgotPasswordPage />}
                     />
-                    <Route path="/register" element={<LoginPage />} />
+                    <Route path="/register" element={<RegisterPage />} />
                     <Route path="/login/sso" element={<SsoLoginPage />} />
                     <Route path="/verify-email" element={<LoginPage />} />
                 </Routes>
diff --git a/Accounts/src/Pages/ForgotPassword.tsx b/Accounts/src/Pages/ForgotPassword.tsx
index 660bed084d..518f5f2546 100644
--- a/Accounts/src/Pages/ForgotPassword.tsx
+++ b/Accounts/src/Pages/ForgotPassword.tsx
@@ -28,17 +28,18 @@ const ForgotPasswordPage: FunctionComponent = () => {
                 submitButtonText={'Continue'}
                 title={'Reset your password'}
                 description={`Enter the email address associated with your account, and we'll send you a link to reset your password.`}
-            >
-                <div className="actions">
-                    <p>
-                        <Link to="/login">Return to sign in</Link>
-                    </p>
-                    <p>
-                        <span>Don&apos;t have an account? </span>
-                        <Link to="/register">Sign up</Link>
-                    </p>
-                </div>
-            </BasicModelForm>
+                footer={
+                    <div className="actions">
+                        <p>
+                            <Link to="/login">Return to sign in</Link>
+                        </p>
+                        <p>
+                            <span>Don&apos;t have an account? </span>
+                            <Link to="/register">Sign up</Link>
+                        </p>
+                    </div>
+                }
+            />
             <Footer />
         </>
     );
diff --git a/Accounts/src/Pages/Login.tsx b/Accounts/src/Pages/Login.tsx
index f5558e0af5..58c0eea58d 100644
--- a/Accounts/src/Pages/Login.tsx
+++ b/Accounts/src/Pages/Login.tsx
@@ -42,19 +42,20 @@ const LoginPage: FunctionComponent = () => {
                 }}
                 submitButtonText={'Login'}
                 title={'Sign in to your account'}
-            >
-                <div className="actions">
-                    <p>
-                        <Link to="/login/sso">
-                            Use single sign-on (SSO) instead
-                        </Link>
-                    </p>
-                    <p>
-                        <span>Don&apos;t have an account? </span>
-                        <Link to="/register">Sign up</Link>
-                    </p>
-                </div>
-            </BasicModelForm>
+                footer={
+                    <div className="actions">
+                        <p>
+                            <Link to="/login/sso">
+                                Use single sign-on (SSO) instead
+                            </Link>
+                        </p>
+                        <p>
+                            <span>Don&apos;t have an account? </span>
+                            <Link to="/register">Sign up</Link>
+                        </p>
+                    </div>
+                }
+            />
             <Footer />
         </>
     );
diff --git a/Accounts/src/Pages/Register.tsx b/Accounts/src/Pages/Register.tsx
index 164262d68a..8d530508e9 100644
--- a/Accounts/src/Pages/Register.tsx
+++ b/Accounts/src/Pages/Register.tsx
@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import BasicModelForm from 'CommonUI/src/Components/Forms/BasicModelForm';
 import User from 'Common/Models/User';
 import FormValues from 'CommonUI/src/Components/Forms/Types/FormValues';
-import Route from 'Common/Types/API/Route';
 import Footer from '../Footer';
 
 const RegisterPage: FunctionComponent = () => {
@@ -14,43 +13,71 @@ const RegisterPage: FunctionComponent = () => {
             <BasicModelForm<User>
                 model={user}
                 id="login-form"
+                showAsColumns={2}
                 fields={[
                     {
                         field: {
                             email: true,
                         },
+                        placeholder: 'jeff@example.com',
+                        required: true,
                         title: 'Email',
                     },
+                    {
+                        field: {
+                            name: true,
+                        },
+                        placeholder: 'Jeff Smith',
+                        required: true,
+                        title: 'Full Name',
+                    },
+                    {
+                        field: {
+                            companyName: true,
+                        },
+                        placeholder: 'Company Name',
+                        required: true,
+                        title: 'Company Name',
+                    },
+                    {
+                        field: {
+                            companyPhoneNumber: true,
+                        },
+                        required: true,
+                        placeholder: 'Phone Number',
+                        title: 'Phone Number',
+                    },
                     {
                         field: {
                             password: true,
                         },
+                        placeholder: 'Password',
                         title: 'Password',
-                        sideLink: {
-                            text: 'Forgot password?',
-                            url: new Route('/forgot-password'),
-                            openLinkInNewTab: true,
+                        required: true,
+                    },
+                    {
+                        field: {
+                            password: true,
                         },
+                        placeholder: 'Confirm Password',
+                        title: 'Confirm Password',
+                        required: true,
                     },
                 ]}
                 onSubmit={(values: FormValues<User>) => {
                     console.log(values);
                 }}
-                submitButtonText={'Login'}
-                title={'Sign in to your account'}
-            >
-                <div className="actions">
-                    <p>
-                        <Link to="/login/sso">
-                            Use single sign-on (SSO) instead
-                        </Link>
-                    </p>
-                    <p>
-                        <span>Don&apos;t have an account? </span>
-                        <Link to="/register">Sign up</Link>
-                    </p>
-                </div>
-            </BasicModelForm>
+                submitButtonText={'Sign Up'}
+                title={'Create your OneUptime account'}
+                footer={
+                    <div className="actions">
+                        <p>
+                            <span>Have an account? </span>
+                            <Link to="/login">Login</Link>
+                        </p>
+                    </div>
+                }
+            />
             <Footer />
         </>
     );
diff --git a/Accounts/src/Pages/SsoLogin.tsx b/Accounts/src/Pages/SsoLogin.tsx
index 004d381d1a..9891780d6a 100644
--- a/Accounts/src/Pages/SsoLogin.tsx
+++ b/Accounts/src/Pages/SsoLogin.tsx
@@ -27,17 +27,18 @@ const SsoLoginPage: FunctionComponent = () => {
                 }}
                 submitButtonText={'Continue with SSO'}
                 title={'Sign in to your account'}
-            >
-                <div className="actions">
-                    <p>
-                        <Link to="/login">Use your password instead</Link>
-                    </p>
-                    <p>
-                        <span>Don&apos;t have an account? </span>
-                        <Link to="/register">Sign up</Link>
-                    </p>
-                </div>
-            </BasicModelForm>
+                footer={
+                    <div className="actions">
+                        <p>
+                            <Link to="/login">Use your password instead</Link>
+                        </p>
+                        <p>
+                            <span>Don&apos;t have an account? </span>
+                            <Link to="/register">Sign up</Link>
+                        </p>
+                    </div>
+                }
+            />
             <Footer />
         </>
     );
diff --git a/Common/Models/BaseModel.ts b/Common/Models/BaseModel.ts
index e8b4cfb330..471636af2f 100644
--- a/Common/Models/BaseModel.ts
+++ b/Common/Models/BaseModel.ts
@@ -108,15 +108,15 @@ export default class BaseModel extends BaseEntity {
     }
 
     public getDisplayColumnPlaceholderAs(columnName: string): string | null {
-        return getTableColumn(this, columnName).placeholder || null;
+        return getTableColumn(this, columnName)?.placeholder || null;
     }
 
     public getDisplayColumnTitleAs(columnName: string): string | null {
-        return getTableColumn(this, columnName).title || null;
+        return getTableColumn(this, columnName)?.title || null;
     }
 
     public getDisplayColumnDescriptionAs(columnName: string): string | null {
-        return getTableColumn(this, columnName).description || null;
+        return getTableColumn(this, columnName)?.description || null;
     }
 
     public getEncryptedColumns(): Columns {
diff --git a/CommonUI/src/Components/Forms/BasicForm.tsx b/CommonUI/src/Components/Forms/BasicForm.tsx
index ec9a7de3da..96b2bc48e5 100644
--- a/CommonUI/src/Components/Forms/BasicForm.tsx
+++ b/CommonUI/src/Components/Forms/BasicForm.tsx
@@ -19,13 +19,16 @@ export interface ComponentProps<T extends Object> {
     submitButtonText?: string;
     title?: string;
     description?: string;
-    children: ReactElement;
+    showAsColumns?: number;
+    footer: ReactElement;
 }
 
 const BasicForm = <T extends Object>(
     props: ComponentProps<T>
 ): ReactElement => {
     const getFormField = (field: DataField<T>, index: number): ReactElement => {
+        console.log(field);
+
         const fieldType = 'text';
         if (Object.keys(field.field).length === 0) {
             throw new BadDataException('Object cannot be without Field');
@@ -99,15 +102,23 @@ const BasicForm = <T extends Object>(
             >
                 {({ isSubmitting, isValidating, isValid }) => {
                     return (
-                        <Form autoComplete="off">
+                        <Form
+                            autoComplete="off"
+                            className={`grid_form_${props.showAsColumns}`}
+                        >
                             <h1>{props.title}</h1>
 
                             <p className="description">{props.description}</p>
 
-                            {props.fields &&
-                                props.fields.map((field: DataField<T>, i) => {
-                                    return getFormField(field, i);
-                                })}
+                            <div className={`grid_${props.showAsColumns}`}>
+                                {props.fields &&
+                                    props.fields.map(
+                                        (field: DataField<T>, i) => {
+                                            return getFormField(field, i);
+                                        }
+                                    )}
+                            </div>
+
                             <Button
                                 title={props.submitButtonText || 'Submit'}
                                 disabled={
@@ -116,7 +127,7 @@ const BasicForm = <T extends Object>(
                                 type={ButtonTypes.Submit}
                                 id={`${props.id}-submit-button`}
                             />
-                            {props.children}
+                            {props.footer}
                         </Form>
                     );
                 }}
diff --git a/CommonUI/src/Components/Forms/BasicModelForm.tsx b/CommonUI/src/Components/Forms/BasicModelForm.tsx
index b1c88bd297..5f637fa439 100644
--- a/CommonUI/src/Components/Forms/BasicModelForm.tsx
+++ b/CommonUI/src/Components/Forms/BasicModelForm.tsx
@@ -14,7 +14,8 @@ export interface ComponentProps<T extends BaseModel> {
     submitButtonText?: string;
     title?: string;
     description?: string;
-    children: ReactElement;
+    showAsColumns?: number;
+    footer: ReactElement;
 }
 
 const BasicModelForm = <TBaseModel extends BaseModel>(
@@ -61,9 +62,9 @@ const BasicModelForm = <TBaseModel extends BaseModel>(
             submitButtonText={props.submitButtonText || 'Save'}
             title={props.title || ''}
             description={props.description || ''}
-        >
-            {props.children}
-        </BasicForm>
+            footer={props.footer}
+            showAsColumns={props.showAsColumns || 1}
+        ></BasicForm>
     );
 };