ui-soxo-bootstrap-core 2.4.24

package/core/lib/pages/register/register.js

@@ -0,0 +1,177 @@
+
+import React, { useState, useContext } from "react"
+
+import { Form, Button, Input, message, Row, Typography, Col } from 'antd';
+
+import { withRouter } from 'react-router-dom'
+
+import GenericHeader from './../../components/header/generic-header';
+
+import './register.scss'
+
+import { GlobalContext } from './../../Store';
+
+import { Users } from "../../models";
+
+
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 8 },
+};
+
+const tailLayout = {
+    wrapperCol: { span: 8 },
+};
+
+const { Title } = Typography;
+
+
+function Register({ history, appSettings }) {
+
+    const { brandLogo, registerImage, footerLogo } = appSettings;
+
+    const { user, dispatch } = useContext(GlobalContext);
+
+    const [loading, setLoading] = useState(false);
+
+    const onFinish = async values => {
+
+        setLoading(true);
+
+        const result = await Users.registerUser(values);
+
+        let params = {
+            ...values,
+            active: false
+        }
+
+        const user_result = await Users.addDocument(result.uid, params);
+
+        message.success('User created');
+
+        setLoading(false);
+
+        if (result.id) {
+
+            history.push('/');
+
+        } else {
+
+            message.error('No accounts found.');
+
+        }
+    };
+
+    const onFinishFailed = errorInfo => {
+        console.log('Failed:', errorInfo);
+    };
+
+
+    return (
+        <section className="register-page">
+
+            <Row className="page-wrapper">
+                <Col>
+                    <>
+                        <span
+                            className="toggle-box"
+                            onClick={() => {
+                                history && history.goBack();
+                            }}
+                        >
+                            <GenericHeader />
+                        </span>
+                    </>
+                </Col>
+
+            </Row>
+
+
+            <div className="auth-form-wrapper">
+
+                <div className="brand-logo">
+                    <img className="logo-welcome" src={brandLogo} alt="Logo" />
+                </div>
+
+                <div className="form-title">
+                    <h3>Welcome</h3>
+
+                    <p>Good day !</p>
+                </div>
+
+                <div>
+
+                </div>
+
+                <img className="vehicle-image" src={registerImage} alt="Logo" />
+
+                <Form
+                    {...layout}
+                    layout='vertical'
+                    name="basic"
+                    // initialValues={{ email: 'afil.ahammed@gmail.com', password: '123456' }}
+                    onFinish={onFinish}
+                    onFinishFailed={onFinishFailed}
+                >
+
+                    <Form.Item
+                        label="Name"
+                        name="name"
+                        rules={[{ required: true, message: 'Please input your email!' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Phone"
+                        name="phone"
+                        rules={[{ required: true, message: 'Please input your email!' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+
+                    <Form.Item
+                        label="Email"
+                        name="email"
+                        rules={[{ required: true, message: 'Please input your email!' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Password"
+                        name="password"
+                        rules={[{ required: true, message: 'Please input your password!' }]}
+                    >
+                        <Input.Password />
+                    </Form.Item>
+
+                    {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
+                        <Checkbox>Remember me</Checkbox>
+                    </Form.Item> */}
+
+                    <Form.Item {...tailLayout}>
+                        <Button loading={loading} type="primary" htmlType="submit">
+                            Submit
+                        </Button>
+                    </Form.Item>
+                </Form>
+                <p style={{ marginTop: '20px' }}>
+                    👋 For a healthy tomorrow . <small>{process.env.REACT_APP_package_version}</small>
+
+                </p>
+
+                <div className="sidebar-footer">
+
+                    {/* <img className="footer-logo" src={process.env.REACT_APP_landingFooter} alt={'user photograph'} /> */}
+
+                </div>
+
+
+            </div>
+        </section>
+    );
+}
+
+export default withRouter(Register)

package/core/lib/pages/register/register.scss

@@ -0,0 +1,128 @@
+.register-page {
+  min-height: 90vh;
+  display: flex;
+  margin: 20px 6%;
+  // align-items: center;
+
+  display: flex;
+  flex-direction: column;
+
+  @media only screen and (min-width: 608px) {
+    justify-content: center;
+    // align-items: center;
+  }
+
+  .homescreen {
+    width: 100%;
+    margin: 10px 0px;
+    border-radius: 4px;
+    background-color: aliceblue;
+    padding: 10px;
+    height: 40px;
+  }
+
+  .vehicle-image {
+    width: 200px;
+    margin: 20px 0px;
+
+    @media only screen and (min-width: 768px) {
+      width: 200px;
+      /* margin: 20px 0px; */
+      /* float: right; */
+      position: absolute;
+      right: 0px;
+      top: 20%;
+    }
+
+    @media only screen and (max-width: 768px) {
+      width: 90%;
+    }
+  }
+
+  .brand-logo {
+    width: 100px;
+    box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+    border: 1px solid #b7b7b7;
+    padding: 4px;
+    text-align: center;
+    border-radius: 2px;
+    margin: 20px 0px 30px;
+    img{
+      width: 100%;
+    }
+  }
+
+  .footer-logo {
+    width: 220px;
+    box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+    border: 1px solid #b7b7b7;
+    padding: 4px;
+    border-radius: 2px;
+    margin: 20px 0px 30px;
+  }
+
+  .auth-form-wrapper {
+    padding: 0px;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+
+    @media only screen and (max-width: 768px) {
+
+      align-items: center;
+
+      padding: 0;
+      // min-width: 275px;
+    }
+    .form-title {
+      h3 {
+        color: #071822;
+        font-weight: 600;
+        size: 18px;
+
+        margin: 20px 0px;
+        font-size: 32px;
+      }
+    }
+    .ant-form {
+      // height: 100%;
+      .ant-form-item {
+        margin: 30px 0px;
+        .ant-form-item-label {
+          margin: 0 0 8px 0;
+          line-height: 0;
+          padding: 0;
+        }
+      }
+      .ant-btn-primary {
+        margin-top: 10px;
+      }
+    }
+    .ant-form-explain {
+      position: absolute;
+      font-size: 12px;
+      margin-left: 2px;
+    }
+    .ant-btn-primary {
+      // width: 20%;
+      @media only screen and (max-width: 768px) {
+        width: 100%;
+        // min-width: 275px;
+      }
+    }
+    .ant-btn-secondary {
+      width: 100%;
+    }
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    width: 50%;
+
+    @media only screen and (max-width: 768px) {
+      display: none;
+    }
+  }
+}