alt/zot-wo-auth
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth-disabled work

Browse Source 
Signed-off-by: Raul Cristian Kele <raulkeleblk@gmail.com>
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Cristian Kele 2022-07-05 17:20:27 +03:00 committed by Ramkumar Chinchani
parent f4797b9a75
commit cde4b9a9a1
6 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/App.js
View File

@ -7,52 +7,43 @@ import makeStyles from '@mui/styles/makeStyles';
import './App.css';
import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import { AuthWrapper } from 'utilities/AuthWrapper.jsx';
const useStyles = makeStyles((theme) => ({
}));
function App() {
const isUsername = () => {
const localStorageUsername = localStorage.getItem('username');
return localStorageUsername ? true : false;
};
const [username, setUsername] = useState(null);
const [password, setPassword] = useState(null);
const [hostFromStorage, setHostFromStorage] = useState(null);
const [searchKeywords, setSearchKeywords] = useState(null);
const [data, setData] = useState(null);
const [isAuthEnabled, setIsAuthEnabled] = useState(false)
const [isLoggedIn, setIsLoggedIn] = useState(isUsername())
const classes = useStyles();
useEffect(() => {
const localStorageHost = localStorage.getItem('host');
const localStorageUsername = localStorage.getItem('username');
const localStoragePassword = localStorage.getItem('password');
if (localStorageHost) {
setHostFromStorage(localStorageHost)
setUsername(localStorageUsername);
setPassword(localStoragePassword);
} else {
setHostFromStorage("")
}
}, [])
return (
<div className="App">
<Router>
{ hostFromStorage !== null && (
(hostFromStorage) ? (
<Routes>
<Route path="*" element={<Navigate to="/home"/>} />
<Route path="/home" element={<HomePage keywords={searchKeywords} updateKeywords={setSearchKeywords} data={data} updateData={setData}/>} />
<Route path="/image/:name*" element={<ImageDetails username={username} password={password}/>} />
</Routes>
) : (
<Routes>
<Route path="*" element={<Navigate to="/login" />} />
<Route path="/login" element={<LoginPage username={username} password={password} updateUsername={setUsername} updatePassword={setPassword}/>} />
</Routes>
)
)}
</Router>
<Router>
<Routes>
<Route element={<AuthWrapper isAuthEnabled={isAuthEnabled} isLoggedIn={isLoggedIn} redirect="/login" />}>
<Route path="/" element={<Navigate to="/login" />} />
<Route path="/login" element={<LoginPage isLoggedIn={isLoggedIn} username={username} password={password} updateUsername={setUsername} updatePassword={setPassword} isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} setIsLoggedIn={setIsLoggedIn} />} />
<Route path="/home" element={<HomePage keywords={searchKeywords} updateKeywords={setSearchKeywords} data={data} updateData={setData} />} />
<Route path="/image/:name" element={<ImageDetails username={username} password={password} />} />
</Route>
<Route element={<AuthWrapper isAuthEnabled={isAuthEnabled} isLoggedIn={!isLoggedIn} redirect="/"/>}>
<Route path="*" element={<Navigate to="/login" />} />
</Route>
</Routes>
</Router>
</div>
);
}

2
src/components/Explore.jsx
View File

@ -59,7 +59,7 @@ function Explore ({ keywords, data, updateData }) {
.catch(() => {
})
}, [])
},[])
useEffect(() => {
setIsLoading(false);

7
src/components/Header.jsx
View File

@ -117,12 +117,11 @@ function Header({ updateKeywords }) {
</div>
</Link>
</div>
{path !== '/login' && path !== '/' &&
{path !== '/' &&
<div className={classes.search}>
<SearchIcon className={classes.searchIcon}/>
<InputBase style={{height: 46}} placeholder="Search packages..." className={classes.input} onChange={e => updateKeywords(e.target.value)} disabled={path == '/' || path == '/login'}/>
<InputBase style={{height: 46}} placeholder="Search packages..." className={classes.input} onChange={e => updateKeywords(e.target.value)} disabled={path === '/'}/>
</div>}
{path !== '/login' &&
<div>
<Button
className={classes.icons}
@ -167,7 +166,7 @@ function Header({ updateKeywords }) {
</Grow>
)}
</Popper>
</div>}
</div>
</Toolbar>
{ path !== '/login' && path !== '/' && path !== '/home' && <ExploreHeader /> }
</AppBar>

44
src/components/SignIn.jsx
View File

@ -16,7 +16,7 @@ import CircularProgress from '@mui/material/CircularProgress';
import TermsOfService from './TermsOfService';
// styling
import { makeStyles } from '@mui/styles';
import { makeStyles, propsToClassKey } from '@mui/styles';
import { usePushingGutterStyles } from '@mui-treasury/styles/gutter/pushing';
import { Card, CardContent } from '@mui/material';
@ -44,45 +44,54 @@ const useStyles = makeStyles((theme) => ({
export default function SignIn({ username, updateUsername, password, updatePassword }) {
export default function SignIn({ username, updateUsername, password, updatePassword, isAuthEnabled, setIsAuthEnabled, isLoggedIn, setIsLoggedIn }) {
const [usernameError, setUsernameError] = useState(null);
const [passwordError, setPasswordError] = useState(null);
const [requestProcessing, setRequestProcessing] = useState(false);
const [requestError, setRequestError] = useState(false);
const [isAuthEnabled, setIsAuthEnabled] = useState(true);
const navigate = useNavigate();
const classes = useStyles();
useEffect(() => {
api.get(`${host}/v2`)
if(isAuthEnabled && isLoggedIn ) {
navigate("/home");
} else {
api.get(`${host}/v2/`)
.then(response => {
if (response.status === 200) {
setIsAuthEnabled(false);
setIsLoggedIn(true);
}
})
.catch(e => {
setIsAuthEnabled(true);
})
}
}, []);
const handleClick = (event) => {
event.preventDefault();
setRequestProcessing(true);
const token = btoa(username + ':' + password);
const cfg = {
headers: {
'Authorization': `Basic ${token}`,
}
};
let cfg = {};
if(isAuthEnabled) {
const token = btoa(username + ':' + password);
cfg = {
headers: {
'Authorization': `Basic ${token}`,
}
};
}
api.get(`${host}/query?query={ImageListWithLatestTag(){Name%20Latest%20Description%20Vendor%20Licenses%20Labels%20Size%20LastUpdated}}`,cfg)
.then(response => {
if (response.data && response.data.data) {
localStorage.setItem('username', username);
localStorage.setItem('password', password);
if(isAuthEnabled) {
localStorage.setItem('username', username);
localStorage.setItem('password', password);
setRequestProcessing(false);
setRequestError(false);
setRequestProcessing(false);
setRequestError(false);
setIsLoggedIn(true);
}
navigate("/home");
}
})
@ -121,7 +130,6 @@ export default function SignIn({ username, updateUsername, password, updatePassw
}
}
const gutterStyles = usePushingGutterStyles({ cssProp: 'marginBottom', space: 2 });
return (
<Box className={classes.cardContainer}>
@ -179,11 +187,11 @@ export default function SignIn({ username, updateUsername, password, updatePassw
</div>
</Box>
</>) : (
<div className={gutterStyles.parent}>
<div>
<Button
fullWidth
variant="outlined"
sx={{ mt: 3, mb: 2, color: "#fff", background: "#7C4DFF", border: 'white' }}
sx={{ mt: 3, mb: 2}}
onClick={handleClick}
> Continue as Guest
</Button>

4
src/pages/LoginPage.jsx
View File

@ -15,13 +15,13 @@ const useStyles = makeStyles((theme) => ({
},
}));
function LoginPage({username, updateUsername, password, updatePassword }) {
function LoginPage({username, updateUsername, password, updatePassword, 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} />
<SignIn username={username} updateUsername={updateUsername} password={password} updatePassword={updatePassword} isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
</Grid>
<Grid item xs={6}>
<SigninPresentation/>

11
src/utilities/AuthWrapper.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
const AuthWrapper = ({isAuthEnabled,isLoggedIn, redirect}) => {
if(!isAuthEnabled) {
return <Outlet/>
}
return isLoggedIn ? <Outlet />: <Navigate to={redirect} replace={true} />;
};
export {AuthWrapper};