made join interview dialog

Frontend/src/app/components/molecules/JoinRoomForm.js

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { FormControl, TextField,InputLabel, OutlinedInput,InputAdornment,IconButton,Button } from '@material-ui/core'
+import {Visibility,VisibilityOff} from '@material-ui/icons'
+
+function JoinRoomForm(props){
+    const onSubmit = props.onSubmit;
+    var data = {
+        roomId:"",
+        password:"",
+    }
+
+
+    const [showPassword,setShowPassword] = React.useState(false);
+    return (
+        <div style={{
+            display:"flex",
+            flexDirection:"column"
+        }}>
+            <TextField
+                style={{marginTop:10}}
+                label="Room Id"
+                variant="outlined"
+                onChange={(event)=>{data.email = event.target.value}}/>
+            <FormControl variant="outlined" style={{marginTop:10}}>
+                <InputLabel>Password</InputLabel>
+                <OutlinedInput
+                    type={showPassword? 'text' : 'password'}
+                    onChange={(event)=>{data.password = event.target.value}}
+                    endAdornment={
+                    <InputAdornment position="end">
+                        <IconButton
+                            onClick={()=>setShowPassword(!showPassword)}
+                            edge="end"
+                        >
+                        {showPassword ? <Visibility /> : <VisibilityOff />}
+                        </IconButton>
+                    </InputAdornment>
+                    }
+                />
+        </FormControl>
+        <Button style={{marginTop:10}} onClick={()=>onSubmit(data)} variant="contained" color="secondary">
+                    Join Room
+                </Button>
+        </div>
+    )
+}
+
+export default JoinRoomForm;

Frontend/src/app/components/screens/LoginScreen.js

@@ -1,9 +1,10 @@
 import React from 'react'
 
-import {Button,Dialog, DialogContent, DialogTitle,DialogActions} from '@material-ui/core'
+import {Button,Dialog, DialogContent, DialogTitle,DialogActions, ButtonBase} from '@material-ui/core'
 import './style.css';
 
-import IntervierLogin from '../molecules/InterviewerLogin';
+import IntervierLogin from '../molecules/InterViewerLogin';
+import JoinRoomForm from '../molecules/JoinRoomForm';
 import GoogleLoginButton from '../atoms/GoogleLoginButton';
 
 function InterviewerDialog(props){
@@ -22,6 +23,14 @@ function InterviewerDialog(props){
             <div style={{margin:"auto"}}>
                 <GoogleLoginButton onClick = {()=>{}}/>
             </div>
+            <div style={{margin:"auto"}} >
+                <ButtonBase onClick={()=>{}} >
+                    <div style={{margin:20, fontFamily:"Roboto-Black", fontSize:20}}>
+                        Are you a new user?
+                    </div>
+                </ButtonBase>
+            </div>
+
 
 
             <DialogActions>
@@ -40,9 +49,9 @@ function CandidateDialog(props){
     return(
         <Dialog open={isOpen} onClose={onClose} style={{margin:20}}>
             <DialogTitle>Please enter the details</DialogTitle>
-            <DialogContent>
+            <DialogContent style={{margin:20}}>
                     <div>
-
+                        <JoinRoomForm onSubmit = {(data)=>{}}/>
                     </div>
             </DialogContent>
             <DialogActions>