From 89a69310250659fdd32d95e3886ce9c67580e9a9 Mon Sep 17 00:00:00 2001
From: Tatiana_Garcia <151873298+TatiGV@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:51:59 +0200
Subject: [PATCH] Add several components to library, implement
 authenticate-user.sh test and modified index.js of login #99

---
 staff/tatiana-garcia/project/api/index.js     |  1 +
 .../project/api/test/authenticate-user.sh     |  1 +
 staff/tatiana-garcia/project/app/package.json |  1 +
 .../app/util/extractPayLoadFromToken.js       |  9 +++++
 .../project/app/util/formatTime.mjs           | 37 +++++++++++++++++++
 .../project/app/view/common/Alert.jsx         |  3 +-
 .../project/app/view/common/Confirm.jsx       | 17 +++++++++
 .../project/app/view/library/Form.jsx         |  5 +++
 .../project/app/view/library/Heading.jsx      |  1 +
 .../project/app/view/library/Input.jsx        |  5 +++
 .../project/app/view/library/Label.jsx        |  5 +++
 .../project/app/view/library/Paragraph.jsx    |  3 ++
 .../project/app/view/login/index.jsx          | 31 +++++++++-------
 13 files changed, 104 insertions(+), 15 deletions(-)
 create mode 100644 staff/tatiana-garcia/project/api/test/authenticate-user.sh
 create mode 100644 staff/tatiana-garcia/project/app/util/extractPayLoadFromToken.js
 create mode 100644 staff/tatiana-garcia/project/app/util/formatTime.mjs
 create mode 100644 staff/tatiana-garcia/project/app/view/common/Confirm.jsx
 create mode 100644 staff/tatiana-garcia/project/app/view/library/Form.jsx
 create mode 100644 staff/tatiana-garcia/project/app/view/library/Input.jsx
 create mode 100644 staff/tatiana-garcia/project/app/view/library/Label.jsx
 create mode 100644 staff/tatiana-garcia/project/app/view/library/Paragraph.jsx

diff --git a/staff/tatiana-garcia/project/api/index.js b/staff/tatiana-garcia/project/api/index.js
index f66ea1b03..5a43ef5a2 100644
--- a/staff/tatiana-garcia/project/api/index.js
+++ b/staff/tatiana-garcia/project/api/index.js
@@ -20,6 +20,7 @@ mongoose.connect(process.env.MONGODB_URI)
         api.use(cors)
 
         api.post('/users', jsonBodyParser, registerUserHandler)
+
         api.post('/users/auth', jsonBodyParser, authenticateUserHandler)
 
         api.use(errorHandler)
diff --git a/staff/tatiana-garcia/project/api/test/authenticate-user.sh b/staff/tatiana-garcia/project/api/test/authenticate-user.sh
new file mode 100644
index 000000000..b94cfb121
--- /dev/null
+++ b/staff/tatiana-garcia/project/api/test/authenticate-user.sh
@@ -0,0 +1 @@
+curl -X POST -v http://localhost:8080/users/auth -d '{"username": "tatig", "password":"123123123"}' -H "Content-Type: application/json"
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/package.json b/staff/tatiana-garcia/project/app/package.json
index 0fb565956..be016f991 100644
--- a/staff/tatiana-garcia/project/app/package.json
+++ b/staff/tatiana-garcia/project/app/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "vite",
+    "test": "echo HOLA TEST",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .--ext js,jsx --report-unused-disable-directives --max-warnings 0",
diff --git a/staff/tatiana-garcia/project/app/util/extractPayLoadFromToken.js b/staff/tatiana-garcia/project/app/util/extractPayLoadFromToken.js
new file mode 100644
index 000000000..044aeb436
--- /dev/null
+++ b/staff/tatiana-garcia/project/app/util/extractPayLoadFromToken.js
@@ -0,0 +1,9 @@
+export default token => {
+    const payloadB64 = token.slice(token.indexOf('.') + 1, token.lastIndexOf('.'))
+
+    const payloadJSON = atob(payloadB64)
+
+    const payload = JSON.parse(payloadJSON)
+
+    return payload
+}
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/util/formatTime.mjs b/staff/tatiana-garcia/project/app/util/formatTime.mjs
new file mode 100644
index 000000000..1b4d2ab07
--- /dev/null
+++ b/staff/tatiana-garcia/project/app/util/formatTime.mjs
@@ -0,0 +1,37 @@
+function formatTime(date) {
+    const seconds = Math.round((Date.now() - date.getTime()) / 1000)
+
+    if (seconds < 60)
+        return seconds + ' second' + (seconds === 1 ? '' : 's')
+
+    const minutes = Math.round(seconds / 60)
+
+    if (minutes < 60)
+        return minutes + ' minute' + (minutes === 1 ? '' : 's')
+
+    const hours = Math.round(minutes / 60)
+
+    if (hours < 24)
+        return hours + ' hour' + (hours === 1 ? '' : 's')
+
+    const days = Math.round(hours / 24)
+
+    if (days < 7)
+        return days + ' day' + (days === 1 ? '' : 's')
+
+    const weeks = Math.round(days / 7)
+
+    if (weeks < 4)
+        return weeks + ' week' + (weeks === 1 ? '' : 's')
+
+    const months = Math.round(weeks / 4)
+
+    if (months < 12)
+        return months + ' month' + (months === 1 ? '' : 's')
+
+    const years = Math.round(months / 12)
+
+    return years + ' year' + (years === 1 ? '' : 's')
+}
+
+export default formatTime
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/view/common/Alert.jsx b/staff/tatiana-garcia/project/app/view/common/Alert.jsx
index 4cdef18ca..8751fed73 100644
--- a/staff/tatiana-garcia/project/app/view/common/Alert.jsx
+++ b/staff/tatiana-garcia/project/app/view/common/Alert.jsx
@@ -1,5 +1,6 @@
 import Container from '../library/Container'
 import Button from '../library/Button'
+import Paragraph from '../library/Paragraph'
 
 export default function Alert({ message, onAccept }) {
     return <>
@@ -8,7 +9,7 @@ export default function Alert({ message, onAccept }) {
 
         <Container className="fixed w-screen top-0 h-screen flex items-center justify-center">
             <Container className="p-4 border bg-white dark:bg-black dark:text-white flex-col">
-                <p>{message}</p>
+                <Paragraph>{message}</Paragraph>
                 <Button onClick={onAccept}>Accept</Button>
             </Container>
         </Container >
diff --git a/staff/tatiana-garcia/project/app/view/common/Confirm.jsx b/staff/tatiana-garcia/project/app/view/common/Confirm.jsx
new file mode 100644
index 000000000..d735ec3ad
--- /dev/null
+++ b/staff/tatiana-garcia/project/app/view/common/Confirm.jsx
@@ -0,0 +1,17 @@
+import Button from '../library/Button'
+import Container from '../library/Container'
+import Paragraph from '../library/Paragraph'
+
+export default function Confirm({ message, onAccept, onCancel }) {
+    return <>
+        <Container className="fixed w-screen top-0 h-screen bg-black opacity-60"></Container>
+
+        <Container className="fixed w-screen top-0 h-screen flex items-center justify-center">
+            <Container className="p-4 border bg-white flex-col">
+                <Paragraph>{message}</Paragraph>
+                <Button onClick={onCancel}>Cancel</Button>
+                <Button onClick={onAccept}>Ok</Button>
+            </Container>
+        </Container>
+    </>
+}
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/view/library/Form.jsx b/staff/tatiana-garcia/project/app/view/library/Form.jsx
new file mode 100644
index 000000000..f3c48d481
--- /dev/null
+++ b/staff/tatiana-garcia/project/app/view/library/Form.jsx
@@ -0,0 +1,5 @@
+export default function Form({ children, className = '', ...nextProps }) {
+    console.debug('Form -> call')
+
+    return <form className={`flex p-[0_.5rem_.5rem_.5rem] gap-2 min-w[80%] mb-[0%] ${className}`} {...nextProps}>{children}</form>
+}
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/view/library/Heading.jsx b/staff/tatiana-garcia/project/app/view/library/Heading.jsx
index bb21d3786..6880252dc 100644
--- a/staff/tatiana-garcia/project/app/view/library/Heading.jsx
+++ b/staff/tatiana-garcia/project/app/view/library/Heading.jsx
@@ -1,3 +1,4 @@
 export default function Heading({ level = 1, children, className = "", ...nextProps }) {
+    const Tag = `h${level}`
     return <Tag className={`${className}`} {...nextProps}>{children}</Tag>
 }
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/view/library/Input.jsx b/staff/tatiana-garcia/project/app/view/library/Input.jsx
new file mode 100644
index 000000000..2b898a8ff
--- /dev/null
+++ b/staff/tatiana-garcia/project/app/view/library/Input.jsx
@@ -0,0 +1,5 @@
+export default function Input({ className = '', ...nextProps }) {
+    console.debug('Input -> call')
+
+    return <input className={`${className}`} {...nextProps} />
+}
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/view/library/Label.jsx b/staff/tatiana-garcia/project/app/view/library/Label.jsx
new file mode 100644
index 000000000..317ab70e5
--- /dev/null
+++ b/staff/tatiana-garcia/project/app/view/library/Label.jsx
@@ -0,0 +1,5 @@
+export default function Label({ children, ...nextProps }) {
+    console.debug('Label -> call')
+
+    return <label className="m-0 italic dark:text-white" {...nextProps} >{children}</label>
+}
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/view/library/Paragraph.jsx b/staff/tatiana-garcia/project/app/view/library/Paragraph.jsx
new file mode 100644
index 000000000..f84a6e09c
--- /dev/null
+++ b/staff/tatiana-garcia/project/app/view/library/Paragraph.jsx
@@ -0,0 +1,3 @@
+export default function Paragraph({ children, className = '' }) {
+    return <p className={`m-2 ${className}`}>{children}</p>
+}
\ No newline at end of file
diff --git a/staff/tatiana-garcia/project/app/view/login/index.jsx b/staff/tatiana-garcia/project/app/view/login/index.jsx
index 0a74efe04..fb461e1ea 100644
--- a/staff/tatiana-garcia/project/app/view/login/index.jsx
+++ b/staff/tatiana-garcia/project/app/view/login/index.jsx
@@ -1,15 +1,18 @@
 import logic from '../../logic/index.js'
 
+import Heading from '../library/Heading.jsx'
 import Container from '../library/Container.jsx'
-
-import useContext from '../context.js'
+import Form from '../library/Form.jsx'
+import Label from '../library/Label.jsx'
+import Input from '../library/Input.jsx'
+import Button from '../library/Button.jsx'
+import Link from '../library/Link.jsx'
 
 import { errors } from '../../../com/index.js'
 
 const { NotFoundError, CredentialsError } = errors
 
-export default function Login({ onlogin, onRegisterClick }) {
-    const { alert } = useContext()
+export default function Login({ onLogin, onRegisterClick }) {
 
     const handleLoginSubmit = event => {
         event.preventDefault()
@@ -24,7 +27,7 @@ export default function Login({ onlogin, onRegisterClick }) {
 
         try {
             logic.loginUser(username, password)
-                .then(() => onlogin())
+                .then(() => onLogin())
                 .catch(error => {
                     console.error(error)
 
@@ -49,23 +52,23 @@ export default function Login({ onlogin, onRegisterClick }) {
     }
 
     return <main>
-        <header>Login</header>
+        <Heading>Login</Heading>
 
-        <form onSubmit={handleLoginSubmit}>
+        <Form onSubmit={handleLoginSubmit} className="flex-col">
             <Container>
-                <label htmlFor='username-input'>Nombre de usuario</label>
-                <input type='text' id='username-input' name='username' placeholder='nombre de usuario' />
+                <Label htmlFor='username-input'>Nombre de usuario</Label>
+                <Input type='text' id='username-input' name='username' placeholder='nombre de usuario' />
             </Container>
 
             <Container>
-                <label htmlFor='password-input'>Contraseña</label>
-                <input type='password' id='password-input' name='password' placeholder='contraseña' />
+                <Label htmlFor='password-input'>Contraseña</Label>
+                <Input type='password' id='password-input' name='password' placeholder='contraseña' />
             </Container>
 
-            <button type='submit'>Login</button>
-        </form>
+            <Button type='submit'>Login</Button>
+        </Form>
 
-        <link onClick={handleRegisterClick}>Registro</link>
+        <Link onClick={handleRegisterClick}>Registro</Link>
 
     </main>
 }
\ No newline at end of file