80 lines
2.4 KiB
JavaScript
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>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
} |