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

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

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
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 { AppTopbar } from './AppTopbar';
@ -50,6 +50,10 @@ import './assets/demo/Demos.scss';
import './assets/layout/layout.scss';
import './App.scss';
import LogIn from './components/LogIn';
import { useCookies } from "react-cookie";
import LoginLocalStorage from './components/LoginLocalStorage';
const App = () => {
const [layoutMode, setLayoutMode] = useState('static');
@ -62,8 +66,9 @@ const App = () => {
const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
const copyTooltipRef = useRef();
const location = useLocation();
const [cookies, setCookies] = useCookies();
const handleLogout=()=>{
const handleLogout = () => {
localStorage.clear();
window.location.reload();
}
@ -117,24 +122,6 @@ const App = () => {
}
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();
}
@ -166,18 +153,50 @@ const App = () => {
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 = [
{
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: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad'},
{label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas'},
{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 out', icon: 'pi pi-fw pi-id-card', to: '/logOut'}
{ 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: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
{ label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas' },
{ 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 out', icon: 'pi pi-fw pi-id-card', to: '/logOut' }
]
},
{
@ -282,7 +301,6 @@ const App = () => {
else
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
const wrapperClass = classNames('layout-wrapper', {
'layout-overlay': layoutMode === 'overlay',
'layout-static': layoutMode === 'static',
@ -295,6 +313,11 @@ const App = () => {
});
return (
<BrowserRouter>
<Switch>
<Route exact path="/login" component={LoginLocalStorage} />
<div className={wrapperClass} onClick={onWrapperClick}>
<Tooltip ref={copyTooltipRef} target=".block-action-copy" position="bottom" content="Copied to clipboard" event="focus" />
@ -302,11 +325,12 @@ const App = () => {
mobileTopbarMenuActive={mobileTopbarMenuActive} onMobileTopbarMenuClick={onMobileTopbarMenuClick} onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick} />
<div className="layout-sidebar" onClick={onSidebarClick}>
<AppMenu model={menu} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
<AppMenu model={menu4()} onMenuItemClick={onMenuItemClick} layoutColorMode={layoutColorMode} />
</div>
<div className="layout-main-container">
<div className="layout-main">
<Route path="/" exact render={() => <Dashboard colorMode={layoutColorMode} location={location} />} />
<Route path="/formlayout" component={FormLayoutDemo} />
<Route path="/input" component={InputDemo} />
@ -321,7 +345,7 @@ const App = () => {
<Route path="/media" component={MediaDemo} />
<Route path="/menu" component={MenuDemo} />
<Route path="/messages" component={MessagesDemo} />
<Route path="/blocks" component={BlocksDemo} />
{/*<Route path="/blocks" component={BlocksDemo} />*/}
<Route path="/icons" component={IconsDemo} />
<Route path="/file" component={FileDemo} />
<Route path="/chart" render={() => <ChartDemo colorMode={layoutColorMode} location={location} />} />
@ -335,8 +359,8 @@ const App = () => {
<Route path="/guardasSeguridad" component={GuardasSeguridad} />
<Route path="/comunidadesViviendas" component={Communities} />
<Route path="/inquilinos" component={Inquilinos} />
<Route path="/logIn" component={LogIn} />
<button onClick={handleLogout}>Logout</button>
<Route path="/login" component={LoginLocalStorage} />
</div>
<AppFooter layoutColorMode={layoutColorMode} />
@ -349,6 +373,9 @@ const App = () => {
<div className="layout-mask p-component-overlay"></div>
</CSSTransition>
</div>
</Switch>
</BrowserRouter>
);
}

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

@ -109,10 +109,7 @@ export const AppMenu = (props) => {
return (
<div className="layout-menu-container">
<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>
);
}

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

@ -1,9 +1,21 @@
import React from 'react';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import Cookies from 'universal-cookie';
const cookies = new Cookies();
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 (
<div className="layout-topbar">
<Link to="/" className="layout-topbar-logo">
@ -37,6 +49,7 @@ export const AppTopbar = (props) => {
<i className="pi pi-user" />
<span>Profile</span>
</button>
<button type="button" onClick={() => cerrarSesion()}>Logout</button>
</li>
</ul>
</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('name', user.name, { 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}`);
window.location.href = "/";
} 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 { BrowserRouter, Switch, Route } from 'react-router-dom';
import { AppMenu } from '../AppMenu';
import { CSSTransition } from 'react-transition-group';
const cookies = new Cookies();
@ -59,6 +60,7 @@ class MenuAdmin extends Component {
cookies.remove('id', { path: "/" });
cookies.remove('email', { path: "/" });
cookies.remove('name', { path: "/" });
cookies.remove('type', { path: "/" });
window.location.href = '/login';
}
@ -89,6 +91,9 @@ class MenuAdmin extends Component {
</div>
<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>
);
}

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 App from './App';
//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 Routes from './routes/Routes';
@ -12,7 +12,7 @@ import Routes from './routes/Routes';
ReactDOM.render(
<HashRouter>
<ScrollToTop>
<Routes/>
<App/>
</ScrollToTop>
</HashRouter>,
document.getElementById('root')

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

@ -1,17 +1,36 @@
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import React, { useEffect, useRef } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import App from '../App';
import LoginLocalStorage from '../components/LoginLocalStorage';
import MenuAdmin from '../components/MenuAdmin';
import Menu from '../pages/Menu';
import MenuAdminCommunity from '../components/MenuAdminCommunity';
import { useCookies } from "react-cookie";
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 (
<BrowserRouter>
<Switch>
<Route exact path="/login" component={LoginLocalStorage}/>
<Route exact path="/" component={MenuAdmin}/>
<Route exact path="/login" component={LoginLocalStorage} />
<Route exact path="/" component={App} />
</Switch>
</BrowserRouter>
);