Skip to content

Commit 33b8347

Browse files
SbethmSbethm
authored
Merge pull request #54 from oslabs-beta/scout
Scout
2 parents 1806a08 + b540ab4 commit 33b8347

File tree

2 files changed

+167
-83
lines changed

2 files changed

+167
-83
lines changed

‎src/components/SignUp.tsx‎

Lines changed: 167 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
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+
import RadioGroup from "@mui/material/RadioGroup";
17+
import Radio from "@mui/material/Radio";
18+
import FormControlLabel from '@mui/material/FormControlLabel';
719

820
// Helper Functions
921
import {
@@ -13,91 +25,167 @@ import {
1325
checkPhone,
1426
} from "./helper/newUserHelper";
1527

28+
// this will store the value from the user role
29+
let valueRole = '3';
30+
//setting value of the RadioGroup MUI Component to the one selected by the user
31+
const handleSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
32+
valueRole = (event.target as HTMLInputElement).value;
33+
}
34+
1635
const SignUp = () => {
1736
const navigate = useNavigate();
18-
37+
const [values, setValues] = useState({
38+
email: '',
39+
username: '',
40+
password: '',
41+
passwordConfirmation: '',
42+
phone: '',
43+
showPassword: false,
44+
});
45+
46+
const handleClickShowPassword = () => {
47+
setValues({
48+
...values,
49+
showPassword: !values.showPassword,
50+
});
51+
};
1952
return (
2053
<div className='renderContainers'>
2154
<div className='header'>
2255
<h1 className='tabTitle'>Sign Up</h1>
2356
</div>
2457
<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-
}}
58+
<Box
59+
className='settingsForm'
60+
component= 'form'
61+
autoComplete= 'off'
62+
onSubmit={(e) => handleNewUser(e)}
63+
sx={{color:'blue'}}
64+
>
65+
66+
<TextField
67+
id='signupEmail'
68+
label='Email'
69+
variant='outlined'
70+
required
71+
sx={{
72+
m: 1
73+
}}
74+
/>
75+
<br />
76+
<TextField
77+
id='signupUsername'
78+
label='Username'
79+
variant='outlined'
80+
required
81+
inputProps={{ minLength: 4, maxLength: 16 }}
82+
sx={{
83+
m: 1
84+
}}
85+
/>
86+
<br />
87+
88+
<FormControl sx={{ m: 1, maxWidth:195 }} variant="outlined">
89+
<InputLabel htmlFor="signupPassword">Password</InputLabel>
90+
<OutlinedInput
91+
id="signupPassword"
92+
type={values.showPassword ? 'text' : 'password'}
93+
onChange={(e)=>{
94+
checkPasswordLength(e);
95+
setValues({...values, password:e.target.value})
96+
}}
97+
endAdornment={
98+
<InputAdornment position="end">
99+
<IconButton
100+
aria-label="toggle password visibility"
101+
onClick={handleClickShowPassword}
102+
// onMouseDown={handleMouseDownPassword}
103+
edge="end"
104+
>
105+
{values.showPassword ? <VisibilityOff /> : <Visibility />}
106+
</IconButton>
107+
</InputAdornment>
108+
}
109+
label="Password"
82110
/>
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
99-
</Button>
100-
</form>
111+
</FormControl>
112+
{values.password && <PasswordStrengthBar style={{maxWidth:'190px', color:'red',marginLeft:10 }} password= {values.password}/>}
113+
<span id='password-length-alert' style={{fontSize:10, textAlign:'left', maxWidth:190, display:'inline-block', marginLeft:10}}></span>
114+
115+
{/* <TextField
116+
id='signupPassword'
117+
label='Password'
118+
variant='outlined'
119+
type='password'
120+
required
121+
inputProps={{ minLength: 6, maxLength: 16 }}
122+
123+
onChange={(e) => {
124+
setPassword(e.target.value);
125+
checkPasswordLength(e);}}
126+
sx={{
127+
m: 1
128+
}}
129+
/> */}
130+
131+
{/* {password && <PasswordStrengthBar style={{maxWidth:'190px', color:'red',marginLeft:10 }} password= {password}/>}
132+
<span id='password-length-alert' style={{fontSize:10, textAlign:'left', maxWidth:190, display:'inline-block', marginLeft:10}}></span> */}
133+
134+
<br />
135+
<TextField
136+
id='signupPasswordConfirmation'
137+
label='Confirm Password'
138+
variant='outlined'
139+
type='password'
140+
required
141+
onChange={(e) => {
142+
setValues({...values, passwordConfirmation:e.target.value})
143+
confirmPassword(e)
144+
}}
145+
sx={{
146+
m: 1
147+
}}
148+
/>
149+
{/* This is sacrilege but I hardcoded this bar and made it hidden to keep the same formatting as above */}
150+
{<PasswordStrengthBar style={{maxWidth:'190px', color:'red',marginBottom:-20,visibility:'hidden', maxHeight:0 }} />}
151+
<span id='password-confirmation-alert' style={{fontSize:10, textAlign:'left', maxWidth:190, display:'inline-block', marginLeft:10, paddingTop:15}}></span>
152+
<br />
153+
<TextField
154+
id='signupPhone'
155+
label='Phone'
156+
variant='outlined'
157+
required
158+
onChange={() => {
159+
checkPhone(document.getElementById('signupPhone').value);
160+
}}
161+
sx={{
162+
m: 1
163+
}}
164+
/>
165+
<br />
166+
<span id='phone-alert'></span>
167+
<br />
168+
<Button
169+
variant='contained'
170+
size='medium'
171+
onClick={()=>{
172+
history.back()}}
173+
sx={{
174+
m: 1
175+
}}
176+
>
177+
Back</Button>
178+
<Button
179+
variant='contained'
180+
size='medium'
181+
type='submit'
182+
sx={{
183+
m: 1
184+
}}
185+
>
186+
Submit
187+
</Button>
188+
</Box>
101189
</div>
102190
</div>
103191
)

‎src/components/display/NewUserDisplay.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,16 @@ import TextField from '@mui/material/TextField';
1010
import Button from '@mui/material/Button';
1111
import Box from '@mui/material/Box';
1212
import IconButton from '@mui/material/IconButton';
13-
import Input from '@mui/material/Input';
14-
import FilledInput from '@mui/material/FilledInput';
1513
import OutlinedInput from '@mui/material/OutlinedInput';
1614
import InputLabel from '@mui/material/InputLabel';
1715
import InputAdornment from '@mui/material/InputAdornment';
18-
import FormHelperText from '@mui/material/FormHelperText';
1916
import FormControl from '@mui/material/FormControl';
2017
import Visibility from '@mui/icons-material/Visibility';
2118
import VisibilityOff from '@mui/icons-material/VisibilityOff';
2219
import PasswordStrengthBar from 'react-password-strength-bar';
2320
import RadioGroup from "@mui/material/RadioGroup";
2421
import Radio from "@mui/material/Radio";
2522
import FormControlLabel from '@mui/material/FormControlLabel';
26-
import FormLabel from '@mui/material/FormLabel';
2723

2824
import {
2925
handleNewUser,

0 commit comments

Comments
 (0)