working on frontend stuff

bsconfig.json

@@ -1,7 +1,7 @@
 {
-  "name": "reason-react-examples",
+  "name": "bringo",
   "reason": {
-    "react-jsx": 3,
+    "react-jsx": 3
   },
   "sources": {
     "dir" : "frontend",
@@ -15,7 +15,10 @@
   "suffix": ".bs.js",
   "namespace": true,
   "bs-dependencies": [
-    "reason-react"
+    "reason-react",
+    "@jsiebern/bs-material-ui"
   ],
-  "refmt": 3
+  "refmt": 3,
+  "ppx-flags": [
+  ]
 }

frontend/Login.re

@@ -1 +1 @@
-ReactDOMRe.renderToElementWithId(<LoginPage name="John" />, "login-page-app");
+ReactDOMRe.renderToElementWithId(<LoginPage />, "login-page-app");

frontend/Main.re

@@ -0,0 +1 @@
+Js.Console.log("yo");

frontend/components/Icons.re

@@ -0,0 +1,123 @@
+open Belt.Option;
+
+[@bs.deriving jsConverter]
+type color = [
+  | [@bs.as "default"] `Default
+  | [@bs.as "error"] `Error
+  | [@bs.as "inherit"] `Inherit
+  | [@bs.as "primary"] `Primary
+  | [@bs.as "secondary"] `Secondary
+  | [@bs.as "textPrimary"] `TextPrimary
+  | [@bs.as "textSecondary"] `TextSecondary
+];
+
+[@bs.deriving jsConverter]
+type fontSize = [
+  | [@bs.as "default"] `Default
+  | [@bs.as "inherit"] `Inherit
+  | [@bs.as "small"] `Small
+  | [@bs.as "large"] `Large
+];
+
+[@bs.obj]
+external makePropsIcon:
+  (
+    ~className: string=?,
+    ~color: string=?,
+    ~fontSize: string=?,
+    ~nativeColor: string=?,
+    ~titleAccess: string=?,
+    ~viewBox: string=?,
+    unit
+  ) =>
+  _;
+
+module type IconClass = {let reactClass: React.component('a);};
+
+module Make = (Icon: IconClass) => {
+  include Icon;
+
+  [@react.component]
+  let make =
+      (
+        ~color: option(color)=?,
+        ~className: option(string)=?,
+        ~fontSize: option(fontSize)=?,
+        ~nativeColor: option(string)=?,
+        ~titleAccess: option(string)=?,
+        ~viewBox: option(string)=?,
+      ) =>
+    React.createElement(
+      reactClass,
+      makePropsIcon(
+        ~className?,
+        ~color=?color->map(colorToJs),
+        ~fontSize=?fontSize->map(fontSizeToJs),
+        ~nativeColor?,
+        ~titleAccess?,
+        ~viewBox?,
+        (),
+      ),
+    );
+};
+
+module AccountCircleFilled =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircle"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleOutlined =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleOutlined"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleRounded =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleRounded"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleSharp =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleSharp"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module AccountCircleTwoTone =
+  Make({
+    [@bs.module "@material-ui/icons/AccountCircleTwoTone"]
+    external reactClass: React.component('a) = "default";
+  });
+
+//LockOpen
+module LockOpenFilled =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpen"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenOutlined =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenOutlined"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenRounded =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenRounded"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenSharp =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenSharp"]
+    external reactClass: React.component('a) = "default";
+  });
+
+module LockOpenTwoTone =
+  Make({
+    [@bs.module "@material-ui/icons/LockOpenTwoTone"]
+    external reactClass: React.component('a) = "default";
+  });

frontend/components/loginPage/LoginForm.re

@@ -0,0 +1,63 @@
+[@react.component]
+let make = (~classes) => {
+  MaterialUi.(
+    <Paper className={classes##pageTopMargin}>
+      <form>
+        <Grid
+          container=true
+          spacing=V4
+          direction=`Column
+          justify=`Center
+          alignItems=`Center>
+          <Grid item=true>
+            <Typography variant=`H5>
+              {React.string("Editor Login")}
+            </Typography>
+          </Grid>
+          <Grid item=true>
+            <FormControl fullWidth=true>
+              <InputLabel htmlFor="uname-input">
+                {React.string("Username")}
+              </InputLabel>
+              <Input
+                id="uname-input"
+                startAdornment={
+                  <InputAdornment position=`Start>
+                    <Icons.AccountCircleFilled />
+                  </InputAdornment>
+                }
+              />
+            </FormControl>
+          </Grid>
+          <Grid item=true>
+            <FormControl>
+              <InputLabel htmlFor="pdub-input">
+                {React.string("Password")}
+              </InputLabel>
+              <Input
+                id="pdub-input"
+                type_="password"
+                startAdornment={
+                  <InputAdornment position=`Start>
+                    <Icons.LockOpenFilled />
+                  </InputAdornment>
+                }
+              />
+            </FormControl>
+          </Grid>
+          <Grid item=true>
+            <Button
+              className={classes##buttonMargin}
+              variant=`Contained
+              color=`Primary>
+              {React.string("Sign In")}
+            </Button>
+            <Button className={classes##buttonMargin} variant=`Contained>
+              {React.string("Cancel")}
+            </Button>
+          </Grid>
+        </Grid>
+      </form>
+    </Paper>
+  );
+};

frontend/components/loginPage/LoginPage.re

@@ -1,3 +1,22 @@
 [@react.component]
-let make = (~name) =>
-  <div> {ReasonReact.string("Hello " ++ name ++ "!")} </div>;
+let make = () =>
+  <MaterialUi_WithStyles
+    classes=[
+      {
+        name: "buttonMargin",
+        styles:
+          ReactDOMRe.Style.make(~marginLeft="6px", ~marginRight="6px", ()),
+      },
+      {
+        name: "pageTopMargin",
+        styles: ReactDOMRe.Style.make(~marginTop="7vh", ()),
+      },
+    ]
+    render={classes =>
+      MaterialUi.(
+        <section>
+          <Container maxWidth=`Sm> <LoginForm classes /> </Container>
+        </section>
+      )
+    }
+  />;