created interviewer login dialog

Frontend/package.json

@@ -4,9 +4,11 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "firebase": "^7.22.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

Frontend/src/app/Main.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import {HashRouter,Switch, Route,withRouter} from 'react-router-dom'
 import {useEffect} from 'react'
+import {firebaseConfig} from './config'
 
 import LoginScreen from './components/screens/LoginScreen'
 
@@ -13,29 +14,35 @@ function LoadingScreen(props){
     )
 }
 
-
-
 function Main(props){
 
-    const [scriptLoading, setScriptLoading] = React.useState(true);
+    const [scriptLoading, setScriptLoading] = React.useState(0);
+    const scriptCount = 
+    useEffect(()=>{       
 
-    useEffect(()=>{
         const googleSigninScript = document.createElement('script');
         googleSigninScript.src = "https://apis.google.com/js/platform.js";
-        googleSigninScript.onload = ()=>{setScriptLoading(false)};
+        googleSigninScript.onload = ()=>{setScriptLoading(scriptLoading+1)};
+
+        const firebaseScript = document.createElement('script');
+        firebaseScript.src = "https://www.gstatic.com/firebasejs/7.22.0/firebase-app.js";
+        firebaseScript.onload = ()=>{
+            window.firebase.initializeApp(firebaseConfig);
+            setScriptLoading(scriptLoading+1);
+        };
+
+        document.body.append(firebaseScript);
         document.body.append(googleSigninScript);
     },[1])
 
 
     return (
         <div>
-            {scriptLoading?<LoadingScreen/>:
+            {scriptLoading == scriptCount?<LoadingScreen/>:
             <HashRouter>
                 <Route exact path= "/" component={(LoginScreen)}/>
-
+                
             </HashRouter>}
-
-
         </div>
     )
 }

Frontend/src/app/components/atoms/GoogleLoginButton.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import {ButtonBase,Typography} from '@material-ui/core'
+
+import GoogleLogo from '../../res/icons/google.png'
+
+
+function GoogleLoginButton(props){
+    const onClick = props.onClick;
+
+    return(
+        <div>
+            <ButtonBase onClick={onClick} >
+                <div style={{display:"flex", flexDirection:"row", justifyContent:"center", margin:20, }}>
+                    <img src = {GoogleLogo} style={{height:20, width:20}}/>
+                    <Typography style={{marginLeft:10}}>
+                        SignIn with Google
+                    </Typography>
+                </div>
+            </ButtonBase>
+        </div>
+
+    )
+}
+
+export default GoogleLoginButton;

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

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { FormControl, TextField,InputLabel, FilledInput,InputAdornment,IconButton } from '@material-ui/core'
+import {Visibility,VisibilityOff} from '@material-ui/icons'
+
+function CandidateLogin(props){
+    const onSubmit = props.onSubmit;
+    var data = {
+        email:"",
+        password:"",
+    }
+    const handleForm = (event)=>{
+
+    }
+    return (
+        <div>
+            <TextField
+                label="Email"
+                variant="outlined"
+                onChange={(event)=>{data.email = event.target.value}}/>
+            <FormControl className={clsx(classes.margin, classes.textField)} variant="filled">
+                <InputLabel htmlFor="filled-adornment-password">Password</InputLabel>
+                <FilledInput
+                    id="filled-adornment-password"
+                    type={values.showPassword ? 'text' : 'password'}
+                    value={values.password}
+                    onChange={handleChange('password')}
+                    endAdornment={
+                    <InputAdornment position="end">
+                        <IconButton
+                        aria-label="toggle password visibility"
+                        onClick={handleClickShowPassword}
+                        onMouseDown={handleMouseDownPassword}
+                        edge="end"
+                        >
+                        {values.showPassword ? <Visibility /> : <VisibilityOff />}
+                        </IconButton>
+                    </InputAdornment>
+                    }
+                />
+        </FormControl>
+        </div>
+    )
+}
+
+export default CandidateLogin;

Frontend/src/app/components/molecules/InterviewerLogin.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 InterviewerLogin(props){
+    const onSubmit = props.onSubmit;
+    var data = {
+        email:"",
+        password:"",
+    }
+
+
+    const [showPassword,setShowPassword] = React.useState(false);
+    return (
+        <div style={{
+            display:"flex",
+            flexDirection:"column"
+        }}>
+            <TextField
+                style={{marginTop:10}}
+                label="Email"
+                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="primary">
+                    Login
+                </Button>
+        </div>
+    )
+}
+
+export default InterviewerLogin;

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

@@ -1,11 +1,65 @@
 import React from 'react'
 
-import {Button} from '@material-ui/core'
+import {Button,Dialog, DialogContent, DialogTitle,DialogActions} from '@material-ui/core'
 import './style.css';
 
+import IntervierLogin from '../molecules/InterviewerLogin';
+import GoogleLoginButton from '../atoms/GoogleLoginButton';
+
+function InterviewerDialog(props){
+    const isOpen = props.isOpen;
+    const onClose = props.onClose;
+    return(
+        <Dialog open={isOpen} onClose = {onClose}>
+            <DialogTitle>Sign In As An Interviewer</DialogTitle>
+            <DialogContent style={{margin:20}}>
+                <div>
+                    <IntervierLogin onSubmit ={(data)=>{
+
+                    }} />
+                </div>
+            </DialogContent>
+            <div style={{margin:"auto"}}>
+                <GoogleLoginButton onClick = {()=>{}}/>
+            </div>
+
+
+            <DialogActions>
+                <Button onClick={onClose}>
+                    Cancle
+                </Button>
+            </DialogActions>
+        </Dialog>
+
+    )
+}
+
+function CandidateDialog(props){
+    const isOpen = props.isOpen;
+    const onClose = props.onClose;
+    return(
+        <Dialog open={isOpen} onClose={onClose} style={{margin:20}}>
+            <DialogTitle>Please enter the details</DialogTitle>
+            <DialogContent>
+                    <div>
+
+                    </div>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>
+                    Cancle
+                </Button>
+            </DialogActions>
+        </Dialog>
+        )
+}
+
 function LoginScreen(props){
+    const [interviewerDialog,setInterviewDialog] = React.useState(false);
+    const [candidateDialog,setCandidateDialog] = React.useState(false);
 
-    return(<div className="body">
+    return(
+    <div className="body">
 
         <div style={{
             fontSize:50,
@@ -30,16 +84,19 @@ function LoginScreen(props){
         }}>
             <Button color="primary" variant="contained" style={{
                 margin:20
-            }}>
+            }} onClick={()=>setInterviewDialog(true)}>
                 Sign in as interviewer
             </Button>
             <Button color="secondary" variant="contained" style={{
                 margin:20
-            }}>
+            }} onClick={()=> setCandidateDialog(true)}>
                 Join interview room
             </Button>
         </div>
 
+        <InterviewerDialog isOpen = {interviewerDialog} onClose = {()=> setInterviewDialog(false)}/>
+        <CandidateDialog isOpen = {candidateDialog} onClose = {()=> setCandidateDialog(false)}/>
+
     </div>)
 }
 

Frontend/src/app/components/screens/style.css

@@ -3,4 +3,8 @@
     display: flex;
     flex-grow: 1;
     flex-direction: column;
+}
+
+.dialog{
+
 }

Frontend/src/app/config.js

@@ -0,0 +1,16 @@
+const firebaseConfig = {
+    apiKey: "AIzaSyDXXNwj9yIB_o0FpGd3txLeBBvU_MfnhZM",
+    authDomain: "codeview-b41a7.firebaseapp.com",
+    databaseURL: "https://codeview-b41a7.firebaseio.com",
+    projectId: "codeview-b41a7",
+    storageBucket: "codeview-b41a7.appspot.com",
+    messagingSenderId: "41880489918",
+    appId: "1:41880489918:web:79e07ec87d00fe420673ef",
+    measurementId: "G-91HW2VKV8V"
+  };
+
+  const googleConfig = {
+
+  }
+
+  export {firebaseConfig,googleConfig};

Frontend/src/app/scripts/googleSignin.js

@@ -0,0 +1,2 @@
+
+