Skip to content

Commit

Permalink
Merge pull request #17 from DakshChan/feature/IBS-13
Browse files Browse the repository at this point in the history 
IBS-13
  • Loading branch information
@Kianoosh76
Kianoosh76 authored Jun 28, 2023
2 parents 6de26d3 + d2ef6e2 commit 8073b2c
Show file tree
Hide file tree
Showing 3 changed files with 289 additions and 87 deletions.
105 changes: 65 additions & 40 deletions frontend/src/components/Module/Navigation/NavBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react";
import {useNavigate, useParams} from 'react-router-dom';
import {Breadcrumbs, Typography, Toolbar, AppBar, Container, Box, IconButton, Button, TextField} from '@mui/material';
import React, { useState } from "react";
import { useNavigate, useParams } from 'react-router-dom';
import { Breadcrumbs, Typography, Toolbar, AppBar, Box, IconButton, Button, Menu, MenuItem } from '@mui/material';
import HomeIcon from '@mui/icons-material/Home';
import {Link} from "react-router-dom";
import { Link } from "react-router-dom";
import NavigateNextIcon from '@mui/icons-material/NavigateNext';

let NavBar = (props) => {
Expand All @@ -16,17 +16,23 @@ let NavBar = (props) => {
let origtoken = sessionStorage.getItem("origtoken");
let impersonated = false;

// console.log(origusername);
// console.log(origroles);

if (origusername !== null) {
impersonated = true;
impersonated = true;
}

// console.log(impersonated);
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};


let {course_id, task} = useParams();
let { course_id, task } = useParams();
const role = ((props.role === undefined || props.role === "student") ? "" : props.role);
//console.log(props.role, role);

let course_code = null;
if (roles) {
Expand All @@ -53,23 +59,23 @@ let NavBar = (props) => {
edge="start"
color="inherit"
aria-label="home"
sx={{mr: 2}}
sx={{ mr: 2 }}
>
<Box
component={Link}
sx={{color: "inherit", textDecoration: "inherit", display: "contents"}}
sx={{ color: "inherit", textDecoration: "inherit", display: "contents" }}
to="/home">
<HomeIcon/>
<HomeIcon />
</Box>
</IconButton>
<Breadcrumbs
separator={<NavigateNextIcon fontSize="small"/>}
separator={<NavigateNextIcon fontSize="small" />}
aria-label="breadcrumb"
sx={{flexGrow: 1, color: "inherit"}}
sx={{ flexGrow: 1, color: "inherit" }}
>
<Box
component={Link}
sx={{color: "inherit", textDecoration: "inherit", display: "contents"}}
sx={{ color: "inherit", textDecoration: "inherit", display: "contents" }}
to="/home">
<Typography variant="h6" component="div">
IBS
Expand All @@ -78,48 +84,67 @@ let NavBar = (props) => {

{course_code &&
<Typography variant="h6" component={Link}
sx={{color: "inherit", textDecoration: "inherit", display: "contents"}}
to={(role ? "/" + role : "") + "/course/" + course_id + "/task"}>
sx={{ color: "inherit", textDecoration: "inherit", display: "contents" }}
to={(role ? "/" + role : "") + "/course/" + course_id + "/task"}>
{course_code}
</Typography>
}
{task &&
<Typography variant="h6" component={Link}
sx={{color: "inherit", textDecoration: "inherit", display: "contents"}}
to={(role ? "/" + role : "") + "/course/" + course_id + "/task"}>
sx={{ color: "inherit", textDecoration: "inherit", display: "contents" }}
to={(role ? "/" + role : "") + "/course/" + course_id + "/task"}>
{task}
</Typography>
}
{task && props.page &&
<Typography variant="h6" component={Link}
sx={{color: "inherit", textDecoration: "inherit", display: "contents"}}
to={(role ? "/" + role : "") + "/course/" + course_id + "/task/" + task + "/" + props.page.toLowerCase()}>
sx={{ color: "inherit", textDecoration: "inherit", display: "contents" }}
to={(role ? "/" + role : "") + "/course/" + course_id + "/task/" + task + "/" + props.page.toLowerCase()}>
{props.page}
</Typography>
}
</Breadcrumbs>
{impersonated
? <>
<Typography> {origusername + " impersonating " + username} </Typography>
<Button color="inherit"
onClick={() => {
sessionStorage.setItem("username", origusername);
sessionStorage.setItem("roles", JSON.stringify(origroles));
sessionStorage.setItem("token", origtoken);
<Typography> {origusername + " impersonating " + username} </Typography>
<Button color="inherit"
onClick={() => {
sessionStorage.setItem("username", origusername);
sessionStorage.setItem("roles", JSON.stringify(origroles));
sessionStorage.setItem("token", origtoken);

sessionStorage.removeItem("origusername");
sessionStorage.removeItem("origroles");
sessionStorage.removeItem("origtoken");
navigate("/home");
navigate(0);
}}
variant={'outline'}>
Stop Impersonating
</Button>
</>
: <Typography> {username} </Typography>
sessionStorage.removeItem("origusername");
sessionStorage.removeItem("origroles");
sessionStorage.removeItem("origtoken");
navigate("/home");
navigate(0);
}}
variant={'outline'}>
Stop Impersonating
</Button>
</>
: <div>
<Button
color="inherit"
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
>
{username}
</Button>
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
{role === 'admin' &&
<MenuItem component={Link} to={(role ? "/" + role : "") + "/impersonate/"}>Student View</MenuItem>}
{role === 'instructor' &&
<MenuItem component={Link} to={(role ? "/" + role : "") + "/course/" + course_id + "/impersonate/"}>Impersonate</MenuItem>}
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</div>
}
<Button color="inherit" onClick={logout}>Logout</Button>
</Toolbar>
</AppBar>
</Box>
Expand Down
135 changes: 111 additions & 24 deletions frontend/src/components/Page/Admin/AdminImpersonate.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,120 @@
import {TextField} from "@mui/material";
import {useState} from "react";
import {useNavigate, useParams} from "react-router-dom";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import NavBar from "../../Module/Navigation/NavBar";
import CustomFormLabel from '../../FlexyMainComponents/forms/custom-elements/CustomFormLabel';
import FeatherIcon from 'feather-icons-react';
import {
Card,
CardContent,
Divider,
Box,
Typography,
Button,
FormControl,
InputAdornment,
OutlinedInput,
Grid,
} from '@mui/material';
import AdminApi from "../../../api/admin_api";

export default function AdminImpersonate() {
const [username, setUsername] = useState("");
const navigate = useNavigate();


return (
<form onSubmit={(e) => {
AdminApi.impersonate(username).then(
(response) => {
console.log(response);
sessionStorage.setItem("origusername", sessionStorage.getItem("username"));
sessionStorage.setItem("origroles", sessionStorage.getItem("roles"));
sessionStorage.setItem("origtoken", sessionStorage.getItem("token"));
sessionStorage.setItem("username", username);
sessionStorage.setItem("roles", JSON.stringify(response.data.roles));
sessionStorage.setItem("token", response.data.token);
navigate("/home");
navigate(0)
}
)
e.preventDefault();
}}>
<p>Admin Impersonate</p>
<TextField placeholder={"Enter username"} value={username} onChange={(e) => setUsername(e.target.value)}/>
<button>Impersonate</button>
</form>
<Grid container
direction="column"
height="100%"
wrap="nowrap">
<NavBar item page="Impersonate" />
<Grid item container
spacing={2}
direction="row"
justifyContent="center"
alignContent="center"
justify="center"
flex="1 1 auto">
<Grid item>
<Card
sx={{
p: 0,
}}
>
<Box
sx={{
padding: '15px 30px',
}}
display="flex"
alignItems="center"
>
<Box flexGrow={1}>
<Typography fontWeight="500" variant="h4">
Student View
</Typography>
</Box>
</Box>
<Divider />
<CardContent
sx={{
padding: '30px',
}}
>
<form onSubmit={(e) => {
AdminApi.impersonate(username).then(
(response) => {
console.log(response);
sessionStorage.setItem("origusername", sessionStorage.getItem("username"));
sessionStorage.setItem("origroles", sessionStorage.getItem("roles"));
sessionStorage.setItem("origtoken", sessionStorage.getItem("token"));
sessionStorage.setItem("username", username);
sessionStorage.setItem("roles", JSON.stringify(response.data.roles));
sessionStorage.setItem("token", response.data.token);
navigate("/home");
navigate(0)
}
)
e.preventDefault();
}}>
<FormControl>
<CustomFormLabel
sx={{
mt: 0,
}}
htmlFor="username-text"
>
Username
</CustomFormLabel>
<OutlinedInput
startAdornment={
<InputAdornment position="start">
<FeatherIcon icon="user" width="20" />
</InputAdornment>
}
placeholder={"Enter username"}
value={username}
onChange={(e) => setUsername(e.target.value)}
id="username-text"
size="small"
/>
</FormControl>

<Box pt={3} alignContent='center'>
<Button
type="submit"
color="primary"
variant="contained"
sx={{
mr: 1,
}}
>
View
</Button>
</Box>
</form>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
)
}
Loading

0 comments on commit 8073b2c

Please sign in to comment.