add new pages: Profile (Email & Password), Upload and Download | Crea…

…te routes to API from diferents pages b00tc4mp#382
abelpriem · Mar 7, 2024 · 09b3b58 · 09b3b58
1 parent 903e7b0
commit 09b3b58
Show file tree

Hide file tree

Showing 27 changed files with 477 additions and 189 deletions.
diff --git a/staff/abel-prieto/PROYECT/HiInit/package-lock.json b/staff/abel-prieto/PROYECT/HiInit/package-lock.json
diff --git a/staff/abel-prieto/PROYECT/HiInit/package.json b/staff/abel-prieto/PROYECT/HiInit/package.json
@@ -12,10 +12,12 @@
   "dependencies": {
     "com": "file:../com",
     "dotenv": "^16.4.4",
+    "pnpm": "^8.15.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
-    "sass": "^1.69.5"
+    "sass": "^1.69.5",
+    "sweetalert2": "^11.10.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/Context.jsx b/staff/abel-prieto/PROYECT/HiInit/src/Context.jsx
@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const Context = createContext()
+
+export default Context
diff --git a/staff/abel-prieto/PROYECT/HiInit/src/components/Download.jsx b/staff/abel-prieto/PROYECT/HiInit/src/components/Download.jsx
@@ -0,0 +1,75 @@
+import { useState, useEffect, useContext } from "react"
+import { useNavigate } from "react-router-dom"
+import Context from "../Context"
+import { CommandBar, Pointer } from "../utils"
+
+function Download() {
+
+    // POINTER, UKNOWN COMMAND & POINTER STATE
+    const [commandText, setCommandText] = useState('')
+    const [uknownCommand, setUknownCommand] = useState(false)
+    const { pointer } = Pointer()
+
+    // VIEWS
+    const navigate = useNavigate()
+    const { handleError } = useContext(Context)
+
+    // ESCUCHA TECLADO, ERROR Y ESCRITURA
+    useEffect(() => {
+        const handleKeyPress = (event) => {
+            let commandText = document.getElementById('command').value
+
+            if ((commandText === 'desktop' || commandText === 'DESKTOP') && event.key === 'Enter') {
+                setUknownCommand(false)
+                navigate('/desktop')
+            } else if ((commandText === 'EXIT' || commandText === 'exit') && event.key === 'Enter') {
+                handleLogout()
+            } else if (event.key === 'Enter') {
+                setUknownCommand(!uknownCommand)
+            }
+        }
+
+        const handleKeyDown = () => {
+            setUknownCommand(false)
+        }
+
+        document.addEventListener('keypress', handleKeyPress)
+        document.addEventListener('keydown', handleKeyDown)
+
+        return () => {
+            document.removeEventListener('keypress', handleKeyPress)
+            document.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [navigate, uknownCommand])
+
+    return <>
+        <div className="container">
+
+            <p>~$</p>
+            <p id="client-error-upload">Entry 'ls' command to list all your save files:  </p>
+
+            <br />
+
+            <div className="command-bar">
+                <CommandBar />
+                <div id="command-form">
+                    <input id="command" type="text" contentEditable="true" autoFocus autoComplete="off" value={commandText} onChange={(event) => setCommandText(event.target.value)}
+                        style={{ width: `${Math.max(10, commandText.length * 8)}px` }} />
+                </div>
+                <p>{pointer}</p>
+            </div>
+
+            <br />
+
+            {uknownCommand && (
+                <>
+                    <span>
+                        <p>shell: command not found: '{commandText}'. Entry desktop, ls or exit</p>
+                    </span>
+                </>
+            )}
+        </div>
+    </>
+}
+
+export default Download
diff --git a/staff/abel-prieto/PROYECT/HiInit/src/components/Email.jsx b/staff/abel-prieto/PROYECT/HiInit/src/components/Email.jsx
@@ -1,12 +1,17 @@
-import { useState } from 'react'
+import { useState, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
 import logic from '../logic'
+import Context from '../Context'
 
 function Email() {
     // FIELDS STATE
     const [showNewEmail, setShowNewEmail] = useState(true)
     const [showPassword, setShowPassword] = useState(false)
     const [showRepeatPass, setShowRepeatPass] = useState(false)
 
+    const { handleError } = useContext(Context)
+    const navigate = useNavigate()
+
     function showInputPassword() {
         setShowPassword(true)
     }
@@ -34,12 +39,19 @@ function Email() {
                     const clientError = document.querySelector('#client-error-email')
 
                     clientError.innerText = error.message
-                    clientError.style.color = 'red'
+                    clientError.style.color = 'tomato'
+
+                    handleError(error, navigate)
 
                     return
                 })
         } catch (error) {
-            alert(error.message)
+            const clientError = document.querySelector('#client-error-email')
+
+            clientError.innerText = error.message
+            clientError.style.color = 'tomato'
+
+            handleError(error, navigate)
         }
 
         document.body.addEventListener('keydown', function () {

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/components/Login.jsx b/staff/abel-prieto/PROYECT/HiInit/src/components/Login.jsx
@@ -1,12 +1,17 @@
-import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useState, useContext } from 'react'
 import logic from '../logic'
+import Context from '../Context'
 
 function Login({ onSuccess }) {
 
     // FIELDS STATE
     const [showEmail, setShowEmail] = useState(true)
     const [showPassword, setShowPassword] = useState(false)
 
+    const navigate = useNavigate()
+    const { handleError } = useContext(Context)
+
     function showInputPassword() {
         setShowPassword(true)
     }
@@ -21,32 +26,38 @@ function Login({ onSuccess }) {
             logic.loginUser(email, password)
                 .then(() => onSuccess())
                 .catch(error => {
-                    const clientError = document.querySelector('#client-error')
+                    const clientError = document.querySelector('#client-error-login')
 
                     clientError.innerText = error.message
-                    clientError.style.color = 'red'
+                    clientError.style.color = 'tomato'
+
+                    handleError(error, navigate)
 
                     return
                 })
         } catch (error) {
-            alert(error.message)
+            const clientError = document.querySelector('#client-error-login')
+
+            clientError.innerText = error.message
+            clientError.style.color = 'tomato'
+
+            handleError(error, navigate)
         }
 
         document.body.addEventListener('keydown', function () {
-            const clientError = document.querySelector('#client-error')
+            const clientError = document.querySelector('#client-error-login')
 
-            clientError.innerText = 'Entry your credentials: '
+            clientError.innerText = 'Login - Entry your credentials: '
             clientError.style.color = '#EBDBB2'
         })
     }
 
     return <>
         <div>
             <p>~$</p>
-
             <span>
                 <form className="login-form" onSubmit={handleSubmit}>
-                    <p id="client-error">Entry your credentials: </p>
+                    <p id="client-error-login">Login - Entry your credentials: </p>
 
                     {showEmail && (
                         <div className="fields">

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/components/Password.jsx b/staff/abel-prieto/PROYECT/HiInit/src/components/Password.jsx
@@ -1,12 +1,17 @@
-import { useState } from 'react'
+import { useContext, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import logic from '../logic'
+import Context from '../Context'
 
 function Password() {
     // FIELDS STATE
     const [showPassword, setShowPassword] = useState(true)
     const [showNewPassword, setShowNewPassword] = useState(false)
     const [showRepeatNewPass, setShowRepeatNewPass] = useState(false)
 
+    const navigate = useNavigate()
+    const { handleError } = useContext(Context)
+
     function showInputNewPassword() {
         setShowNewPassword(true)
     }
@@ -34,12 +39,19 @@ function Password() {
                     const clientError = document.querySelector('#client-error-password')
 
                     clientError.innerText = error.message
-                    clientError.style.color = 'red'
+                    clientError.style.color = 'tomato'
+
+                    handleError(error, navigate)
 
                     return
                 })
         } catch (error) {
-            alert(error.message)
+            const clientError = document.querySelector('#client-error-password')
+
+            clientError.innerText = error.message
+            clientError.style.color = 'tomato'
+
+            handleError(error, navigate)
         }
 
         document.body.addEventListener('keydown', function () {

diff --git a/staff/abel-prieto/PROYECT/HiInit/src/components/Register.jsx b/staff/abel-prieto/PROYECT/HiInit/src/components/Register.jsx
@@ -1,5 +1,7 @@
-import { useState } from 'react'
+import { useState, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
 import logic from '../logic'
+import Context from '../Context'
 
 function Register({ onSuccess }) {
 
@@ -8,6 +10,9 @@ function Register({ onSuccess }) {
     const [showEmail, setShowEmail] = useState(false)
     const [showPassword, setShowPassword] = useState(false)
 
+    const navigate = useNavigate()
+    const { handleError } = useContext(Context)
+
     // SHOW EMAIL INPUT
     function showInputEmail() {
         setShowEmail(true)
@@ -30,31 +35,39 @@ function Register({ onSuccess }) {
             return logic.registerUser(username, email, password)
                 .then(() => onSuccess())
                 .catch(error => {
-                    const clientError = document.querySelector('#client-error')
+                    const clientError = document.querySelector('#client-error-register')
 
                     clientError.innerText = error.message
-                    clientError.style.color = 'red'
+                    clientError.style.color = 'tomato'
+
+                    handleError(error, navigate)
 
                     return
                 })
         } catch (error) {
-            alert(error.message)
+            const clientError = document.querySelector('#client-error-register')
+
+            clientError.innerText = error.message
+            clientError.style.color = 'tomato'
+
+            handleError(error, navigate)
         }
 
         document.body.addEventListener('keydown', function () {
-            const clientError = document.querySelector('#client-error')
+            const clientError = document.querySelector('#client-error-register')
 
-            clientError.innerText = 'Create your account data: '
+            clientError.innerText = 'Register - Create your account data: '
             clientError.style.color = '#EBDBB2'
         })
     }
 
+
     return <>
         <div>
             <p>~$</p>
             <span>
                 <form className="register-form" onSubmit={handleSubmit}>
-                    <p id="client-error">Create your account data: </p>
+                    <p id="client-error-register">Register - Create your account data: </p>
 
                     <div className="space-between">
                         {showUsername && (