Replaced user-pass storage with token

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/App.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import HomePage from './pages/HomePage.jsx'
 import LoginPage from './pages/LoginPage.jsx'
-import RepoDetails from './components/RepoDetails.jsx'
 
 import makeStyles from '@mui/styles/makeStyles';
 
@@ -17,16 +16,15 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function App() {
-  const isUsername = () => {
-    const localStorageUsername = localStorage.getItem('username');
-    return localStorageUsername ? true : false;
+  const isToken = () => {
+    const localStorageToken = localStorage.getItem('token');
+    return localStorageToken ? true : false;
   };
-  const [username, setUsername] = useState(null);
-  const [password, setPassword] = useState(null);
+
   const [searchKeywords, setSearchKeywords] = useState(null);
   const [data, setData] = useState(null);
   const [isAuthEnabled, setIsAuthEnabled] = useState(true)
-  const [isLoggedIn, setIsLoggedIn] = useState(isUsername())
+  const [isLoggedIn, setIsLoggedIn] = useState(isToken())
   const classes = useStyles();
 
 
@@ -42,7 +40,7 @@ function App() {
             <Route path="/image/:name" element={<RepoPage />} />
           </Route>
           <Route element={<AuthWrapper isLoggedIn={!isLoggedIn} redirect="/"/>}>
-            <Route path="/login" element={<LoginPage username={username} password={password} updateUsername={setUsername} updatePassword={setPassword} isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />} />
+            <Route path="/login" element={<LoginPage isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />} />
             <Route path="*" element={<Navigate to="/login" />} />
           </Route>
         </Routes>

src/api.js

@@ -9,10 +9,8 @@ const api = {
             Accept: 'application/json',
             'Content-Type': 'application/json',
         };
-        const username = localStorage.getItem('username');
-        if(username) {
-            const password = localStorage.getItem('password');
-            const token = btoa(username + ':' + password);
+        const token = localStorage.getItem('token');
+        if(token) {
             const authHeaders = {
                 Accept: 'application/json',
                 'Content-Type': 'application/json',

src/components/Header.jsx

@@ -76,9 +76,7 @@ function Header({ updateKeywords }) {
   };
 
   const handleClose = (event) => {
-      localStorage.removeItem('host');
-      localStorage.removeItem('username');
-      localStorage.removeItem('password');
+      localStorage.removeItem('token');
       window.location.reload();
     if (anchorRef.current && anchorRef.current.contains(event.target)) {
       return;

src/components/SignIn.jsx

@@ -43,9 +43,11 @@ const useStyles = makeStyles((theme) => ({
 
 
 
-export default function SignIn({ username, updateUsername, password, updatePassword, isAuthEnabled, setIsAuthEnabled, isLoggedIn, setIsLoggedIn }) {
+export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, setIsLoggedIn }) {
   const [usernameError, setUsernameError] = useState(null);
   const [passwordError, setPasswordError] = useState(null);
+  const [username, setUsername] = useState(null);
+  const [password, setPassword] = useState(null);
   const [requestProcessing, setRequestProcessing] = useState(false);
   const [requestError, setRequestError] = useState(false);
   const navigate = useNavigate();
@@ -83,9 +85,8 @@ export default function SignIn({ username, updateUsername, password, updatePassw
       .then(response => {
         if (response.data && response.data.data) {
           if(isAuthEnabled) {
-            localStorage.setItem('username', username);
-            localStorage.setItem('password', password);
-
+            const token = btoa(username + ':' + password);
+            localStorage.setItem('token',token);
             setRequestProcessing(false);
             setRequestError(false);
           }
@@ -108,7 +109,7 @@ export default function SignIn({ username, updateUsername, password, updatePassw
 
     switch (type) {
       case 'username':
-        updateUsername(val);
+        setUsername(val);
         if (isEmpty) {
           setUsernameError('Please enter a username');
         } else {
@@ -116,7 +117,7 @@ export default function SignIn({ username, updateUsername, password, updatePassw
         }
         break;
       case 'password':
-        updatePassword(val);
+        setPassword(val);
         if (isEmpty) {
           setPasswordError('Please enter a password');
         } else {

src/pages/LoginPage.jsx

@@ -15,13 +15,13 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function LoginPage({username, updateUsername, password, updatePassword, isAuthEnabled, setIsAuthEnabled, isLoggedIn,setIsLoggedIn }) {
+function LoginPage({isAuthEnabled, setIsAuthEnabled, isLoggedIn,setIsLoggedIn }) {
   const classes = useStyles();
 
   return (
         <Grid container spacing={0} className={classes.container}>
           <Grid item xs={6}>
-            <SignIn username={username} updateUsername={updateUsername} password={password} updatePassword={updatePassword} isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
+            <SignIn isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
           </Grid>
           <Grid item xs={6}>
             <SigninPresentation/>