login.re

open Antd;

open Form;

open ApolloClient;

type action =
  | EditEmail(string)
  | EditPassword(string)
  | Submit;

type state = {
  email: string,
  password: string
};

let component = ReasonReact.reducerComponent("Login");

let make' = (onSubmit, props, _children) => {
  ...component,
  initialState: () => {email: "", password: ""},
  reducer: (action, state) =>
    switch action {
    | EditEmail(value) => ReasonReact.Update({...state, email: value})
    | EditPassword(value) => ReasonReact.Update({...state, password: value})
    | Submit =>
      ReasonReact.UpdateWithSideEffects(
        {email: "", password: ""},
        ((_self) => onSubmit((props##signin, state)))
      )
    },
  render: (self) => {
    let userIcon = <Icon type_="user" style={"fontSize": 13} />;
    let passwordIcon = <Icon type_="lock" style={"fontSize": 13} />;
    <Form onSubmit=(self.reduce((_e) => Submit))>
      <Item>
        <Input
          id="email"
          prefix=userIcon
          placeholder="Email"
          onChange=(self.reduce((e) => EditEmail(Util.ev(e))))
          value=self.state.email
        />
      </Item>
      <Item>
        <Input
          id="password"
          prefix=passwordIcon
          type_="password"
          placeholder="Password"
          value=self.state.password
          onChange=(self.reduce((e) => EditPassword(Util.ev(e))))
        />
      </Item>
      <Button type_="primary" htmlType="submit" className="login-form-button">
        (Util.s2e("Log in"))
      </Button>
      <Item />
    </Form>
  }
};

let signinMutation =
  [@bs]
  gql(
    {|
     mutation Signin($email: String!, $password: String!) {
     EmailSignin(email: $email, password: $password) {
     accessToken
     refreshToken
     }
     }
     |}
  );

let make = (~onSubmit, _children) => {
  let wrapper = Form.create();
  let reactClass' =
    ReasonReact.wrapReasonForJs(~component, (props) => make'(onSubmit, props, [||]));
  let reactClass = [@bs] wrapper(reactClass');
  let options: gqlOptions = [{name: "signin", gql: signinMutation}];
  wrapGqlsReactClass(~reactClass, ~children=[||], options)
};