initial commit

services/myblog/frontend/pages/register.tsx

@@ -0,0 +1,59 @@
+import {withLayout} from "../layout_auth/Layout";
+import {useState} from "react";
+import axios from 'axios';
+    import 'bootstrap/dist/css/bootstrap.min.css';
+import {useRouter} from "next/router";
+import {
+    Container, Row, Col, Form, Input, Button, Navbar, NavLink
+} from 'reactstrap';
+
+function Home() {
+    const router = useRouter();
+    const initialFormData = Object.freeze({
+        username: "",
+        password: ""
+    });
+    const [formData, updateFormData] = useState(initialFormData);
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        updateFormData({
+            ...formData,
+
+            // Trimming any whitespace
+            [e.target.name]: e.target.value.trim()
+        });
+    };
+
+    const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        axios.post('http://10.50.20.5:13377/api/auth/sign_up', formData)
+            .then(function(response){
+
+                router.push('/auth');
+                //Perform action based on response
+            })
+            .catch(function(error){
+                console.log(error);
+                //Perform action based on error
+            });
+
+
+        // ... submit to API or something
+    };
+
+
+    return (
+        <>
+            <form style={{gridArea: "form"}} onSubmit={handleSubmit}>
+                <h1>Sign Out</h1>
+                <Input onChange={handleChange} name={"username"} placeholder={"Username"}/>
+                <Input onChange={handleChange} type={"password"} name={"password"}  placeholder={"Password"}/>
+                <Input onChange={handleChange} type={"password"} name={"password_repeat"} placeholder={"Password (repeat)"}/>
+                <Button>Sign Out</Button>
+                <NavLink href={"/auth"} style={{justifySelf: "center", alignSelf: "center"}}>Sign In</NavLink>
+            </form>
+        </>
+    );
+}
+
+export default withLayout(Home);