eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

login for user type

This commit is contained in:
Mariela 2022-08-11 00:55:45 -06:00
parent e059363d53
commit 48f5c58f4a
8 changed files with 273 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
web-ui/web-react/src/App.js
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { Route, useLocation } from 'react-router-dom'; import { BrowserRouter, Switch, Route, useLocation } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import { AppTopbar } from './AppTopbar'; import { AppTopbar } from './AppTopbar';
@ -50,6 +50,10 @@ import './assets/demo/Demos.scss';
import './assets/layout/layout.scss'; import './assets/layout/layout.scss';
import './App.scss'; import './App.scss';
import LogIn from './components/LogIn'; import LogIn from './components/LogIn';
import { useCookies } from "react-cookie";
import LoginLocalStorage from './components/LoginLocalStorage';
const App = () => { const App = () => {
const [layoutMode, setLayoutMode] = useState('static'); const [layoutMode, setLayoutMode] = useState('static');
@ -62,8 +66,9 @@ const App = () => {
const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false); const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
const copyTooltipRef = useRef(); const copyTooltipRef = useRef();
const location = useLocation(); const location = useLocation();
const [cookies, setCookies] = useCookies();
const handleLogout=()=>{ const handleLogout = () => {
localStorage.clear(); localStorage.clear();
window.location.reload(); window.location.reload();
} }
@ -117,24 +122,6 @@ const App = () => {
} }
const onToggleMenuClick = (event) => { const onToggleMenuClick = (event) => {
menuClick = true;
if (isDesktop()) {
if (layoutMode === 'overlay') {
if (mobileMenuActive === true) {
setOverlayMenuActive(true);
}
setOverlayMenuActive((prevState) => !prevState);
setMobileMenuActive(false);
}
else if (layoutMode === 'static') {
setStaticMenuInactive((prevState) => !prevState);
}
}
else {
setMobileMenuActive((prevState) => !prevState);
}
event.preventDefault(); event.preventDefault();
} }
@ -166,18 +153,50 @@ const App = () => {
return window.innerWidth >= 992; return window.innerWidth >= 992;
} }
const menu2 = [
{
label: 'Home',
items: [
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
{ label: 'Administradores del sistema', icon: 'pi pi-fw pi-id-card', to: '/administradoresSistema' },
{ label: 'Administradores de comunidad', icon: 'pi pi-fw pi-id-card', to: '/administradoresComunidad' },
{ label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas' },
]
}
]
const menu3 = [
{
label: 'Home',
items: [
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
{ label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos' },
{ label: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
]
},
]
function menu4() {
if (cookies.type == '1') {
return menu2;
} else if (cookies.type == '2') {
return menu3;
}
}
const menu = [ const menu = [
{ {
label: 'Home', label: 'Home',
items: [ items: [
{label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/'}, { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
{label: 'Administradores del sistema', icon: 'pi pi-fw pi-id-card', to: '/administradoresSistema'}, { label: 'Administradores del sistema', icon: 'pi pi-fw pi-id-card', to: '/administradoresSistema' },
{label: 'Administradores de comunidad', icon: 'pi pi-fw pi-id-card', to: '/administradoresComunidad'}, { label: 'Administradores de comunidad', icon: 'pi pi-fw pi-id-card', to: '/administradoresComunidad' },
{label: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad'}, { label: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
{label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas'}, { label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas' },
{label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos'}, { label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos' },
{label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn'}, { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
{label: 'Log out', icon: 'pi pi-fw pi-id-card', to: '/logOut'} { label: 'Log out', icon: 'pi pi-fw pi-id-card', to: '/logOut' }
] ]
}, },
{ {
@ -282,7 +301,6 @@ const App = () => {
else else
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
} }
const wrapperClass = classNames('layout-wrapper', { const wrapperClass = classNames('layout-wrapper', {
'layout-overlay': layoutMode === 'overlay', 'layout-overlay': layoutMode === 'overlay',
'layout-static': layoutMode === 'static', 'layout-static': layoutMode === 'static',
@ -295,60 +313,69 @@ const App = () => {
}); });
return ( return (
<div className={wrapperClass} onClick={onWrapperClick}>
<Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
<AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode} <BrowserRouter>
mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} /> <Switch>
<Route exact path="/login" component={LoginLocalStorage} />
<div className="layout-sidebar" onClick={onSidebarClick}> <div className={wrapperClass} onClick={onWrapperClick}>
<AppMenu model={menu} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} /> <Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
</div>
<div className="layout-main-container"> <AppTopbar onToggleMenuClick={onToggleMenuClick} layoutColorMode={layoutColorMode}
<div className="layout-main"> mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} />
<Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
<Route path="/formlayout" component={FormLayoutDemo} /> <div className="layout-sidebar" onClick={onSidebarClick}>
<Route path="/input" component={InputDemo} /> <AppMenu model={menu4()} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
<Route path="/floatlabel" component={FloatLabelDemo} /> </div>
<Route path="/invalidstate" component={InvalidStateDemo} />
<Route path="/button" component={ButtonDemo} /> <div className="layout-main-container">
<Route path="/table" component={TableDemo} /> <div className="layout-main">
<Route path="/list" component={ListDemo} />
<Route path="/tree" component={TreeDemo} /> <Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
<Route path="/panel" component={PanelDemo} /> <Route path="/formlayout" component={FormLayoutDemo} />
<Route path="/overlay" component={OverlayDemo} /> <Route path="/input" component={InputDemo} />
<Route path="/media" component={MediaDemo} /> <Route path="/floatlabel" component={FloatLabelDemo} />
<Route path="/menu" component={MenuDemo} /> <Route path="/invalidstate" component={InvalidStateDemo} />
<Route path="/messages" component={MessagesDemo} /> <Route path="/button" component={ButtonDemo} />
<Route path="/blocks" component={BlocksDemo} /> <Route path="/table" component={TableDemo} />
<Route path="/icons" component={IconsDemo} /> <Route path="/list" component={ListDemo} />
<Route path="/file" component={FileDemo} /> <Route path="/tree" component={TreeDemo} />
<Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} /> <Route path="/panel" component={PanelDemo} />
<Route path="/misc" component={MiscDemo} /> <Route path="/overlay" component={OverlayDemo} />
<Route path="/timeline" component={TimelineDemo} /> <Route path="/media" component={MediaDemo} />
<Route path="/crud" component={Crud} /> <Route path="/menu" component={MenuDemo} />
<Route path="/empty" component={EmptyPage} /> <Route path="/messages" component={MessagesDemo} />
<Route path="/documentation" component={Documentation} /> {/*<Route path="/blocks" component={BlocksDemo} />*/}
<Route path="/administradoresSistema" component={AdministradoresSistema} /> <Route path="/icons" component={IconsDemo} />
<Route path="/administradoresComunidad" component={AdministradoresComunidad} /> <Route path="/file" component={FileDemo} />
<Route path="/guardasSeguridad" component={GuardasSeguridad} /> <Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} />
<Route path="/comunidadesViviendas" component={Communities} /> <Route path="/misc" component={MiscDemo} />
<Route path="/inquilinos" component={Inquilinos} /> <Route path="/timeline" component={TimelineDemo} />
<Route path="/logIn" component={LogIn} /> <Route path="/crud" component={Crud} />
<button onClick={handleLogout}>Logout</button> <Route path="/empty" component={EmptyPage} />
<Route path="/documentation" component={Documentation} />
<Route path="/administradoresSistema" component={AdministradoresSistema} />
<Route path="/administradoresComunidad" component={AdministradoresComunidad} />
<Route path="/guardasSeguridad" component={GuardasSeguridad} />
<Route path="/comunidadesViviendas" component={Communities} />
<Route path="/inquilinos" component={Inquilinos} />
<Route path="/login" component={LoginLocalStorage} />
</div>
<AppFooter layoutColorMode={layoutColorMode} />
</div>
<AppConfig rippleEffect={ripple} onRippleEffect={onRipple} inputStyle={inputStyle} onInputStyleChange={onInputStyleChange}
layoutMode={layoutMode} onLayoutModeChange={onLayoutModeChange} layoutColorMode={layoutColorMode} onColorModeChange={onColorModeChange} />
<CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
<div className="layout-mask p-component-overlay"></div>
</CSSTransition>
</div> </div>
</Switch>
</BrowserRouter>
<AppFooter layoutColorMode={layoutColorMode} />
</div>
<AppConfig rippleEffect={ripple} onRippleEffect={onRipple} inputStyle={inputStyle} onInputStyleChange={onInputStyleChange}
layoutMode={layoutMode} onLayoutModeChange={onLayoutModeChange} layoutColorMode={layoutColorMode} onColorModeChange={onColorModeChange} />
<CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={mobileMenuActive} unmountOnExit>
<div className="layout-mask p-component-overlay"></div>
</CSSTransition>
</div>
); );
} }

5
web-ui/web-react/src/AppMenu.js
View File

@ -109,10 +109,7 @@ export const AppMenu = (props) => {
return ( return (
<div className="layout-menu-container"> <div className="layout-menu-container">
<AppSubmenu items={props.model} className="layout-menu" onMenuItemClick={props.onMenuItemClick} root={true} role="menu" /> <AppSubmenu items={props.model} className="layout-menu" onMenuItemClick={props.onMenuItemClick} root={true} role="menu" />
<a href="https://www.primefaces.org/primeblocks-react" className="block mt-3">
<img alt="primeblocks" className="w-full"
src={props.layoutColorMode === 'light' ? 'assets/layout/images/banner-primeblocks.png' : 'assets/layout/images/banner-primeblocks-dark.png'}/>
</a>
</div> </div>
); );
} }

13
web-ui/web-react/src/AppTopbar.js
View File

@ -1,9 +1,21 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import classNames from 'classnames'; import classNames from 'classnames';
import Cookies from 'universal-cookie';
const cookies = new Cookies();
export const AppTopbar = (props) => { export const AppTopbar = (props) => {
function cerrarSesion() {
cookies.remove('id', { path: "/" });
cookies.remove('email', { path: "/" });
cookies.remove('name', { path: "/" });
cookies.remove('type', { path: "/" });
cookies.remove('community_id', { path: "/" });
window.location.href = '/login';
}
return ( return (
<div className="layout-topbar"> <div className="layout-topbar">
<Link to="/" className="layout-topbar-logo"> <Link to="/" className="layout-topbar-logo">
@ -37,6 +49,7 @@ export const AppTopbar = (props) => {
<i className="pi pi-user" /> <i className="pi pi-user" />
<span>Profile</span> <span>Profile</span>
</button> </button>
<button type="button" onClick={() => cerrarSesion()}>Logout</button>
</li> </li>
</ul> </ul>
</div> </div>

4
web-ui/web-react/src/components/LoginLocalStorage.js
View File

@ -52,6 +52,10 @@ class LoginLocalStorage extends Component {
cookies.set('id', user._id, { path: "/" }); cookies.set('id', user._id, { path: "/" });
cookies.set('name', user.name, { path: "/" }); cookies.set('name', user.name, { path: "/" });
cookies.set('email', user.email, { path: "/" }); cookies.set('email', user.email, { path: "/" });
cookies.set('type', user.user_type, { path: "/" });
if(user.user_type != '1') {
cookies.set('community_id', user.community_id, { path: "/" });
}
alert(`Bienvenido ${user.name}`); alert(`Bienvenido ${user.name}`);
window.location.href = "/"; window.location.href = "/";
} else { } else {

5
web-ui/web-react/src/components/MenuAdmin.js
View File

@ -6,6 +6,7 @@ import Communities from '../components/ComunidadViviendas';
import Dashboard from '../templates/Dashboard'; import Dashboard from '../templates/Dashboard';
import { BrowserRouter, Switch, Route } from 'react-router-dom'; import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { AppMenu } from '../AppMenu'; import { AppMenu } from '../AppMenu';
import { CSSTransition } from 'react-transition-group';
const cookies = new Cookies(); const cookies = new Cookies();
@ -59,6 +60,7 @@ class MenuAdmin extends Component {
cookies.remove('id', { path: "/" }); cookies.remove('id', { path: "/" });
cookies.remove('email', { path: "/" }); cookies.remove('email', { path: "/" });
cookies.remove('name', { path: "/" }); cookies.remove('name', { path: "/" });
cookies.remove('type', { path: "/" });
window.location.href = '/login'; window.location.href = '/login';
} }
@ -89,6 +91,9 @@ class MenuAdmin extends Component {
</div> </div>
<br /> <br />
<CSSTransition classNames="layout-mask" timeout={{ enter: 200, exit: 200 }} in={this.state.mobileMenuActive} unmountOnExit>
<div className="layout-mask p-component-overlay"></div>
</CSSTransition>
</div> </div>
); );
} }

119
web-ui/web-react/src/components/MenuAdminCommunity.js Normal file
View File

@ -0,0 +1,119 @@
import React, { Component } from 'react';
import Cookies from 'universal-cookie';
import Inquilinos from './Inquilinos';
import GuardasSeguridad from './GuardasSeguridad';
import Dashboard from '../templates/Dashboard';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { AppMenu } from '../AppMenu';
const cookies = new Cookies();
const menu = [
{
label: 'Home',
items: [
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
{ label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos' },
{ label: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
]
},
];
class MenuAdminCommunity extends Component {
constructor() {
super()
this.state = {
layoutColorMode: 'light',
layoutMode: 'static',
menuClick: false,
mobileTopbarMenuClick: false,
overlayMenuActive: false,
mobileMenuActive: false
}
}
onSidebarClick = () => {
this.setState({
menuClick: true
})
}
onMenuItemClick = (event) => {
if (!event.item.items) {
this.setState({
overlayMenuActive: false,
mobileMenuActive: false
})
}
}
cerrarSesion = () => {
cookies.remove('id', { path: "/" });
cookies.remove('email', { path: "/" });
cookies.remove('name', { path: "/" });
cookies.remove('type', { path: "/" });
cookies.remove('community_id', { path: "/" });
window.location.href = '/login';
}
componentDidMount() {
if (!cookies.get('email')) {
window.location.href = "/login";
}
}
onWrapperClick = (event) => {
if (!this.state.menuClick) {
this.setState({
overlayMenuActive: false,
mobileMenuActive: false
})
}
if (!this.state.mobileTopbarMenuClick) {
this.setState({
mobileTopbarMenuClick: false,
})
}
this.setState({
mobileTopbarMenuClick: false,
menuClick: false
})
}
render() {
return (
<div className={this.wrapperClass} onClick={this.onWrapperClick}>
<div>
Menu Principal
<div className="layout-sidebar" onClick={this.onSidebarClick}>
<AppMenu model={menu} onMenuItemClick={this.onMenuItemClick} layoutColorMode={this.state.layoutColorMode} />
<button type="button" onClick={() => this.cerrarSesion()}>Logout</button>
</div>
<div className="layout-main-container">
<div className="layout-main">
<Route exact path="/" render={() => <Dashboard colorMode={this.state.layoutColorMode} />} />
<Route path="/inquilinos" component={Inquilinos} />
<Route path="/guardasSeguridad" component={GuardasSeguridad} />
</div>
</div>
<br />
</div>
</div>
);
}
}
export default MenuAdminCommunity;

4
web-ui/web-react/src/index.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
//import * as serviceWorker from './serviceWorker'; //import * as serviceWorker from './serviceWorker';
import { HashRouter, Route } from 'react-router-dom' import { HashRouter, Route, Router } from 'react-router-dom'
import ScrollToTop from './ScrollToTop'; import ScrollToTop from './ScrollToTop';
import Routes from './routes/Routes'; import Routes from './routes/Routes';
@ -12,7 +12,7 @@ import Routes from './routes/Routes';
ReactDOM.render( ReactDOM.render(
<HashRouter> <HashRouter>
<ScrollToTop> <ScrollToTop>
<Routes/> <App/>
</ScrollToTop> </ScrollToTop>
</HashRouter>, </HashRouter>,
document.getElementById('root') document.getElementById('root')

27
web-ui/web-react/src/routes/Routes.js
View File

@ -1,17 +1,36 @@
import React from 'react'; import React, { useEffect, useRef } from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom'; import { BrowserRouter, Switch, Route } from 'react-router-dom';
import App from '../App'; import App from '../App';
import LoginLocalStorage from '../components/LoginLocalStorage'; import LoginLocalStorage from '../components/LoginLocalStorage';
import MenuAdmin from '../components/MenuAdmin'; import MenuAdmin from '../components/MenuAdmin';
import Menu from '../pages/Menu'; import Menu from '../pages/Menu';
import MenuAdminCommunity from '../components/MenuAdminCommunity';
import { useCookies } from "react-cookie";
function Routes() { function Routes() {
const [cookies, setCookies] = useCookies();
function getMenu() {
console.log(cookies.type)
switch(cookies.type) {
case '1':
return <Route exact path="/" component={MenuAdmin} />
case '2':
return <Route exact path="/" component={MenuAdminCommunity} />
}
}
return ( return (
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route exact path="/login" component={LoginLocalStorage}/> <Route exact path="/login" component={LoginLocalStorage} />
<Route exact path="/" component={MenuAdmin}/> <Route exact path="/" component={App} />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
); );