Skip to content

Commit 8d10be9

Browse files
DrewManleyDrewManley
committed
Merge branch 'development' into drew/process-logs-alerts
2 parents f004314 + d343f30 commit 8d10be9

39 files changed

+723
-815
lines changed

‎src/components/Authentication.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React from 'react';
22
import { Navigate } from 'react-router-dom';
33
import { useSelector } from 'react-redux';
4+
import { RootState } from '../../types'
45

5-
interface RootState {
6-
session: {
7-
isLoggedIn: boolean
8-
}
9-
}
106

117
const Authentication = () => {
128
// grab session information from state
13-
const session: boolean = useSelector((state: RootState) => state.session.isLoggedIn);
9+
const session: any = useSelector((state: RootState) => state.session.isLoggedIn);
1410
// if session is false navigate to login, if session is true navigate to outlet
1511
return (
1612
session ? <Navigate to='/app' /> : <Navigate to='/login' />

‎src/components/Login.tsx‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,15 @@
1111
//MUI Elements
1212
import TextField from '@mui/material/TextField';
1313
import Button from '@mui/material/Button';
14+
import { grey } from '@mui/material/colors';
15+
1416

1517
// @ts-ignore
1618
import Docketeer from '../../assets/docketeer-title.png';
19+
20+
// import interface
21+
import { UserInfo } from '../../types';
1722

18-
interface UserInfo {
19-
_id: number,
20-
username: string,
21-
email: string,
22-
phone: string,
23-
role: string,
24-
role_id: number,
25-
contact_pref: string | null,
26-
mem_threshold: number,
27-
cpu_threshold: number,
28-
container_stops: boolean,
29-
token: string
30-
}
3123

3224
const Login = () => {
3325
const navigate = useNavigate();
@@ -99,7 +91,7 @@
9991
id='username'
10092
label='Username'
10193
variant='outlined'
102-
94+
value= 'sysadmin'
10395
/>
10496
<br />
10597
<br />
@@ -108,7 +100,7 @@
108100
label='Password'
109101
type='password'
110102
variant='outlined'
111-
103+
value ='belugas'
112104
/>
113105
<br />
114106
{/* * Login Button * */}
@@ -119,12 +111,27 @@
119111
size='medium'
120112
onClick={() => handleLogin}
121113
sx={{
122-
m: 1
114+
marginTop: 1,
115+
marginBottom:1
123116
}}
124117
>
125118
Login
126119
</Button>
127-
<button className='btn-signup' onClick={ () => navigate('/signup') }>New SysAdmin Sign Up</button>
120+
<br/>
121+
<Button
122+
variant= 'contained'
123+
// color='grey'
124+
size='small'
125+
onClick={()=> navigate('/userSignup')}
126+
sx={{
127+
color:'#1976d2',
128+
background:'white',
129+
marginTop:1
130+
}}
131+
>
132+
Register New Sysadmin
133+
</Button>
134+
<br/>
128135
</form>
129136
</div>
130137
</div>

‎src/components/RenderViews.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@ import { useSelector } from 'react-redux';
44
import AdminView from './views/Admin';
55
import UserView from './views/UserView';
66
import SysAdminView from './views/SysAdmin';
7-
8-
interface RootState {
9-
session: {
10-
role: string
11-
}
12-
}
7+
import { RootState } from '../../types';
138

149
const RenderViews = ():any => {
1510
// grab current user's role

‎src/components/SignUp.tsx‎

Lines changed: 143 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
import React from "react";
1+
import React, {useState} from "react";
22
import { useNavigate } from 'react-router-dom';
33

44
// Material UI Imports
5-
import TextField from "@mui/material/TextField";
6-
import Button from "@mui/material/Button";
5+
import TextField from '@mui/material/TextField';
6+
import Button from '@mui/material/Button';
7+
import Box from '@mui/material/Box';
8+
import IconButton from '@mui/material/IconButton';
9+
import OutlinedInput from '@mui/material/OutlinedInput';
10+
import InputLabel from '@mui/material/InputLabel';
11+
import InputAdornment from '@mui/material/InputAdornment';
12+
import FormControl from '@mui/material/FormControl';
13+
import Visibility from '@mui/icons-material/Visibility';
14+
import VisibilityOff from '@mui/icons-material/VisibilityOff';
15+
import PasswordStrengthBar from 'react-password-strength-bar';
16+
717

818
// Helper Functions
919
import {
@@ -15,89 +25,144 @@ import {
1525

1626
const SignUp = () => {
1727
const navigate = useNavigate();
18-
28+
const [values, setValues] = useState({
29+
email: '',
30+
username: '',
31+
password: '',
32+
passwordConfirmation: '',
33+
phone: '',
34+
showPassword: false,
35+
});
36+
37+
const handleClickShowPassword = () => {
38+
setValues({
39+
...values,
40+
showPassword: !values.showPassword,
41+
});
42+
};
43+
1944
return (
2045
<div className='renderContainers'>
2146
<div className='header'>
2247
<h1 className='tabTitle'>Sign Up</h1>
2348
</div>
2449
<div className='settings-container'>
25-
<form className='loginForm' >
26-
<TextField
27-
id="signupEmail"
28-
label="Email"
29-
variant="outlined"
30-
sx={{
31-
m: 1,
32-
}}
33-
/>
34-
<br />
35-
<TextField
36-
id="signupUsername"
37-
label="Username"
38-
variant="outlined"
39-
sx={{
40-
m: 1,
41-
}}
42-
/>
43-
<br />
44-
<TextField
45-
id="signupPassword"
46-
label="Password"
47-
variant="outlined"
48-
type="password"
49-
onChange={() => checkPasswordLength()}
50-
sx={{
51-
m: 1,
52-
}}
53-
/>
54-
<span id="password-length-alert"></span>
55-
<br />
56-
<TextField
57-
id="signupPasswordConfirmation"
58-
label="Confirm Password"
59-
variant="outlined"
60-
type="password"
61-
onChange={() => confirmPassword()}
62-
sx={{
63-
m: 1,
64-
}}
65-
/>
66-
<span id="password-confirmation-alert"></span>
67-
<br />
68-
<TextField
69-
id="signupPhone"
70-
label="Phone"
71-
variant="outlined"
72-
onChange={() => {
73-
//fixing the property 'value' does not exist on type 'HTMLElement'
74-
const inputValue = (
75-
document.getElementById("signupPhone") as HTMLTextAreaElement
76-
).value;
77-
checkPhone(inputValue);
78-
}}
79-
sx={{
80-
m: 1,
81-
}}
50+
<Box
51+
className='settingsForm'
52+
component= 'form'
53+
autoComplete= 'off'
54+
onSubmit={(e: any) => handleNewUser(e, e.target.roleID)}
55+
sx={{color:'blue'}}
56+
>
57+
58+
<TextField
59+
id='signupEmail'
60+
label='Email'
61+
variant='outlined'
62+
required
63+
sx={{
64+
m: 1
65+
}}
66+
/>
67+
<br />
68+
<TextField
69+
id='signupUsername'
70+
label='Username'
71+
variant='outlined'
72+
required
73+
inputProps={{ minLength: 4, maxLength: 16 }}
74+
sx={{
75+
m: 1
76+
}}
77+
/>
78+
<br />
79+
80+
<FormControl sx={{ m: 1, maxWidth:195 }} variant="outlined">
81+
<InputLabel htmlFor="signupPassword">Password</InputLabel>
82+
<OutlinedInput
83+
id="signupPassword"
84+
type={values.showPassword ? 'text' : 'password'}
85+
onChange={(e)=>{
86+
checkPasswordLength();
87+
setValues({...values, password:e.target.value})
88+
}}
89+
endAdornment={
90+
<InputAdornment position="end">
91+
<IconButton
92+
aria-label="toggle password visibility"
93+
onClick={handleClickShowPassword}
94+
// onMouseDown={handleMouseDownPassword}
95+
edge="end"
96+
>
97+
{values.showPassword ? <VisibilityOff /> : <Visibility />}
98+
</IconButton>
99+
</InputAdornment>
100+
}
101+
label="Password"
82102
/>
83-
<br />
84-
<span id="phone-alert"></span>
85-
<br />
86-
<Button
87-
variant="contained"
88-
size="medium"
89-
type="submit"
90-
onClick={(e) => {
91-
handleNewUser(e, '1')
92-
navigate('/')
93-
}}
94-
sx={{
95-
m: 1,
96-
}}
97-
>
98-
Submit
103+
</FormControl>
104+
{values.password && <PasswordStrengthBar style={{maxWidth:'190px', color:'red',marginLeft:10 }} password= {values.password}/>}
105+
<span id='password-length-alert' style={{fontSize:10, textAlign:'left', maxWidth:190, display:'inline-block', marginLeft:10}}></span>
106+
107+
<br />
108+
<TextField
109+
id='signupPasswordConfirmation'
110+
label='Confirm Password'
111+
variant='outlined'
112+
type='password'
113+
required
114+
onChange={(e) => {
115+
setValues({...values, passwordConfirmation:e.target.value})
116+
confirmPassword()
117+
}}
118+
sx={{
119+
m: 1
120+
}}
121+
/>
122+
{/* This is sacrilege but I hardcoded this bar and made it hidden to keep the same formatting as above */}
123+
{<PasswordStrengthBar style={{maxWidth:'190px', color:'red',marginBottom:-20,visibility:'hidden', maxHeight:0 }} />}
124+
<span id='password-confirmation-alert' style={{fontSize:10, textAlign:'left', maxWidth:190, display:'inline-block', marginLeft:10, paddingTop:15}}></span>
125+
<br />
126+
<TextField
127+
id='signupPhone'
128+
label='Phone'
129+
variant='outlined'
130+
required
131+
inputProps={{maxLength: 12 }}
132+
133+
onChange={() => {
134+
const inputElement =(document.getElementById('signupPhone') as HTMLInputElement).value;
135+
checkPhone(inputElement)
136+
}}
137+
sx={{
138+
m: 1
139+
}}
140+
/>
141+
<br />
142+
<span id='phone-alert'></span>
143+
<br />
144+
<Button
145+
variant='contained'
146+
size='medium'
147+
onClick={()=>{
148+
history.back()}}
149+
sx={{
150+
m: 1
151+
}}
152+
>
153+
Back
99154
</Button>
100-
</form>
155+
<Button
156+
variant='contained'
157+
size='medium'
158+
type='submit'
159+
sx={{
160+
m: 1
161+
}}
162+
>
163+
Submit
164+
</Button>
165+
</Box>
101166
</div>
102167
</div>
103168
)

‎src/components/debug/debugRouter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ class DebugRouter extends Router {
88
this.history.listen((location, action)=>{
99
console.log(
1010
`The current URL is ${location.pathname}${location.search}${location.hash}`
11-
)
11+
);
1212
console.log(`The last navigation action was ${action}`, JSON.stringify(this.history, null,2));
1313
});
1414
}

‎src/components/display/AccountDisplay.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
* @module AccountDisplay
33
* @description Account Display for Settings tab, this will host any forms to update account details such as email, passwords, etc.
44
*/
5-
import React, { useEffect, useState } from "react";
6-
import { useSelector, useDispatch } from "react-redux";
5+
import React from "react";
6+
import { useSelector } from "react-redux";
77

88
// Material UI Imports
99
import Button from "@mui/material/Button";

0 commit comments

Comments
 (0)