Files
Tempest/imports/ui/pages/Student/StudentPage.jsx

80 lines
2.4 KiB
JavaScript

import { Meteor } from 'meteor/meteor';
import {Roles} from 'meteor/alanning:roles';
import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import {Link} from 'react-router-dom';
import _ from 'lodash';
import Button from "@mui/material/Button";
import {Box, Grid} from "@mui/material";
export const StudentPage = (props) => {
const {user, canManageLaptops, isAdmin} = useTracker(() => {
const user = Meteor.user();
const canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
const isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
return {
user,
canManageLaptops,
isAdmin
}
})
function performLogin() {
//Login style can be "popup" or "redirect". I am not sure we need to request and offline token.
Meteor.loginWithGoogle({loginStyle: "popup", requestOfflineToken: true}, (err) => {
if (err) {
console.log(err);
} else {
//console.log("Logged in");
}
})
}
function performLogout() {
Meteor.logout();
}
return (
<>
{!user && (
<>
<div style={{width: '100%', height: '100%', background: 'url(/images/student.svg)', backgroundSize: 'cover', backgroundPosition: 'center bottom', position: 'fixed', right: 0, bottom: 0, top: 0, left: 0}}> </div>
<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%', width: '100%'}}>
<Button css={{height: "100%", width: '100px', margin: 'auto'}} variant="contained" className="button" onClick={performLogin}>Login</Button>*/}
</div>
</>
)}
{user && (
<>
<div className='pageHeaderContainer'>
<div className="container">
<header className="row pageHeader">
<div className="col-12 logoContainer">
<img className="logo" src="/images/logo.svg" alt="Logo"/>
<div className="login">
<button type="button" role="button" onClick={performLogout}>Logout</button>
</div>
</div>
<div className="col-12 center title">Tempest</div>
</header>
</div>
</div>
<div className='pageNavContainer'>
<div className='container'>
<header className='row pageNavHeader'>
<nav className="col-12 center">
<Link to='/'>Home</Link>
</nav>
</header>
</div>
</div>
<div className='pageContentContainer'>
{props.children}
</div>
</>
)}
</>
)
}