done create user

Author: Dan

Diff for: api/index.php

@@ -3,6 +3,7 @@
 namespace Multi;
 
 use Firebase\JWT\JWT;
+
 use Firebase\JWT\SignatureInvalidException;
 use GraphQL\Error\Debug;
 use GraphQL\Error\FormattedError;
@@ -15,7 +16,7 @@
 use function Siler\Encoder\Json\decode;
 use function Siler\Functional\Monad\maybe;
 use function Siler\GraphQL\{debug, execute, schema};
-use function Siler\Swoole\{bearer, http, json, raw};
+use function Siler\Swoole\{bearer, http, json, raw,cors};
 
 $base_dir = __DIR__;
 require_once "$base_dir/vendor/autoload.php";
@@ -54,7 +55,9 @@
     } catch (Throwable $exception) {
         Log\error($exception->getMessage());
         $result = FormattedError::createFromException($exception);
+
     } finally {
+        cors('*','authorization,content-type');
         json($result);
     }
 };

Diff for: package-lock.json

@@ -0,0 +1,56 @@
+import { useMutation, useApolloClient } from "@apollo/react-hooks";
+import { NextPage } from "next";
+import React from "react";
+import Button from "../components/button";
+import { Container, Section } from "../components/global-style";
+import Layout from "../components/layout";
+import gql from "graphql-tag";
+import cookie from "cookie";
+import redirect from "../lib/redirect";
+import { withApollo } from "../lib/apollo";
+
+const Signin: NextPage = () => {
+  const [sigin] = useMutation(gql`
+    mutation Siginin($email: String = "[email protected]", $password: String = "multi") {
+      signIn(email: $email, password: $password)
+    }
+  `);
+
+  const appoloClient = useApolloClient();
+
+  return (
+    <>
+      <Layout>
+        <Section>
+          <Container>
+            <Button skin="primary" onClick={onSignInClick}>
+              Entrar
+            </Button>
+          </Container>
+        </Section>
+      </Layout>
+    </>
+  );
+
+  async function onSignInClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+
+    try {
+      const result = await sigin({});
+
+      if (result.data && result.data.signIn) {
+        document.cookie = cookie.serialize("token", result.data.signIn);
+        console.log(document.cookie);
+        await appoloClient.cache.reset();
+        redirect(null, "/signup");
+      }
+
+      console.log(result);
+    } catch (error) {
+      // TODO: Handle error
+      console.error(error);
+    }
+  }
+};
+
+export default withApollo(Signin);

Diff for: web/pages/signin.tsx

@@ -1,18 +1,51 @@
+import { useApolloClient, useMutation } from "@apollo/react-hooks";
 import { NextPage } from "next";
 import React, { useRef, useState } from "react";
 import Button from "../components/button";
 import { Container, Section } from "../components/global-style";
 import Layout from "../components/layout";
 import Input from "../components/input";
 import { Column } from "../components/column";
+import { withApollo } from "../lib/apollo";
+import gql from "graphql-tag";
+
+type User = {
+  id: string;
+  email: string;
+  role: Role;
+};
+
+enum Role {
+  ADMINISTRATOR = "ADMINISTRATOR",
+  COLLABORATOR = "COLLABORATOR"
+}
+
+type UserInput = {
+  email: string;
+  password: string;
+  role: Role;
+};
 
 const Signup: NextPage = () => {
   var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   const email = useRef<HTMLInputElement>(null);
   const pass = useRef<HTMLInputElement>(null);
   const confirmpass = useRef<HTMLInputElement>(null);
   const [validEmail, setValidEmail] = useState(false);
+  const [passValue, setPassValue] = useState("");
+  const [emailValue, setEmailValue] = useState("");
   const [validPass, setValidPass] = useState(false);
+  const [emailErrorMessage, setEmailError] = useState("");
+  const [passErrorMessage, setpassError] = useState("");
+  const [createUser] = useMutation<{ createUser: User }, { input: UserInput }>(
+    gql`
+      mutation CreateUser($input: UserInput!) {
+        createUser(input: $input) {
+          id
+        }
+      }
+    `
+  );
 
   return (
     <>
@@ -23,7 +56,7 @@ const Signup: NextPage = () => {
               <Column>
                 <div>
                   <Input
-                    onChange={onEmailChange}
+                    onChange={validateEmail}
                     type="text"
                     placeholder="Email"
                     ref={email}
@@ -34,7 +67,7 @@ const Signup: NextPage = () => {
                 </div>
                 <div>
                   <Input
-                    onChange={onPassChange}
+                    onChange={validatePass}
                     type="password"
                     placeholder="Senha"
                     ref={pass}
@@ -45,7 +78,7 @@ const Signup: NextPage = () => {
                 </div>
                 <div>
                   <Input
-                    onChange={onPassChange}
+                    onChange={validatePass}
                     type="password"
                     placeholder="Confirmar senha"
                     ref={confirmpass}
@@ -59,40 +92,86 @@ const Signup: NextPage = () => {
                 </Button>
               </Column>
             </form>
+            {renderError()}
           </Container>
         </Section>
       </Layout>
     </>
   );
 
-  function onEmailChange() {
+  function renderError() {
+    return (
+      <div>
+        <b>{emailErrorMessage} </b>
+        <br></br>
+        <b>{passErrorMessage}</b>
+      </div>
+    );
+  }
+
+  function validateEmail() {
     if (email.current !== null) {
       if (emailRegex.test(String(email.current.value).toLocaleLowerCase())) {
+        setEmailError("");
+        setEmailValue(email.current.value);
         setValidEmail(true);
       } else {
+        setEmailValue("");
+        setEmailError("Email inválido");
         setValidEmail(false);
       }
     }
   }
 
-  function onPassChange() {
-    if (confirmpass.current !== null && pass.current !== null) {
-      if (
-        confirmpass.current.value === pass.current.value &&
-        pass.current.value.length > 5
-      ) {
+  function validatePass() {
+    if (
+      confirmpass.current !== null &&
+      pass.current !== null &&
+      validateMinimumPassSize()
+    ) {
+      if (confirmpass.current.value === pass.current.value) {
+        setpassError("");
+        setPassValue(confirmpass.current.value);
         setValidPass(true);
       } else {
+        setPassValue("");
+        setpassError("As senhas não coincidem");
         setValidPass(false);
       }
     }
   }
-  function sendForm(event: React.MouseEvent<HTMLButtonElement>) {
+
+  function validateMinimumPassSize() {
+    if (confirmpass.current !== null) {
+      if (confirmpass.current.value.length < 5) {
+        setpassError("A senha deve ter ao menos 6 caracteres");
+        return false;
+      } else {
+        setpassError("");
+        return true;
+      }
+    }
+  }
+  async function sendForm(event: React.MouseEvent<HTMLButtonElement>) {
     event.preventDefault();
+    validatePass();
+    validateEmail();
+    validateMinimumPassSize();
+
     if (validEmail && validPass) {
       console.log("Pass");
+      const result = await createUser({
+        variables: {
+          input: {
+            email: emailValue,
+            password: passValue,
+            role: Role.COLLABORATOR
+          }
+        }
+      });
+      console.log(result);
     }
   }
 };
 
-export default Signup;
+export default withApollo(Signup);

Diff for: web/pages/signup.tsx

@@ -0,0 +1,3 @@
+mutation Siginin($email: String = "[email protected]", $password: String = "multi") {
+  signIn(email: $email, password: $password)
+}