From 729d3735e9b76b1d46b1a959a94bb2467d45e1ab Mon Sep 17 00:00:00 2001
From: Samuel Costa <samcosta333@gmail.com>
Date: Mon, 10 Jun 2024 16:10:52 +0200
Subject: [PATCH 1/2] Added device name field in the device registration

---
 frontend/src/App.tsx                      |  2 +-
 frontend/src/Components/LinkDevice.tsx    | 33 +++++---
 frontend/src/Components/Navbar/Navbar.tsx | 94 +++++++++++------------
 node/code/RIOT                            |  2 +-
 4 files changed, 72 insertions(+), 59 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d855b45e..cfeff6c6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -70,7 +70,7 @@ function App() {
   return <button onClick={() => void auth.signinRedirect()}>Log in</button>; */
   return[
     <Navbar/>,
-    <Settings/>,
+    <LinkDevice/>,
     <Footer/>,
   ];
 }
diff --git a/frontend/src/Components/LinkDevice.tsx b/frontend/src/Components/LinkDevice.tsx
index bcd432c3..c3a93ca2 100644
--- a/frontend/src/Components/LinkDevice.tsx
+++ b/frontend/src/Components/LinkDevice.tsx
@@ -4,19 +4,24 @@ import 'reactjs-popup/dist/index.css';
 
 function LinkDevice() {
     const [open, setOpen] = useState(false);
-    const [deviceId, setDeviceId] = useState("");
+    const [deviceKey, setDeviceKey] = useState("");
+    const [deviceName, setDeviceName] = useState("");
 
-    const handleInputChange = (e: { target: { value: SetStateAction<string>; }; }) => {
-        setDeviceId(e.target.value);
+    const handleInputChangeKey = (e: { target: { value: SetStateAction<string>; }; }) => {
+        setDeviceKey(e.target.value);
     };    
 
+    const handleInputChangeDName = (e: {target: { value: SetStateAction<string>; }; }) => {
+        setDeviceName(e.target.value);
+    }
+
     const handleSubmit = (e: { preventDefault: () => void; }) => {
         e.preventDefault(); // Prevent form from reloading the page
-        if (deviceId.trim() === "") {
+        if (deviceKey.trim() === "") {
             return;
         }
         // TODO: Save the device ID or perform any action with the input value
-        console.log("Device ID:", deviceId);
+        console.log("Device ID:", deviceKey," Device Name:", deviceName);
         setOpen(false); // Close the popup after submission
     };
 
@@ -42,16 +47,26 @@ function LinkDevice() {
                     <form className="row g-0 needs-validation" onSubmit={handleSubmit}>
                         <figure className='text-center'>
                             <p className='lead'>
-                                <strong>Enter your device ID below:</strong>
+                                <strong>Enter your device Key Registration and Name below:</strong>
                             </p>
                         </figure>
-                        <div className="input-group col mb-1">
+
+                        <div className="input-group  mb-1">
                             <span className="input-group-text">#</span>
-                            <label htmlFor="inputLink" className="visually-hidden">Device ID</label>
+                            <label htmlFor="inputLink" className="visually-hidden">Device Key Registration</label>
                             <input type="text" className="form-control" id="inputDeviceId" 
-                            placeholder="Device ID" required value={deviceId} onChange={handleInputChange}/>
+                            placeholder="Device Key Registration" required value={deviceKey} onChange={handleInputChangeKey}/>
+                            <div className='invalid-feedback'>ok</div>
+                        </div>
+
+                        <div className="input-group mb-1 py-2">
+                            <span className="input-group-text">@</span>
+                            <label htmlFor="inputLink" className="visually-hidden">Device Name</label>
+                            <input type="text" className="form-control" id="inputDeviceName" 
+                            placeholder="Device Name" required value={deviceName} onChange={handleInputChangeDName}/>
                             <div className='invalid-feedback'>ok</div>
                         </div>
+
                         <button type='submit' className='btn btn-success mt-2 mb-2'>
                             Link device
                         </button>
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index f7c07156..bcd5e408 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -21,57 +21,55 @@ const Navbar = () =>{
         setActivePage(page);
     };
 
-
     return (
+        <div>    
+            <nav className="navbar navbar-expand-lg navbar-dark bg-success">
+            <img src={"./android-chrome-192x192.png"} alt="Logo" style={{ width: '30px', height: '30px', marginLeft: '5px' }} />        
+            <a className="navbar-brand" href="#"> TEAMAGOCHI</a>
+            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"></span>
+            </button>
 
-<div>    
-    <nav className="navbar navbar-expand-lg navbar-dark bg-success">
-    <img src={"./android-chrome-192x192.png"} alt="Logo" style={{ width: '30px', height: '30px', marginLeft: '5px' }} />        
-    <a className="navbar-brand" href="#"> TEAMAGOCHI</a>
-    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span className="navbar-toggler-icon"></span>
-    </button>
-
-    <div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent" style={navbarItemStyles}>
-        <ul className="navbar-nav ">
-        <li className={`nav-item ${activePage === 'Pet Page' ? 'active' : ''}`}>
-            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Pet Page')}>Pet Page</a>
-        </li>
-        <li className={`nav-item ${activePage === 'Inventory' ? 'active' : ''}`}>
-            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Inventory')}>Inventory</a>
-        </li>
-        <li className={`nav-item ${activePage === 'Friends' ? 'active' : ''}`}>
-            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Friends')}>Friends</a>
-        </li>
-        <li className={`nav-item ${activePage === 'Settings' ? 'active' : ''}`}>
-            <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Settings')}>Settings</a>
-        </li>
-        {/* <li className="nav-item dropdown" style={navbarItemStyles}>
-            <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={navbarItemStyles}>
-            Settings
-            </a>
-            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a className="dropdown-item" href="#">Action</a>
-            <a className="dropdown-item" href="#">Another action</a>
-            <div className="dropdown-divider"></div>
-            <a className="dropdown-item" href="#">Something else here</a>
+            <div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent" style={navbarItemStyles}>
+                <ul className="navbar-nav ">
+                <li className={`nav-item ${activePage === 'Pet Page' ? 'active' : ''}`}>
+                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Pet Page')}>Pet Page</a>
+                </li>
+                <li className={`nav-item ${activePage === 'Inventory' ? 'active' : ''}`}>
+                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Inventory')}>Inventory</a>
+                </li>
+                <li className={`nav-item ${activePage === 'Friends' ? 'active' : ''}`}>
+                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Friends')}>Friends</a>
+                </li>
+                <li className={`nav-item ${activePage === 'Settings' ? 'active' : ''}`}>
+                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Settings')}>Settings</a>
+                </li>
+                {/* <li className="nav-item dropdown" style={navbarItemStyles}>
+                    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={navbarItemStyles}>
+                    Settings
+                    </a>
+                    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <a className="dropdown-item" href="#">Action</a>
+                    <a className="dropdown-item" href="#">Another action</a>
+                    <div className="dropdown-divider"></div>
+                    <a className="dropdown-item" href="#">Something else here</a>
+                    </div>
+                </li> */}
+                {auth.isAuthenticated ? (
+                <li className="navbar-item">
+                    <button className="nav-link" onClick={() => auth.removeUser()} style={loginButtonStyles}>Log out</button>
+                </li>
+                ) : (
+                <li className="navbar-item">
+                    <a className="nav-link" href="#" onClick={() => auth.signinRedirect()} style={loginButtonStyles}>Log in</a>
+                </li>
+                )}
+                
+                </ul>
             </div>
-        </li> */}
-        {auth.isAuthenticated ? (
-        <li className="navbar-item">
-            <button className="nav-link" onClick={() => auth.removeUser()} style={loginButtonStyles}>Log out</button>
-        </li>
-        ) : (
-        <li className="navbar-item">
-            <a className="nav-link" href="#" onClick={() => auth.signinRedirect()} style={loginButtonStyles}>Log in</a>
-        </li>
-        )}
-        
-        </ul>
-    </div>
-    </nav>
-</div>
+            </nav>
+        </div>
     )
 }
 
-export default Navbar
\ No newline at end of file
+export default Navbar
diff --git a/node/code/RIOT b/node/code/RIOT
index a67793d6..886c6a27 160000
--- a/node/code/RIOT
+++ b/node/code/RIOT
@@ -1 +1 @@
-Subproject commit a67793d6018c17256a5666a665fddf45fbc803f2
+Subproject commit 886c6a27099bed0157a3bc21fbcd221778bf834d

From 8cadca4823c0cf506763b8e773e8e265d11b746c Mon Sep 17 00:00:00 2001
From: Samuel Costa <samcosta333@gmail.com>
Date: Mon, 10 Jun 2024 16:14:02 +0200
Subject: [PATCH 2/2] Added devide name field in device registration

---
 frontend/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cfeff6c6..d855b45e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -70,7 +70,7 @@ function App() {
   return <button onClick={() => void auth.signinRedirect()}>Log in</button>; */
   return[
     <Navbar/>,
-    <LinkDevice/>,
+    <Settings/>,
     <Footer/>,
   ];
 }