#2 add functionality to add student with student portal and account f…

…or password
wozzyio · Aug 29, 2020 · 41f0fd3 · 41f0fd3
1 parent 82ad071
commit 41f0fd3
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 0 deletions.
diff --git a/components/nav.js b/components/nav.js
@@ -181,6 +181,8 @@ export default class Nav extends React.Component {
                     handleTeacherStudentAddEmail={this.props.handleTeacherStudentAddEmail}
                     onBlurhandleTeacherStudentAddEmail={this.props.onBlurhandleTeacherStudentAddEmail}
                     handleStudentAddProfilePic={this.props.handleStudentAddProfilePic}
+                    handleTeacherStudentAddPassword={this.props.handleTeacherStudentAddPassword}
+                    onBlurhandleTeacherStudentAddPassword={this.props.onBlurhandleTeacherStudentAddPassword}
                    />
         }
     }

diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
@@ -58,6 +58,9 @@ export class TeacherDashboard extends React.Component {
                 teacherStudentAddEmail: "",
                 teacherStudentAddEmailError: null,
                 handleTeacherStudentAddEmailIsPristine: true,
+                teacherStudentAddPassword: "",
+                handleTeacherStudentAddPasswordIsPristine: true,
+                teacherStudentAddPasswordError: null,
                 teacherStudentAddPhotoURL: "",
                 teacherStudentAddCurrentGrade: "",
                 teacherStudentAddCurrentGradeError: false,
@@ -95,6 +98,8 @@ export class TeacherDashboard extends React.Component {
         this.requireLoginPortalForStudent = this.requireLoginPortalForStudent.bind(this);
         this.handleTeacherStudentAddEmail = this.handleTeacherStudentAddEmail.bind(this);
         this.onBlurhandleTeacherStudentAddEmail = this.onBlurhandleTeacherStudentAddEmail.bind(this);
+        this.handleTeacherStudentAddPassword = this.handleTeacherStudentAddPassword.bind(this);
+        this.onBlurhandleTeacherStudentAddPassword = this.onBlurhandleTeacherStudentAddPassword.bind(this);
         this.handleStudentAddProfilePic = this.handleStudentAddProfilePic.bind(this);
     }
 
@@ -514,6 +519,60 @@ export class TeacherDashboard extends React.Component {
         // check if all the state values required actually exist if not set the appropropriate errors
         if(this.state.teacherStudentComponent.teacherStudentAddStudentLoginRequired) {
             if(!this.state.teacherStudentComponent.teacherStudentAddEmail &&
+                !this.state.teacherStudentComponent.teacherStudentAddName &&
+                !this.state.teacherStudentComponent.teacherStudentAddCurrentGrade &&
+                !this.state.teacherStudentComponent.teacherStudentAddPassword) {
+                 this.setState(prevState => ({
+                     teacherStudentComponent: {
+                         ...prevState.teacherStudentComponent,
+                         teacherStudentAddEmailError: true,
+                         teacherStudentAddPasswordError: true,
+                         handleTeacherStudentAddPasswordIsPristine: false,
+                         handleTeacherStudentAddEmailIsPristine: false,
+                         teacherStudentAddNameError: true,
+                         teacherStudentAddCurrentGradeError: true,
+
+                     }
+                 }));
+                 return true;
+            } else if(!this.state.teacherStudentComponent.teacherStudentAddName &&
+                    !this.state.teacherStudentComponent.teacherStudentAddCurrentGrade &&
+                    !this.state.teacherStudentComponent.teacherStudentAddPassword) {
+                    this.setState(prevState => ({
+                        teacherStudentComponent: {
+                            ...prevState.teacherStudentComponent,
+                            teacherStudentAddPasswordError: true,
+                            handleTeacherStudentAddPasswordIsPristine: false,
+                            teacherStudentAddNameError: true,
+                            teacherStudentAddCurrentGradeError: true,
+
+                        }
+                    }));
+                    return true;
+            } else if(!this.state.teacherStudentComponent.teacherStudentAddName &&
+                !this.state.teacherStudentComponent.teacherStudentAddPassword) {
+                this.setState(prevState => ({
+                    teacherStudentComponent: {
+                        ...prevState.teacherStudentComponent,
+                        teacherStudentAddPasswordError: true,
+                        handleTeacherStudentAddPasswordIsPristine: false,
+                        teacherStudentAddNameError: true,
+                    }
+                }));
+                return true;
+            } else if(!this.state.teacherStudentComponent.teacherStudentAddCurrentGrade &&
+                      !this.state.teacherStudentComponent.teacherStudentAddPassword) {
+                        this.setState(prevState => ({
+                            teacherStudentComponent: {
+                                ...prevState.teacherStudentComponent,
+                                teacherStudentAddPasswordError: true,
+                                handleTeacherStudentAddPasswordIsPristine: false,
+                                teacherStudentAddCurrentGradeError: true,
+
+                            }
+                        }));
+                        return true;
+            } else if(!this.state.teacherStudentComponent.teacherStudentAddEmail &&
                !this.state.teacherStudentComponent.teacherStudentAddName &&
                !this.state.teacherStudentComponent.teacherStudentAddCurrentGrade) {
                 this.setState(prevState => ({
@@ -631,6 +690,26 @@ export class TeacherDashboard extends React.Component {
             }));
             if(this.state.teacherStudentComponent.teacherStudentAddStudentLoginRequired) {
                 console.log("Call backend API with requiring login portal for student");
+                const addStudentAsTeacherWithLoginPortal = functions.httpsCallable('addStudentAsTeacherWithLoginPortal');
+                addStudentAsTeacherWithLoginPortal({
+                    uid: this.state.currentUserDoc.uid,
+                    photoURL: this.state.teacherStudentComponent.teacherStudentAddPhotoURL,
+                    currentGradeLevel: this.state.teacherStudentComponent.teacherStudentAddCurrentGrade,
+                    displayName: this.state.teacherStudentComponent.teacherStudentAddName,
+                    email: this.state.teacherStudentComponent.teacherStudentAddEmail,
+                    password: this.state.teacherStudentComponent.teacherStudentAddPassword,
+                }).then(result => {
+                    console.log('add sucessfully addStudentAsTeacherWithLoginPortal: ' + JSON.stringify(result));
+                    this.props.handleUpdateOnStudent();
+                    this.setState(prevState => ({
+                        teacherStudentComponent: {
+                            ...prevState.teacherStudentComponent,
+                            teacherStudentAddSubmitLoading: false,
+                        }
+                    }));
+                }).catch(err => {
+                    console.log(err)
+                });
             } else {
                 console.log("Call backend API not requiring login portal for student");
                 const addStudentAsTeacherWithoutLoginPortal = functions.httpsCallable('addStudentAsTeacherWithoutLoginPortal');
@@ -878,6 +957,64 @@ export class TeacherDashboard extends React.Component {
         }
     }
 
+    validatePassword = (value) => {
+        if(value.length >= 6){
+            return true
+        } else {
+            return false
+        }
+    }
+
+    handleTeacherStudentAddPassword = (e) => {
+        console.log("in handleTeacherStudentAddPassword");
+        console.log("this.state.handleTeacherStudentAddPassword ");
+        console.log(this.state.handleTeacherStudentAddPasswordIsPristine);
+        e.preventDefault();
+        const target = e.target;
+        const value = target.value;
+        if(this.state.teacherStudentComponent.handleTeacherStudentAddPasswordIsPristine){
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    teacherStudentAddPassword: value,
+                }
+            }));
+        } else {
+            if(this.validatePassword(value)) {
+                this.setState(prevState => ({
+                    teacherStudentComponent: {
+                        ...prevState.teacherStudentComponent,
+                        teacherStudentAddPassword: value,
+                        teacherStudentAddPasswordError: null,
+                    }
+                }));
+            } else {
+                this.setState(prevState => ({
+                    teacherStudentComponent: {
+                        ...prevState.teacherStudentComponent,
+                        teacherStudentAddPassword: value,
+                        teacherStudentAddPasswordError: true,
+                    }
+                }));
+            }
+        }
+    }
+
+    onBlurhandleTeacherStudentAddPassword = (e) => {
+        console.log("in onBlurhandleTeacherStudentAddPassword ");
+        console.log("this.state.teacherStudentComponent.teacherStudentAddPassword " + this.state.teacherStudentComponent.teacherStudentAddPassword);
+        if(this.state)
+        if(!this.validatePassword(this.state.teacherStudentComponent.teacherStudentAddPassword)) {
+            this.setState(prevState => ({
+                teacherStudentComponent: {
+                    ...prevState.teacherStudentComponent,
+                    teacherStudentAddPasswordError: true,
+                    handleTeacherStudentAddPasswordIsPristine: false,
+                }
+            }));
+        }
+    }
+
     /* teacherStudentAdd End */
 
     /* individualStudentTeacherEdit component functions  end */
@@ -1182,6 +1319,8 @@ export class TeacherDashboard extends React.Component {
                         handleTeacherStudentAddEmail={this.handleTeacherStudentAddEmail}
                         onBlurhandleTeacherStudentAddEmail={this.onBlurhandleTeacherStudentAddEmail}
                         handleStudentAddProfilePic={this.handleStudentAddProfilePic}
+                        handleTeacherStudentAddPassword={this.handleTeacherStudentAddPassword}
+                        onBlurhandleTeacherStudentAddPassword={this.onBlurhandleTeacherStudentAddPassword}
                     />
                 </div>
             </React.Fragment>

diff --git a/components/teacherStudentAdd.js b/components/teacherStudentAdd.js
@@ -87,6 +87,46 @@ export default class TeacherStudentAdd extends React.Component {
         }
     }
 
+    passwordComponent = () => {
+        console.log("this.props.teacherStudentComponent.teacherStudentAddStudentLoginRequired");
+        console.log(this.props.teacherStudentComponent.teacherStudentAddStudentLoginRequired);
+        if(this.props.teacherStudentComponent.teacherStudentAddStudentLoginRequired === true) {
+            if(this.props.teacherStudentComponent.teacherStudentAddPasswordError) {
+                return(
+                    <div>
+                        <p>Password</p>
+                        <Form.Item
+                        validateStatus="error"
+                        help="Password is invalid please have it longer than 6 characters">
+                            <Input.Password size="medium" style={{ borderWidth: "0 0 2px" }} 
+                                onChange={(e) => this.props.handleTeacherStudentAddPassword(e)}
+                                value={this.props.teacherStudentComponent.teacherStudentAddPassword}
+                                onBlur={(e) => this.props.onBlurhandleTeacherStudentAddPassword(e)}
+                            />
+                        </Form.Item>
+                    </div>
+                )
+            } else {
+                return(
+                    <div>
+                        <p>Password</p>
+                        <Form.Item>
+                            <Input.Password size="medium" style={{ borderWidth: "0 0 2px" }} 
+                                onChange={(e) => this.props.handleTeacherStudentAddPassword(e)}
+                                value={this.props.teacherStudentComponent.teacherStudentAddPassword}
+                                onBlur={(e) => this.props.onBlurhandleTeacherStudentAddPassword(e)}
+                            />
+                        </Form.Item>
+                    </div>
+                )
+            }
+        } else {
+            return(
+                null
+            )
+        }
+    }
+
     currentGradeComponent = () => {
         if(this.props.teacherStudentComponent.teacherStudentAddCurrentGradeError) {
             return(
@@ -156,6 +196,7 @@ export default class TeacherStudentAdd extends React.Component {
                             {this.nameComponent()}
                             {this.currentGradeComponent()}
                             {this.emailComponent()}
+                            {this.passwordComponent()}
                             Enable Student Portal
                             {this.showRequireLoginToggleComponent()}
                         </Form>  

diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js
@@ -117,6 +117,8 @@ export default class TeacherStudentComponent extends React.Component {
                     handleTeacherStudentAddEmail={this.props.handleTeacherStudentAddEmail}
                     onBlurhandleTeacherStudentAddEmail={this.props.onBlurhandleTeacherStudentAddEmail}
                     handleStudentAddProfilePic={this.props.handleStudentAddProfilePic}
+                    handleTeacherStudentAddPassword={this.props.handleTeacherStudentAddPassword}
+                    onBlurhandleTeacherStudentAddPassword={this.props.onBlurhandleTeacherStudentAddPassword}
                    />
         } else {
             console.log("I'm in the null...");