Update README with use cases and version details, add app login and r…

…egister logics; create Button, Heading and Field core components and it styles; add Register and Login and Home view b00tc4mp#178

staff/debora-garcia/project/app/src/App.jsx

@@ -0,0 +1,14 @@
+import { Routes, Route } from "react-router-dom"
+import Login from "./views/Login";
+import Register from "./views/Register";
+import Home from "./views/Home";
+
+export default function App() {
+    console.log("App -> render")
+
+    return <Routes>
+        <Route path="/home" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+    </Routes>
+}

staff/debora-garcia/project/app/src/components/Button/index.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.Button {
+    @apply m-[.5rem_0] p-[.4rem] bg-white font-[1rem] rounded-[5px];
+  }

staff/debora-garcia/project/app/src/components/Button/index.jsx

@@ -0,0 +1,6 @@
+import "./index.css"
+
+export default function Button({ type, className, onClick, children }) {
+    return <button className={`Button ${className ? className : ""}`} onClick={onClick}>{children}</button>
+
+}

staff/debora-garcia/project/app/src/components/Field/index.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.Field {
+    @apply p-[.3rem] bg-white text-[1rem] rounded-[5px] m-[1rem] w-[80%] ;
+  }

staff/debora-garcia/project/app/src/components/Field/index.jsx

@@ -0,0 +1,8 @@
+import "./index.css"
+
+export default function Field({ id, type, placeholder }) {
+    return <div className="Field">
+        <input id={id} type={type} placeholder={placeholder}></input>
+    </div>
+
+}

staff/debora-garcia/project/app/src/components/Heading/index.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.Heading{
+    @apply text-[30px] text-[#38383b]
+}

staff/debora-garcia/project/app/src/components/Heading/index.jsx

@@ -0,0 +1,7 @@
+import "./index.css"
+
+export default function Heading({ level, children, className }) {
+    const Tag = `h${level}`
+    return <Tag className={className}>{children}</Tag>
+
+}

staff/debora-garcia/project/app/src/index.css

@@ -1,3 +1,27 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+:root {
+    --first-color: rgb(0, 0, 0);
+    --second-color: rgba(164, 151, 158, 0.776);
+  }
+
+  * {
+    font-family: "Courier New", Courier, monospace;
+    font-style: normal;
+    color: var(--first-color);
+  }
+
+  body {
+    background-color: var(--second-color);
+    margin: 0;
+  }
+
+  .registerForm{
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+  }
+
+

staff/debora-garcia/project/app/src/logic/index.js

@@ -0,0 +1,9 @@
+import loginUser from "./loginUser";
+import registerUser from "./registerUser";
+
+const logic = {
+    registerUser,
+    loginUser
+}
+
+export default logic

staff/debora-garcia/project/app/src/logic/loginUser.js

@@ -0,0 +1,33 @@
+import errors, { SystemError } from "com/errors"
+import validate from "com/validate"
+
+const loginUser = (username, password) => {
+    validate.username(username)
+    validate.password(password)
+
+    return fetch(`${import.meta.env.VITE_API_URL}/users/auth`, {
+        method: "POST",
+        headers: { "Content-type": "application/json" },
+        body: JSON.stringify({ username, password })
+    })
+        .catch(() => { throw new SystemError("server error") })
+        .then(response => {
+            if (response.status === 200) {
+                return response.json()
+                    .catch(() => { throw new SystemError("server error") })
+                    .then(token => sessionStorage.token = token)
+            }
+
+            return response.json()
+                .catch(() => { throw new SystemError("server error") })
+                .then(body => {
+                    const { error, message } = body
+
+                    const constructor = errors[error]
+
+                    throw new constructor(message)
+                })
+        })
+}
+
+export default loginUser

staff/debora-garcia/project/app/src/logic/registerUser.js

@@ -0,0 +1,31 @@
+import errors, { SystemError } from "com/errors"
+import validate from "com/validate"
+
+const registerUser = (name, surname, email, username, password, passwordRepeat) => {
+    validate.name(name)
+    validate.name(surname, "surname")
+    validate.email(email)
+    validate.username(username)
+    validate.password(password)
+    validate.passwordsMatch(password, passwordRepeat)
+
+    return fetch(`${import.meta.env.VITE_API_URL}/users`, {
+        method: "POST",
+        headers: { "Content-type": "application/json" },
+        body: JSON.stringify({ name, surname, email, username, password, passwordRepeat })
+    })
+        .catch(() => { throw new SystemError("server error") })
+        .then(response => {
+            if (response.status === 201) return
+
+            return response.json()
+                .catch(() => { throw new SystemError("server error") })
+                .then((body) => {
+                    const { error, message } = body
+                    const constructor = errors[error]
+                    throw new constructor(message)
+                })
+        })
+}
+
+export default registerUser

staff/debora-garcia/project/app/src/views/Home.jsx

@@ -0,0 +1,8 @@
+
+export default function Home() {
+    console.log("Home ->render")
+
+    return <>
+    <p>Hola Home!</p>
+    </>
+}

staff/debora-garcia/project/app/src/views/Login.jsx

@@ -0,0 +1,46 @@
+import { useNavigate, Link } from "react-router-dom"
+
+import logic from "../logic"
+
+import Button from "../components/Button"
+import Field from "../components/Field"
+import Heading from "../components/Heading"
+
+export default function Login() {
+    console.log("Login ->render")
+    const navigate = useNavigate()
+
+
+    const handleLoginSubmit = event => {
+        event.preventDefault()
+
+        const form = event.target
+        const username = form.username.value
+        const password = form.password.value
+
+        try {
+            logic.loginUser(username, password)
+                .then(() => navigate("/home"))
+                .catch(error => {
+                    console.error(error)
+                    alert(error.message)
+
+                })
+
+        } catch (error) {
+            console.error(error)
+            alert(error.message)
+        }
+    }
+
+    return <form className="registerForm" onSubmit={handleLoginSubmit} >
+        <Heading level="1" className="Heading">WELLCOME BACK!</Heading>
+        <p>Be part of our team</p>
+
+        <Field id="username" type="text" placeholder="Username"></Field>
+        <Field id="password" type="password" placeholder="Password"></Field>
+        <Button type="submit">Sign in</Button>
+
+
+    </form>
+}

staff/debora-garcia/project/app/src/views/Register.jsx

@@ -0,0 +1,64 @@
+import { useState } from "react"
+import { useNavigate, Link } from "react-router-dom"
+
+import Button from "../components/Button"
+import Field from "../components/Field"
+import Heading from "../components/Heading"
+
+import logic from "../logic"
+
+export default function Register() {
+    console.log("Register->render")
+
+    const navigate = useNavigate()
+
+    //const [message, setMessage] = useState("")
+
+    const handleRegisterSubmit = event => {
+        event.preventDefault()
+
+        const form = event.target
+        const name = form.name.value
+        const surname = form.surname.value
+        const email = form.email.value
+        const username = form.username.value
+        const password = form.password.value
+        const passwordRepeat = form.passwordRepeat.value
+
+        try {
+            logic.registerUser(name, surname, email, username, password, passwordRepeat)
+                .then(() => navigate("/login"))
+                .catch(error => {
+                    console.error(error)
+                    alert(error.message)
+
+                })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+
+    }
+
+    const handleLoginClick = event => {
+        event.preventDefault()
+
+        navigate("/login")
+
+    }
+
+    return <form className="registerForm" onSubmit={handleRegisterSubmit}>
+        <Heading level="1" className="Heading">NEW ACCOUNT</Heading>
+        <p>Be part of our team</p>
+        <Field id="name" type="text" placeholder="Name"></Field>
+        <Field id="surname" type="text" placeholder="Surname"></Field>
+        <Field id="username" type="text" placeholder="Username"></Field>
+        <Field id="email" type="email" placeholder="E-mail"></Field>
+        <Field id="password" type="password" placeholder="Password"></Field>
+        <Field id="passwordRepeat" type="password" placeholder="Confirm Password"></Field>
+        <Button type="submit">Sign up</Button>
+        <Link onClick={handleLoginClick}>Login</Link>
+
+    </form>
+}