Skip to content

FIX: SessionShell Login UI Improvements #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 14, 2019
Merged

FIX: SessionShell Login UI Improvements #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56b550f
dev-ds-groupid-plus: add LOGIN to SessionShell
daveseah Jan 14, 2019
95f86bd
dev-ds-groupid-plus: remove SESSION firing on change; it now only hap…
daveseah Jan 14, 2019
4d1e61c
dev-ds-groupid-plus: use more brutal reload method in SessionShell
daveseah Jan 14, 2019
51a94f4
dev-ds-groupid-plus: 'SESSION' state change now also happens for inva…
daveseah Jan 14, 2019
538f6a2
Merge branch 'dev' into dev-ds/groupid-plus (offline view, project me…
daveseah Jan 14, 2019
2d7ac58
dev-ds-groupid-plus: fix formatting error from merge
daveseah Jan 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions build/app/system/datastore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,28 @@ DSTOR.Hook("INITIALIZE", () => {
DSTOR.UpdateServerDB(data);
});

UDATA.HandleMessage("GROUPID_CHANGE", function(data) {
DSTOR.SetSessionGroupID(data);
console.log("Handling GROUPID_CHANGE");
UDATA.OnAppStateChange('SESSION', function( decodedData ) {
let { isValid, token } = decodedData;
console.log('Handling SESSION',isValid);
if (isValid) DSTOR.SetSessionGroupID(decodedData);
});

});


/// SESSION ///////////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/*/ datastore needs to set NetMessage GroupID property on behalf of SESSIONS
because SESSION can't include NetMessage (or vice versa)
/*/
DSTOR.SetSessionGroupID = function(token) {
let decoded = SESSION.DecodeToken(token);
if (decoded.isValid) {
DSTOR.SetSessionGroupID = function ( decodedData ) {
let { token, isValid } = decodedData;
if (isValid) {
NetMessage.GlobalSetGroupID(token);
console.log("setting NetMessage group id", token);
console.log('setting NetMessage group id',token);
} else {
console.warn("will not set bad group id:", token);
console.warn('will not set bad group id:',token);
}
UDATA.SetAppState("SESSION", decoded);
};

/// DB INTERFACE //////////////////////////////////////////////////////////////
Expand Down
6 changes: 3 additions & 3 deletions build/app/unisys/common-session.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ SESUTIL.DecodeToken = function(token) {
groupId = 0;
}

// at this point groupId is valid
// at this point groupId is valid (begins with ID, all numeric)
// check for valid subgroupId
if (subId) {
if (
Expand All @@ -76,13 +76,13 @@ SESUTIL.DecodeToken = function(token) {
} else {
// subId exists but didn't match subid format
if (DBG) console.log("invalid subId string", subId);
isValid = false;
isValid = false; // groupId is still valid,
subId = 0;
}
}

// if isValid is false, check groupId is 0 or subId is 0, indicating error
let decoded = { isValid, classId, projId, hashedId, groupId, subId };
let decoded = { token, isValid, classId, projId, hashedId, groupId, subId };
return decoded;
};
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Expand Down
94 changes: 56 additions & 38 deletions build/app/unisys/component/SessionShell.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const PROMPTS = require("system/util/prompts");
const SESSION = require("unisys/common-session");
const PR = PROMPTS.Pad("SessionShell");
const ReactStrap = require("reactstrap");
const { Col, FormGroup, FormFeedback, Input, Label } = ReactStrap;
const { InputGroup, InputGroupAddon, Button, Col, Row, Form, FormGroup, FormFeedback, Input, Label } = ReactStrap;
const { Redirect } = require("react-router-dom");
const UNISYS = require("unisys/client");

Expand All @@ -50,7 +50,6 @@ const UNISYS = require("unisys/client");
/// these styles are copied from AutoComplete.css
const INPUT_STYLE = {
border: "1px solid #aaa",
borderRadius: "4px",
fontFamily: "Helvetica, sans-serif",
fontWeight: 300,
fontSize: "10px",
Expand All @@ -76,14 +75,18 @@ class SessionShell extends UNISYS.Component {
this.renderLogin = this.renderLogin.bind(this);
this.renderLoggedIn = this.renderLoggedIn.bind(this);
this.handleChange = this.handleChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
token: null,
classId: null,
projId: null,
hashedId: null,
subId: null,
groupId: null,
subId: null,
isValid: false
};

}

/// ROUTE RENDER FUNCTIONS ////////////////////////////////////////////////////
Expand Down Expand Up @@ -119,43 +122,49 @@ class SessionShell extends UNISYS.Component {
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/*/ render must login (readonly)
/*/
renderLogin(token) {
let decoded = token ? SESSION.DecodeToken(token) : this.state;
let { classId, projId, groupId, subId, hashedId, isValid } = decoded;
let formFeedback, tip;
if (classId) tip = "keep entering...";
else tip = "enter group ID";
renderLogin() {
let { token, classId, projId, groupId, subId, hashedId, isValid } = this.state;
if (token) token = token.toUpperCase();
let formFeedback, tip, input;
tip = "type group ID";
if (classId) tip = "scanning for valid code...";
if (projId) tip = "waiting for valid code...";
if (groupId) tip = "waiting for extra ID...";
if (hashedId) {
if (hashedId.length >= 3) {
if (!isValid) tip = `'${token}' is an invalid code`;
if (!groupId) tip = `'${token}' is an invalid code`;
else {
if (subId) tip = `login in as GROUP ${groupId} ${subId}`;
else tip = `login as GROUP ${groupId} or add -ID<num>`;
}
}
}
formFeedback = tip ? (
<FormFeedback className="text-right">
<small>{tip}</small>
</FormFeedback>
) : (
undefined
);
if (groupId) {
if (subId===0) {
tip = `e.g. ${classId}-${projId}-${hashedId} followed by -ID<num>`;
input = <Input invalid name="sessionToken" id="sessionToken" bsSize="sm" style={INPUT_STYLE} className="text-right" placeholder="CLASSID-PROJID-CODE" onChange={this.handleChange} />
formFeedback = <FormFeedback className="text-right"><small>{tip}</small></FormFeedback>
} else {
input = <Input valid name="sessionToken" id="sessionToken" bsSize="sm" style={INPUT_STYLE} className="text-right" placeholder="CLASSID-PROJID-CODE" onChange={this.handleChange} />
formFeedback = <FormFeedback valid className="text-right"><small>{tip}</small></FormFeedback>
}
} else {
input = <Input invalid name="sessionToken" id="sessionToken" bsSize="sm" style={INPUT_STYLE} className="text-right" placeholder="CLASSID-PROJID-CODE" onChange={this.handleChange} />
formFeedback = <FormFeedback className="text-right"><small>{tip}</small></FormFeedback>
}

return (
<Form onSubmit={this.onSubmit}>
<FormGroup row>
<Col sm={3}>
<Label className="small text-muted">Login</Label>
</Col>
<Col sm={9}>
<Input
invalid
name="sessionToken"
id="sessionToken"
bsSize="sm"
style={INPUT_STYLE}
className="text-right"
placeholder="CLASS-PROJECT-XYZ"
onChange={this.handleChange}
/>
<Col>
<InputGroup>
<InputGroupAddon addonType="prepend"><Button style={{fontSize:'10px'}} color="secondary" size="sm" disabled={!isValid} onSubmit={this.onSubmit}>LOGIN</Button></InputGroupAddon>
{input}
{formFeedback}
</InputGroup>
</Col>
</FormGroup>
</Form>
);
}
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Expand Down Expand Up @@ -196,26 +205,35 @@ class SessionShell extends UNISYS.Component {
// try to decode token
let decoded = SESSION.DecodeToken(token);
if (decoded.isValid) {
this.AppCall("GROUPID_CHANGE", token);
return this.renderLoggedIn(decoded);
} else {
return this.renderLogin(token);
}
// error in decode so render login field
return this.renderLogin(token);
}

/// EVENT HANDLERS ////////////////////////////////////////////////////////////
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
handleChange(event) {
let token = event.target.value;
let decoded = SESSION.DecodeToken(token);
let { classId, projId, hashedId, groupId, subId } = decoded;
let { classId, projId, hashedId, subId, groupId } = decoded;
this.setState(decoded);
this.SetAppState("SESSION", decoded);
if (decoded.groupId) {
}
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
onSubmit(event) {
event.preventDefault();
const BRUTAL_REDIRECT = true;
if (this.state.isValid) {
// force a page URL change
let redirect = `/edit/${event.target.value}`;
this.props.history.push(redirect);
if (BRUTAL_REDIRECT) {
const redirect = `/#/edit/${this.state.token}`;
window.location=redirect;
} else {
const redirect = `/edit/${this.state.token}`
this.props.history.push(redirect);
}
}
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
}
} // UNISYS.Component SessionShell

Expand Down