Add several components to library, implement authenticate-user.sh tes…

…t and modified index.js of login b00tc4mp#99

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)

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"

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",

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
+}

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

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 >

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>
+    </>
+}

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>
+}

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>
 }

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} />
+}

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>
+}

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>
+}

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>
 }