Skip to content

Commit 970eccb

Browse files
benlohbenloh
committed
Merge branch 'dev-bl/pre-login-disable' into dev
* dev-bl/pre-login-disable: bl: Move session handling and validation to componentDidMount. (componentWillMount is deprecated). bl: rewrite EdgeEditor to accept the SESSION state change object and update its state accordingly. ds: rewrite NodeSelector to accept the SESSION state change object and update its state accordingly. dev-bl/pre-login-disable: Add component-level hooks to hide "Add New Node", "Edit Node", "Add New Edge", and "Edit Edge" buttons when the user is not logged in.
2 parents 9bb6e24 + 615631a commit 970eccb

File tree

4 files changed

+84
-19
lines changed

4 files changed

+84
-19
lines changed

‎build/app/system/datastore.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,16 @@ let D3DATA = {};
3333
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
3434
/*/ establish message handlers during INITIALIZE phase
3535
/*/ DSTOR.Hook('INITIALIZE',()=>{
36+
3637
UDATA.HandleMessage('DB_UPDATE', function( data ) {
3738
DSTOR.UpdateServerDB(data);
3839
});
40+
3941
UDATA.HandleMessage('GROUPID_CHANGE', function( data ) {
4042
DSTOR.SetSessionGroupID(data);
43+
console.log('Handling GROUPID_CHANGE');
4144
});
45+
4246
});
4347

4448

@@ -47,13 +51,14 @@ let D3DATA = {};
4751
/*/ datastore needs to set NetMessage GroupID property on behalf of SESSIONS
4852
because SESSION can't include NetMessage (or vice versa)
4953
/*/ DSTOR.SetSessionGroupID = function ( token ) {
50-
let good = SESSION.DecodeToken(token).isValid;
51-
if (good) {
54+
let decoded = SESSION.DecodeToken(token);
55+
if (decoded.isValid) {
5256
NetMessage.GlobalSetGroupID(token);
5357
console.log('setting NetMessage group id',token);
5458
} else {
5559
console.warn('will not set bad group id:',token);
5660
}
61+
UDATA.SetAppState('SESSION',decoded);
5762
}
5863

5964
/// DB INTERFACE //////////////////////////////////////////////////////////////

‎build/app/unisys/component/SessionShell.jsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,13 @@ class SessionShell extends UNISYS.Component {
115115
}
116116
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
117117
componentWillMount() {
118+
// the code below reads a pre-existing matching path, which may be set
119+
// to a valid token string AFTER the changeHandler() detected a valid
120+
// login after a ForceReload. This is a bit hacky and the app would benefit
121+
// from not relying on forced reloads. See handleChange().
118122
let token = this.props.match.params.token;
119123
let decoded = SESSION.DecodeToken(token) || {};
120-
if (!decoded.isValid) {
121-
this.setState({ errBadURL:true });
122-
}
124+
this.SetAppState('SESSION',decoded);
123125
}
124126
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
125127
/*/ Main Render Function
@@ -132,7 +134,6 @@ class SessionShell extends UNISYS.Component {
132134
if (token) {
133135
let decoded = SESSION.DecodeToken(token);
134136
if (decoded.isValid) {
135-
this.AppCall('GROUPID_CHANGE',token);
136137
return this.renderLoggedIn(decoded);
137138
}
138139
}
@@ -147,6 +148,7 @@ class SessionShell extends UNISYS.Component {
147148
let decoded = SESSION.DecodeToken(token);
148149
let { classId, projId, hashedId, groupId } = decoded;
149150
this.setState(decoded);
151+
this.SetAppState('SESSION',decoded);
150152
if (decoded.groupId) {
151153
// force a page URL change
152154
let redirect = `/edit/${event.target.value}`;

‎build/app/view/netcreate/components/EdgeEditor.jsx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ class EdgeEditor extends UNISYS.Component {
216216
notes: '',
217217
id: ''
218218
},
219+
isLocked: true, // User has not logged in, don't allow edge edit
219220
isEditable: false, // Form is in an edtiable state
220221
isExpanded: false, // Show EdgeEditor Component in Summary view vs Expanded view
221222
sourceIsEditable:false, // Source ndoe field is only editable when source is not parent
@@ -228,6 +229,9 @@ class EdgeEditor extends UNISYS.Component {
228229
UDATA = UNISYS.NewDataLink(this);
229230

230231
this.handleSelection = this.handleSelection.bind(this);
232+
this.handleEdgeSelection = this.handleEdgeSelection.bind(this);
233+
this.handleEdgeEdit = this.handleEdgeEdit.bind(this);
234+
this.onStateChange_SESSION = this.onStateChange_SESSION.bind(this);
231235
this.onButtonClick = this.onButtonClick.bind(this);
232236
this.onDeleteButtonClick = this.onDeleteButtonClick.bind(this);
233237
this.onEditButtonClick = this.onEditButtonClick.bind(this);
@@ -242,12 +246,20 @@ class EdgeEditor extends UNISYS.Component {
242246

243247
// Always make sure class methods are bind()'d before using them
244248
// as a handler, otherwise object context is lost
249+
250+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
251+
/*/ SESSION is called by SessionSHell when the ID changes
252+
set system-wide. data: { classId, projId, hashedId, groupId, isValid }
253+
/*/ this.OnAppStateChange('SESSION',this.onStateChange_SESSION);
254+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
245255
this.OnAppStateChange('SELECTION',(data) => {
246256
this.handleSelection(data);
247257
});
258+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
248259
UDATA.HandleMessage('EDGE_SELECT',(data) => {
249260
this.handleEdgeSelection(data);
250261
});
262+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
251263
UDATA.HandleMessage('EDGE_EDIT',(data) => {
252264
this.handleEdgeEdit(data);
253265
});
@@ -498,6 +510,16 @@ class EdgeEditor extends UNISYS.Component {
498510
}
499511

500512
} // handleEdgeEdit
513+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
514+
/*/ Handle change in SESSION data
515+
Called both by componentDidMount() and AppStateChange handler.
516+
The 'SESSION' state change is triggered in two places in SessionShell during
517+
its handleChange() when active typing is occuring, and also during
518+
SessionShell.componentWillMount()
519+
/*/ onStateChange_SESSION( decoded ) {
520+
let update = { isLocked: !decoded.isValid };
521+
this.setState(update);
522+
}
501523

502524

503525
/// UI EVENT HANDLERS /////////////////////////////////////////////////////////
@@ -778,10 +800,11 @@ class EdgeEditor extends UNISYS.Component {
778800
</FormGroup>
779801
<FormGroup className="text-right" style={{paddingRight:'5px'}}>
780802
<Button className="small text-muted float-left btn btn-outline-light" size="sm"
803+
hidden={this.state.isLocked}
781804
onClick={this.onDeleteButtonClick}
782805
>Delete</Button>&nbsp;
783806
<Button outline size="sm"
784-
hidden={this.state.isEditable}
807+
hidden={this.state.isLocked || this.state.isEditable}
785808
onClick={this.onEditButtonClick}
786809
>{this.state.isEditable?"Add New Edge":"Edit Edge"}</Button>&nbsp;
787810
<Button size="sm"
@@ -804,6 +827,7 @@ class EdgeEditor extends UNISYS.Component {
804827
/*/ componentDidMount () {
805828
if (DBG) console.log('EdgeEditor.componentDidMount!');
806829
this.loadSourceAndTarget();
830+
this.onStateChange_SESSION(this.AppState('SESSION'));
807831
}
808832
} // class EdgeEditor
809833

‎build/app/view/netcreate/components/NodeSelector.jsx

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,26 @@
3434
NodeSelector's internal representation of form data up-to-date, we rely on
3535
the SELECTION updates' searchLabel field to update the label.
3636
37+
There are two different levels of write-access:
38+
39+
isLocked Nodes can be selected for viewing, but editing
40+
cannot be enabled.
41+
42+
isEditable The form fields are active and can be edited.
43+
44+
3745
## STATES
3846
3947
formData Node data that is shown in the form
4048
41-
isEditable If true, form is enabled for editing
49+
isLocked If true (defauilt), nodes can be displayed, but
50+
"Add New Node" and "Edit Node" buttons are hidden.
51+
The state is unlocked when the user logs in.
52+
53+
isEditable If true, form fields are enabled for editing
4254
If false, form is readonly
4355
56+
4457
## TESTING
4558
4659
Edit Existing Node
@@ -126,6 +139,7 @@ class NodeSelector extends UNISYS.Component {
126139
color: "#FF0000"
127140
}
128141
],
142+
isLocked: true,
129143
isEditable: false,
130144
isValid: false
131145
};
@@ -134,6 +148,7 @@ class NodeSelector extends UNISYS.Component {
134148
this.getNewNodeID = this.getNewNodeID.bind(this);
135149
this.handleSelection = this.handleSelection.bind(this);
136150
this.onStateChange_SEARCH = this.onStateChange_SEARCH.bind(this);
151+
this.onStateChange_SESSION = this.onStateChange_SESSION.bind(this);
137152
this.loadFormFromNode = this.loadFormFromNode.bind(this);
138153
this.validateForm = this.validateForm.bind(this);
139154
this.onLabelChange = this.onLabelChange.bind(this);
@@ -148,9 +163,16 @@ class NodeSelector extends UNISYS.Component {
148163

149164
// NOTE: assign UDATA handlers AFTER functions have been bind()'ed
150165
// otherwise they will lose context
166+
167+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
168+
/*/ SESSION is called by SessionSHell when the ID changes
169+
set system-wide. data: { classId, projId, hashedId, groupId, isValid }
170+
/*/ this.OnAppStateChange('SESSION',this.onStateChange_SESSION);
171+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
151172
this.OnAppStateChange('SELECTION',(change) => {
152173
this.handleSelection(change);
153174
});
175+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
154176
this.OnAppStateChange('SEARCH', this.onStateChange_SEARCH);
155177

156178
// Load Template
@@ -168,8 +190,6 @@ class NodeSelector extends UNISYS.Component {
168190

169191
} // constructor
170192

171-
172-
173193
/// UTILITIES /////////////////////////////////////////////////////////////////
174194
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
175195
/*/ Clear the form with optional label
@@ -283,6 +303,17 @@ class NodeSelector extends UNISYS.Component {
283303

284304
} // handleSelection
285305
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
306+
/*/ Handle change in SESSION data
307+
Called both by componentWillMount() and AppStateChange handler.
308+
The 'SESSION' state change is triggered in two places in SessionShell during
309+
its handleChange() when active typing is occuring, and also during
310+
SessionShell.componentWillMount()
311+
/*/ onStateChange_SESSION( decoded ) {
312+
let update = { isLocked: !decoded.isValid };
313+
this.setState(update);
314+
}
315+
316+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
286317
/*/ Handle updated SEARCH
287318
AutoComplete handles its internal updates, but we do need to validate the form
288319
When AutoComplete's input field is updated, it sends a SOURCE_SEARCH to ACL
@@ -513,18 +544,13 @@ class NodeSelector extends UNISYS.Component {
513544

514545

515546
/// REACT LIFECYCLE ///////////////////////////////////////////////////////////
516-
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
517-
/*/
518-
/*/ componentWillMount () {
519-
this.validateForm();
520-
}
521547
/*/ REACT calls this to receive the component layout and data sources
522548
/*/ render () {
523549
return (
524550
<div>
525551
<FormGroup className="text-right" style={{paddingRight:'5px'}}>
526552
<Button outline size="sm"
527-
hidden={this.state.isEditable}
553+
hidden={this.state.isLocked || this.state.isEditable}
528554
onClick={this.onNewNodeButtonClick}
529555
>{"Add New Node"}</Button>
530556
</FormGroup>
@@ -589,9 +615,9 @@ class NodeSelector extends UNISYS.Component {
589615
</FormGroup>
590616
<FormGroup className="text-right" style={{paddingRight:'5px'}}>
591617
<Button outline size="sm"
592-
hidden={this.state.isEditable || (this.state.formData.id==='') }
618+
hidden={this.state.isLocked || this.state.isEditable || (this.state.formData.id==='') }
593619
onClick={this.onEditButtonClick}
594-
>{"Edit Node"}</Button>
620+
>Edit Node</Button>
595621
<Button outline size="sm"
596622
hidden={!this.state.isEditable}
597623
onClick={this.onCancelButtonClick}
@@ -616,14 +642,22 @@ class NodeSelector extends UNISYS.Component {
616642
))}
617643
<FormGroup className="text-right">
618644
<Button outline size="sm"
619-
hidden={this.state.formData.id===''||this.state.isEditable}
645+
hidden={this.state.isLocked || this.state.formData.id===''||this.state.isEditable}
620646
onClick={this.onAddNewEdgeButtonClick}
621647
>Add New Edge</Button>
622648
</FormGroup>
623649
</div>
624650
</div>
625651
)
626652
}
653+
654+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
655+
/*/
656+
/*/ componentDidMount () {
657+
this.onStateChange_SESSION(this.AppState('SESSION'));
658+
this.validateForm();
659+
}
660+
627661
} // class NodeSelector
628662

629663

0 commit comments

Comments
 (0)