Merge pull request #56 from oslabs-beta/scout

Co-authored-by: Sarah Moosa <[email protected]>

Author: CedarCooper

src/components/Login.tsx

@@ -11,6 +11,8 @@
  //MUI Elements
  import TextField from '@mui/material/TextField';
  import Button from '@mui/material/Button';
+ import { grey } from '@mui/material/colors';
+
 
  // @ts-ignore
  import Docketeer from '../../assets/docketeer-title.png';
@@ -99,7 +101,7 @@
                id='username' 
                label='Username' 
                variant='outlined'
-             
+              value= 'sysadmin' 
              />
              <br />
              <br />
@@ -108,7 +110,7 @@
                label='Password'
                type='password'
                variant='outlined'
-              
+              value ='belugas'
              />
              <br />
              {/* * Login Button * */}
@@ -119,12 +121,27 @@
                size='medium'
                onClick={() => handleLogin}
                sx={{
-                 m: 1
+                 marginTop: 1,
+                 marginBottom:1
                }}
              >
                Login
              </Button>
-             <button className='btn-signup' onClick={ () => navigate('/signup') }>New SysAdmin Sign Up</button>
+             <br/>
+             <Button
+             variant= 'contained'
+            //  color='grey'
+             size='small'
+             onClick={()=> navigate('/userSignup')}
+             sx={{
+              color:'#1976d2',
+              background:'white',
+              marginTop:1
+             }}
+             >
+              Register New Sysadmin
+             </Button>
+             <br/>
            </form>
          </div> 
        </div>

src/components/SignUp.tsx

@@ -13,9 +13,7 @@ import FormControl from '@mui/material/FormControl';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import PasswordStrengthBar from 'react-password-strength-bar';
-import RadioGroup from "@mui/material/RadioGroup";
-import Radio from "@mui/material/Radio";
-import FormControlLabel from '@mui/material/FormControlLabel';
+
 
 // Helper Functions
 import {
@@ -25,13 +23,6 @@ import {
     checkPhone,
   } from "./helper/newUserHelper";
 
-// this will store the value from the user role
-let valueRole = '3'; 
-//setting value of the RadioGroup MUI Component to the one selected by the user
-const handleSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-  valueRole = (event.target as HTMLInputElement).value;
-}
-
 const SignUp = () => {
     const navigate = useNavigate();
     const [values, setValues] = useState({
@@ -49,6 +40,7 @@ const SignUp = () => {
           showPassword: !values.showPassword,
         });
       };
+      
     return (
       <div className='renderContainers'>
         <div className='header'>
@@ -155,8 +147,10 @@ const SignUp = () => {
             label='Phone'
             variant='outlined'
             required
+            inputProps={{maxLength: 12 }}
+
             onChange={() => {
-              checkPhone(document.getElementById('signupPhone').value);
+              checkPhone(document.getElementById('signupPhone')?.value);
             }}
             sx={{
               m: 1
@@ -174,7 +168,8 @@ const SignUp = () => {
             m: 1
           }}
           >
-            Back</Button>
+            Back
+            </Button>
           <Button
             variant='contained'
             size='medium'

src/components/display/NewUserDisplay.tsx

@@ -178,21 +178,26 @@ const NewUserDisplay = () => {
               m: 1
             }}
           />
-          <FormControl>
+         
+          <br />
+          <span id='phone-alert' style={{marginLeft:10}}></span>
+          <br />
+           <FormControl>
             <RadioGroup
               id="new-user-role"
               row
               defaultValue="3"
               onChange={handleSelect}
+              sx={{
+                m: 1
+              }}
             >
               <FormControlLabel value="1" control={<Radio />} label="System Admin"></FormControlLabel>
               <FormControlLabel value="2" control={<Radio />} label="Admin"></FormControlLabel>
               <FormControlLabel value="3" control={<Radio />} label="User"></FormControlLabel>
             </RadioGroup>
-          </FormControl>
-          <br />
-          <span id='phone-alert'></span>
-          <br />
+          </FormControl> 
+          <br/>
           <Button
             variant='contained'
             size='medium'

src/components/helper/newUserHelper.ts

@@ -6,9 +6,8 @@ import store from '../../renderer/store';
 import * as actions from '../../redux/actions/actions';
 import React from 'react';
 
-export const handleNewUser = (e: React.SyntheticEvent, roleID: string) => {
+export const handleNewUser = (e: React.SyntheticEvent, roleID?: string) => {
   e.preventDefault();
-
   const username = (<HTMLInputElement>document.getElementById('signupUsername')).value;
   const password = (<HTMLInputElement>document.getElementById('signupPassword')).value;
   const confirmationPassword = (<HTMLInputElement>document.getElementById(

src/components/login/login.tsx

@@ -145,5 +145,5 @@ const Login = () => {
     </div>
   );
 };
-
+}
 export default Login;

src/components/tabs/Users.js

@@ -39,7 +39,6 @@ const UserTable = () => {
   ]);
 
   const handleRoleChange = (event) => {
-    console.log('userl', userList)
     const id = event.id;
     const role = event.props.value;
 

src/renderer/App.tsx

@@ -13,7 +13,7 @@ const App = () => {
     <Routes>
       <Route path='/login' element={<Login />} />
       <Route path='/' element={<Authentication />} />
-      <Route path='/signup' element={<SignUp />} />
+      <Route path='/userSignup' element={<SignUp />} />
       <Route path='/app/*' element={<RenderViews />} />
     </Routes>
   );