Made registration screen

Backend/controllers/profileCtrl.js

@@ -19,4 +19,20 @@ const getProfile = async (req,res)=>{
     }
 }
 
-module.exports = {getProfile};
+const updateProfile = (req,res) =>{
+    const id = req.user
+    Interviewer.updateOne({id:id},req.body)
+    .then((doc)=>{
+        return res.status(200).json({
+            success:true,
+            update:doc,
+        })
+    }).catch((err)=>{
+        return res.status(500).json({
+            success:false,
+            msg:"Update not possible",
+        })
+    })
+}
+
+module.exports = {getProfile,updateProfile};

Backend/routes/profileRouter.js

@@ -5,5 +5,6 @@ const profileCtrl = require('../controllers/profileCtrl')
 const verifyUser = require('../middlewares/verifyMW').user;
 
 router.get('/interviewer/own',verifyUser,profileCtrl.getProfile);
+router.post('/interviewer/update',verifyUser,profileCtrl.updateProfile);
 
 module.exports = router;

Frontend/package.json

@@ -8,7 +8,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "firebase": "^7.22.0",
+    "firebase": "^7.22.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-google-login": "^5.1.21",

Frontend/src/app/Main.js

@@ -5,6 +5,7 @@ import {firebaseConfig} from './config'
 import firebase from 'firebase'
 
 import LoginScreen from './components/screens/LoginScreen'
+import RegistrationScreen from './components/screens/RegisterScreen'
 
 function LoadingScreen(props){
 
@@ -23,9 +24,7 @@ function Main(props){
 
         const googleSigninScript = document.createElement('script');
         googleSigninScript.src = "https://apis.google.com/js/platform.js";
-        googleSigninScript.onload = ()=>{setScriptLoading(scriptLoading+1)};
-
-        firebase.initializeApp(firebaseConfig);
+        googleSigninScript.onload = ()=>{setScriptLoading(scriptLoading+1)};    
 
         document.body.append(googleSigninScript);
     },[1])
@@ -36,7 +35,7 @@ function Main(props){
             {scriptLoading == scriptCount?<LoadingScreen/>:
             <HashRouter>
                 <Route exact path= "/" component={(LoginScreen)}/>
-
+                <Route path="/register" component={(RegistrationScreen)}/>
             </HashRouter>}
         </div>
     )

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

@@ -0,0 +1,102 @@
+import React from 'react'
+
+import { Button, TextField, Input,CircularProgress, Snackbar} from '@material-ui/core'
+import {uploadFile} from '../../utils/firebase/storage';
+import {UserData} from '../../utils/localStorage'
+
+import AvatarIcon from '../../res/icons/user.png'
+
+function ImageUploader(props){
+    const onUpload = props.onUpload;
+    const uploadState = props.uploadState;
+
+    const [uploading,setUploading] = React.useState(false);
+    const [image,setImage] = React.useState(AvatarIcon);
+    const [snackbarStatus, setSnackbarStatus] = React.useState(false);
+
+
+    const handleImageSelect = (event)=>{
+        setImage(URL.createObjectURL(event.target.files[0]));
+        const file = event.target.files[0];
+        setUploading(true);
+        const path = "profile/"+UserData.getEmail()+"/profileImage.jpg";
+        uploadFile(file,path)
+        .then((snapshot)=>{
+            setUploading(false);
+            console.log("Upload Successfull!");
+            onUpload(path);
+
+        }).catch((err)=>{
+            console.log("Error",err);
+
+        })
+    }
+
+    return(
+        <div style={{display:"flex", flexDirection:"row", flexWrap:"wrap"}}>
+            <div>
+                <img src = {image} style={{height:140,width:140, borderRadius:70, outlineColor:"#000000",}}/> 
+            </div>
+            <div style={{display:"flex",alignContent:"center", flexWrap:"wrap", marginLeft:40}}>
+                <Input type="file" onChange={handleImageSelect}/>
+                {uploading? <CircularProgress/>:<div/> }
+            </div>
+
+            <Snackbar open={snackbarStatus} autoHideDuration={6000} onClose={()=>{setSnackbarStatus(false)}}>
+                Upload Successfull
+            </Snackbar>
+
+        </div>
+    )
+}
+
+function RegistrationForm(props){
+    const onSubmit = props.onSubmit;
+
+    const [imageUploading, setImageUploading] = React.useState(false);
+
+    var data={
+        name:"",
+        phone:"",
+        company:"",
+        website:"",
+        photo:"",
+
+    }    
+
+    return(
+        <div style={{display:"flex", flexDirection:"column", flexWrap:"wrap"}}>
+
+            <ImageUploader onUpload={(path)=>{data.photo= path}} uploadState={imageUploading}/>
+
+            <TextField
+                style={{marginTop:20}}
+                variant="outlined"
+                label="Name"
+                onChange={(event)=>{data.name = event.target.value}}/>
+            <TextField
+                style={{marginTop:20}}
+                variant="outlined"
+                label="Phone"
+                onChange={(event)=>{data.phone = event.target.value}}/>
+            <TextField
+                style={{marginTop:20}}
+                variant="outlined"
+                label="Company or Organisation"
+                onChange={(event)=>{data.company = event.target.value}}/>
+            <TextField
+                style={{marginTop:20}}
+                variant = "outlined"
+                label ="Website"
+                onChange = {(event)=>{data.website = event.target.value}}/>
+            <div style={{flexGrow:1}}>
+                <Button variant="contained" color="primary" style={{marginTop:30}} onClick={()=>{onSubmit(data)}}>
+                    Submit
+                </Button>
+            </div>
+
+        </div>
+    )
+}
+
+export default RegistrationForm;

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

@@ -43,7 +43,6 @@ const InterviewerDialog = withRouter((props)=>{
                         }
 
                     })
-
                 }
             }else{
                 console.log(data.msg);

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import './style.css'
+
+import RegistrationForm from '../../components/molecules/RegistrationForm'
+
+import {withRouter} from 'react-router-dom'
+
+import {updateProfile} from '../../utils/api/controllers/profileCtrl'
+import {UserData} from '../../utils/localStorage'
+
+function RegisterScreen(props){
+
+    const handleSubmit = (data)=>{
+        //updating the profile
+        console.log("Token",UserData.getToken());
+        updateProfile(data).then((res)=>(res.json()))
+        .then((res)=>{
+            if(res.success){
+                UserData.setProfileData(data);
+                UserData.userExists(true);
+                props.history.push('/interviewer');
+            }else{
+                console.log("Error",res.msg);
+            }
+        }).catch((err)=>{
+            console.log("Error",err);
+        })
+    }
+
+    return(
+        <div className="root" style={{flexWrap:"wrap"}}>
+            <div style={{fontFamily:"Roboto-Black", fontSize:50, textAlign:"center"}}>
+                Please enter the details.
+            </div>
+            <div style={{display:"flex",flexDirection:"column" ,flexWrap:"wrap", margin:"auto", alignContent:"center", marginTop:40}}>
+                <RegistrationForm onSubmit={handleSubmit}/>
+            </div>
+
+        </div>
+    )
+}
+
+export default withRouter(RegisterScreen);

Frontend/src/app/utils/api/controllers/profileCtrl.js

@@ -2,13 +2,14 @@ import {profileEndPoints} from '../endpoints'
 import {UserData} from '../../localStorage'
 
 export const updateProfile = (data)=>{
+    console.log("Data",JSON.stringify(data));
     const requestOptions = {
         method:"POST",
-        headers:{ "token": UserData.getToken(),'Content-Type': 'application/json'},
+        headers:{ "token": UserData.getToken(),'Content-Type': 'application/json',},
         body: JSON.stringify(data)
     }
 
-    return fetch(profileEndPoints.update, requestOptions);
+    return fetch(profileEndPoints.updateProfile, requestOptions);
 
 }
 

Frontend/src/app/utils/api/endpoints.js

@@ -8,6 +8,6 @@ export const signInEndpoints = {
 export const profileEndPoints = {
     getOwnProfile:BASE_URL+"/profile/interviewer/own",
     getOthersProfile:BASE_URL+"/profile/interviewer/others", 
-    updateProfile:BASE_URL+"",
+    updateProfile:BASE_URL+"/profile/interviewer/update",
 
 }

Frontend/src/app/utils/firebase/storage.js

@@ -0,0 +1,17 @@
+import firebase from 'firebase'
+import {firebaseConfig}from '../../config';
+import {UserData} from '../localStorage'
+
+firebase.initializeApp(firebaseConfig);
+const storageRef = firebase.storage().ref();
+
+
+export const uploadFile = (file,path)=>{
+    const fileRef = storageRef.child(path);
+    return fileRef.put(file);
+}
+
+export const downloadFile = (path)=>{
+    const fileRef = storageRef.child(path);
+    return fileRef.getDownloadURL();
+}