add Profile and Upload page b00tc4mp#382

staff/abel-prieto/PROYECT/HiInit/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "com": "link:..\\com",
+    "com": "file:../com",
     "dotenv": "^16.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -27,4 +27,4 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "vite": "^5.0.8"
   }
-}
+}

staff/abel-prieto/PROYECT/HiInit/src/components/Email.jsx

@@ -10,14 +10,19 @@ function Email() {
         setShowPassword(true)
     }
 
+    function showInputRepeatPassword() {
+        setShowRepeatPass(true)
+    }
+
     function handleSubmit(event) {
         event.preventDefault()
 
-        const email = event.target.querySelector('#email').value
+        const newEmail = event.target.querySelector('#new-email').value
         const password = event.target.querySelector('#password').value
+        const repeatPassword = event.target.querySelector('#repeat-password')
 
         try {
-            logic.loginUser(email, password)
+            logic.loginUser(newEmail, password, repeatPassword)
                 .then(() => onSuccess())
                 .catch(error => {
                     const clientError = document.querySelector('#client-error')
@@ -34,7 +39,7 @@ function Email() {
         document.body.addEventListener('keydown', function () {
             const clientError = document.querySelector('#client-error')
 
-            clientError.innerText = 'Entry your credentials: '
+            clientError.innerText = 'Change Email - Entry your data account: '
             clientError.style.color = '#EBDBB2'
         })
     }
@@ -44,27 +49,27 @@ function Email() {
             <p>~$</p>
 
             <span>
-                <form className="login-form" onSubmit={handleSubmit}>
-                    <p id="client-error">Entry your data account: </p>
+                <form onSubmit={handleSubmit}>
+                    <p id="client-error">Change Email - Entry your data account: </p>
 
                     {showNewEmail && (
                         <div className="fields">
-                            <label htmlFor="email"><p style={{ color: '#18E3C8' }}>New Email: </p></label>
-                            <input type="text" id="email" contentEditable="true" autoComplete="off" onChange={showInputPassword} />
+                            <label htmlFor="new-email"><p style={{ color: '#18E3C8' }}>New Email: </p></label>
+                            <input type="text" id="new-email" contentEditable="true" autoComplete="off" onChange={showInputPassword} />
                         </div>
                     )}
 
                     {showPassword && (
                         <div className="fields">
                             <label htmlFor="password"><p style={{ color: '#18E3C8' }}>Password: </p></label>
-                            <input type="password" id="password" contentEditable="true" autoComplete="off" />
+                            <input type="password" id="password" contentEditable="true" autoComplete="off" onChange={showInputRepeatPassword} />
                         </div>
                     )}
 
                     {showRepeatPass && (
                         <div className="fields">
-                            <label htmlFor="password"><p style={{ color: '#18E3C8' }}>Repeat password: </p></label>
-                            <input type="password" id="password" contentEditable="true" autoComplete="off" />
+                            <label htmlFor="repeat-password"><p style={{ color: '#18E3C8' }}>Repeat password: </p></label>
+                            <input type="password" id="repeat-password" contentEditable="true" autoComplete="off" />
                         </div>
                     )}
 

staff/abel-prieto/PROYECT/HiInit/src/components/Password.jsx

@@ -1,6 +1,83 @@
+import { useState } from 'react'
 
 function Password() {
+    // FIELDS STATE
+    const [showPassword, setShowPassword] = useState(true)
+    const [showNewPassword, setShowNewPassword] = useState(false)
+    const [showRepeatNewPass, setShowRepeatNewPass] = useState(false)
 
+    function showInputNewPassword() {
+        setShowNewPassword(true)
+    }
+
+    function showInputRepeatNewPassword() {
+        setShowRepeatNewPass(true)
+    }
+
+    function handleSubmit(event) {
+        event.preventDefault()
+
+        const password = event.target.querySelector('#password').value
+        const newPassword = event.target.querySelector('#new-password').value
+        const repeatNewPassword = event.target.querySelector('#repeat-new-password').value
+
+        try {
+            logic.loginUser(password, newPassword, repeatNewPassword)
+                .then(() => onSuccess())
+                .catch(error => {
+                    const clientError = document.querySelector('#client-error')
+
+                    clientError.innerText = error.message
+                    clientError.style.color = 'red'
+
+                    return
+                })
+        } catch (error) {
+            alert(error.message)
+        }
+
+        document.body.addEventListener('keydown', function () {
+            const clientError = document.querySelector('#client-error')
+
+            clientError.innerText = 'Change Password - Entry your data account: '
+            clientError.style.color = '#EBDBB2'
+        })
+    }
+
+    return <>
+        <div>
+            <p>~$</p>
+
+            <span>
+                <form onSubmit={handleSubmit}>
+                    <p id="client-error">Change Password - Entry your data account: </p>
+
+                    {showPassword && (
+                        <div className="fields">
+                            <label htmlFor="password"><p style={{ color: '#18E3C8' }}>Password: </p></label>
+                            <input type="password" id="password" contentEditable="true" autoComplete="off" onChange={showInputNewPassword} />
+                        </div>
+                    )}
+
+                    {showNewPassword && (
+                        <div className="fields">
+                            <label htmlFor="new-password"><p style={{ color: '#18E3C8' }}>New password: </p></label>
+                            <input type="password" id="new-password" contentEditable="true" autoComplete="off" onChange={showInputRepeatNewPassword} />
+                        </div>
+                    )}
+
+                    {showRepeatNewPass && (
+                        <div className="fields">
+                            <label htmlFor="repeat-new-password"><p style={{ color: '#18E3C8' }}>Repeat password: </p></label>
+                            <input type="password" id="repeat-new-password" contentEditable="true" autoComplete="off" />
+                        </div>
+                    )}
+
+                    <button className="button-form">Send</button>
+                </form>
+            </span>
+        </div >
+    </>
 }
 
 export default Password

staff/abel-prieto/PROYECT/HiInit/src/logic/loginUser.js

@@ -1,6 +1,5 @@
 import session from './session.js'
-import { validate } from 'com'
-import { errors } from 'com'
+import { validate, errors } from 'com'
 const { SystemError } = errors
 
 async function loginUser(email, password) {

staff/abel-prieto/PROYECT/HiInit/src/logic/uploadFile.js

@@ -1,4 +1,5 @@
-import session from './session'
+import session from './session.js'
+
 import { errors } from 'com'
 const { SystemError } = errors
 

staff/abel-prieto/PROYECT/HiInit/src/views/Desktop.jsx

@@ -70,7 +70,7 @@ function Desktop() {
 
                 {uknownCommand && (
                     <span>
-                        <p>shell: command not found: '{commandText}'. Entry login or register</p>
+                        <p>shell: command not found: '{commandText}'. Press 'help' to list commands</p>
                     </span>
                 )}