From 333a98e621dc3ca87ad1e7a973ff3230078dd86a Mon Sep 17 00:00:00 2001 From: Mir Ali Talpur Date: Wed, 15 Jul 2020 13:27:08 -0700 Subject: [PATCH] #2 add passwordChange for individualStudentTeacherEdit and update onBlur being passed to render --- components/individualStudentTeacherEdit.js | 80 +++++++++++++--------- components/nav.js | 2 + components/teacherDashboard.js | 67 ++++++++++++++++-- components/teacherStudentComponent.js | 2 + 4 files changed, 116 insertions(+), 35 deletions(-) diff --git a/components/individualStudentTeacherEdit.js b/components/individualStudentTeacherEdit.js index 4f87796..1b972c9 100644 --- a/components/individualStudentTeacherEdit.js +++ b/components/individualStudentTeacherEdit.js @@ -14,25 +14,6 @@ export default class TeacherEditStudentComponent extends React.Component { console.log("in TeacherEditStudentComponent class...."); console.log(this.props.individualEditStudentInformation); console.log(this.props.individualEditStudentInformation.data.data.displayName); - - } - - backButtonComponent = () => { - return( - - ) - } - - updateButtonComponent = () => { - return( - - ) } nameFormItemComponent = () => { @@ -74,7 +55,7 @@ export default class TeacherEditStudentComponent extends React.Component { Email + help="Please insert a valid Email"> this.props.handleIndividualStudentTeacherEditEmailChange(event)} @@ -90,7 +71,7 @@ export default class TeacherEditStudentComponent extends React.Component { this.props.handleIndividualStudentTeacherEditNameChange(event)} + onChange={(event)=>this.props.handleIndividualStudentTeacherEditEmailChange(event)} onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditEmailChange(event)} /> @@ -109,7 +90,7 @@ export default class TeacherEditStudentComponent extends React.Component { help="Current grade can't be empty"> this.props.handleIndividualStudentTeacherEditNameChange(event)} + onChange={(event)=>this.props.handleIndividualStudentTeacherEditGradeChange(event)} onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditGradeChange(event)} /> @@ -122,7 +103,7 @@ export default class TeacherEditStudentComponent extends React.Component { this.props.handleIndividualStudentTeacherEditNameChange(event)} + onChange={(event)=>this.props.handleIndividualStudentTeacherEditGradeChange(event)} onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditGradeChange(event)} /> @@ -132,15 +113,52 @@ export default class TeacherEditStudentComponent extends React.Component { } passwordFormItemComponent = () => { + if(this.props.teacherStudentComponent.individualStudentTeacherEditPasswordError) { + return( +
+ New Password + + this.props.handleIndividualStudentTeacherEditPasswordChange(event)} + onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditPasswordChange(event)} + value={this.props.teacherStudentComponent.individualStudentTeacherEditPassword} + /> + +
+ ) + } else { + return( +
+ New Password + + this.props.handleIndividualStudentTeacherEditPasswordChange(event)} + onBlur={(event)=>this.props.onBlurhandleIndividualStudentTeacherEditPasswordChange(event)} + value={this.props.teacherStudentComponent.individualStudentTeacherEditPassword} + /> + +
+ ) + } + } + + backButtonComponent = () => { + return( + + ) + } + + updateButtonComponent = () => { return( -
- New Password - - this.props.handleIndividualStudentTeacherEditNameChange(event)} - /> - -
+ ) } diff --git a/components/nav.js b/components/nav.js index a9ff673..bf7d045 100644 --- a/components/nav.js +++ b/components/nav.js @@ -162,6 +162,8 @@ export default class Nav extends React.Component { onBlurhandleIndividualStudentTeacherEditEmailChange={this.props.onBlurhandleIndividualStudentTeacherEditEmailChange} handleIndividualStudentTeacherEditGradeChange={this.props.handleIndividualStudentTeacherEditGradeChange} onBlurhandleIndividualStudentTeacherEditGradeChange={this.props.onBlurhandleIndividualStudentTeacherEditGradeChange} + handleIndividualStudentTeacherEditPasswordChange={this.props.handleIndividualStudentTeacherEditPasswordChange} + onBlurhandleIndividualStudentTeacherEditPasswordChange={this.props.onBlurhandleIndividualStudentTeacherEditPasswordChange} /> } } diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js index 02c0552..53c2dad 100644 --- a/components/teacherDashboard.js +++ b/components/teacherDashboard.js @@ -40,11 +40,14 @@ export class TeacherDashboard extends React.Component { individualStudentEditLoading: false, individualStudentTeacherEditName: null, individualStudentTeacherEditNameError: null, - individualStudentTeacherEditEmail: null, + individualStudentTeacherEditEmail: "", individualStudentTeacherEditEmailError: null, individualStudentTeacherEditEmailPristine: true, individualStudentTeacherEditGrade: null, individualStudentTeacherEditGradeError: null, + individualStudentTeacherEditPassword: "", + individualStudentTeacherEditPasswordError: null, + individualStudentTeacherEditPasswordPristine: true, }, } this.handleMenuClick = this.handleMenuClick.bind(this); @@ -61,6 +64,8 @@ export class TeacherDashboard extends React.Component { this.onBlurhandleIndividualStudentTeacherEditEmailChange = this.onBlurhandleIndividualStudentTeacherEditEmailChange.bind(this); this.handleIndividualStudentTeacherEditGradeChange = this.handleIndividualStudentTeacherEditGradeChange.bind(this); this.onBlurhandleIndividualStudentTeacherEditGradeChange = this.onBlurhandleIndividualStudentTeacherEditGradeChange.bind(this); + this.handleIndividualStudentTeacherEditPasswordChange = this.handleIndividualStudentTeacherEditPasswordChange.bind(this); + this.onBlurhandleIndividualStudentTeacherEditPasswordChange = this.onBlurhandleIndividualStudentTeacherEditPasswordChange.bind(this); } componentDidMount() { @@ -81,8 +86,8 @@ export class TeacherDashboard extends React.Component { const target = e.target; const value = target.value; console.log("value being set for handleIndividualStudentTeacherEditEmailChange" + value); - - if(this.state.individualStudentTeacherEditEmailPristine) { + console.log("this.state.teacherStudentComponent.individualStudentTeacherEditEmailPristine " + this.state.teacherStudentComponent.individualStudentTeacherEditEmailPristine); + if(this.state.teacherStudentComponent.individualStudentTeacherEditEmailPristine) { this.setState(prevState => ({ teacherStudentComponent: { ...prevState.teacherStudentComponent, @@ -111,6 +116,8 @@ export class TeacherDashboard extends React.Component { } onBlurhandleIndividualStudentTeacherEditEmailChange = (e) => { + console.log("in onBlurhandleIndividualStudentTeacherEditEmailChange "); + console.log("this.state.teacherStudentComponent.individualStudentTeacherEditEmail " + this.state.teacherStudentComponent.individualStudentTeacherEditEmail); if(!this.validateEmail(this.state.teacherStudentComponent.individualStudentTeacherEditEmail)) { this.setState(prevState => ({ teacherStudentComponent: { @@ -164,6 +171,56 @@ export class TeacherDashboard extends React.Component { } /* End Grade Level */ + /* Password */ + handleIndividualStudentTeacherEditPasswordChange = (e) => { + console.log("in handleIndividualStudentTeacherPasswordChange"); + const target = e.target; + const value = target.value; + console.log("value being set for handleIndividualStudentTeacherPasswordChange" + value); + console.log("this.state.individualStudentTeacherEditPasswordPristine: " + this.state.individualStudentTeacherEditPasswordPristine); + if(this.state.teacherStudentComponent.individualStudentTeacherEditPasswordPristine) { + console.log("in conditional for individualStudentTeacherEditPasswordPristine"); + this.setState(prevState => ({ + teacherStudentComponent: { + ...prevState.teacherStudentComponent, + individualStudentTeacherEditPassword: value, + } + })); + } else { + if(value.length >= 6) { + this.setState(prevState => ({ + teacherStudentComponent: { + ...prevState.teacherStudentComponent, + individualStudentTeacherEditPassword: value, + individualStudentTeacherEditPasswordError: null, + } + })); + } else { + this.setState(prevState => ({ + teacherStudentComponent: { + ...prevState.teacherStudentComponent, + individualStudentTeacherEditPassword: value, + individualStudentTeacherEditPasswordError: true, + } + })); + } + } + } + + onBlurhandleIndividualStudentTeacherEditPasswordChange = (e) => { + console.log("I'm in this biatch.."); + if(this.state.teacherStudentComponent.individualStudentTeacherEditPassword.length < 6) { + this.setState(prevState => ({ + teacherStudentComponent: { + ...prevState.teacherStudentComponent, + individualStudentTeacherEditPasswordError: true, + individualStudentTeacherEditPasswordPristine: false, + } + })); + } + } + + /* End Password */ /* Name */ handleIndividualStudentTeacherEditNameChange = (e) => { console.log("in handleIndividualStudentTeacherEditNameChange"); @@ -478,9 +535,11 @@ export class TeacherDashboard extends React.Component { handleIndividualStudentTeacherEditNameChange={this.handleIndividualStudentTeacherEditNameChange} onBlurhandleIndividualStudentTeacherEditNameChange={this.onBlurhandleIndividualStudentTeacherEditNameChange} handleIndividualStudentTeacherEditEmailChange={this.handleIndividualStudentTeacherEditEmailChange} - onBlurhandleIndividualStudentTeacherEditEmailChange={this.handleIndividualStudentTeacherEditEmailChange} + onBlurhandleIndividualStudentTeacherEditEmailChange={this.onBlurhandleIndividualStudentTeacherEditEmailChange} handleIndividualStudentTeacherEditGradeChange={this.handleIndividualStudentTeacherEditGradeChange} onBlurhandleIndividualStudentTeacherEditGradeChange={this.onBlurhandleIndividualStudentTeacherEditGradeChange} + handleIndividualStudentTeacherEditPasswordChange={this.handleIndividualStudentTeacherEditPasswordChange} + onBlurhandleIndividualStudentTeacherEditPasswordChange={this.onBlurhandleIndividualStudentTeacherEditPasswordChange} /> diff --git a/components/teacherStudentComponent.js b/components/teacherStudentComponent.js index a50cd6f..76cdaca 100644 --- a/components/teacherStudentComponent.js +++ b/components/teacherStudentComponent.js @@ -88,6 +88,8 @@ export default class TeacherStudentComponent extends React.Component { onBlurhandleIndividualStudentTeacherEditEmailChange={this.props.onBlurhandleIndividualStudentTeacherEditEmailChange} handleIndividualStudentTeacherEditGradeChange={this.props.handleIndividualStudentTeacherEditGradeChange} onBlurhandleIndividualStudentTeacherEditGradeChange={this.props.onBlurhandleIndividualStudentTeacherEditGradeChange} + handleIndividualStudentTeacherEditPasswordChange={this.props.handleIndividualStudentTeacherEditPasswordChange} + onBlurhandleIndividualStudentTeacherEditPasswordChange={this.props.onBlurhandleIndividualStudentTeacherEditPasswordChange} /> // displayName: "asdlkfj 89234" // email: "alskdjf@gmail.com"