pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better validation of input

Browse Source
This commit is contained in:
or-else
2018-03-20 17:38:48 -07:00
parent 9283c4ede2
commit 1e69fabe2c
2 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+3
View File
@@ -178,6 +178,7 @@ textarea {
resize: none; resize: none;
} }
input[type="text"], input[type="text"],
input[type="email"],
input[type="password"], input[type="password"],
textarea { textarea {
height: 2.5rem; height: 2.5rem;
@@ -188,12 +189,14 @@ textarea {
} }
textarea:focus, textarea:focus,
input[type="text"]:focus, input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus { input[type="password"]:focus {
border-bottom: 1px solid #2196f3; border-bottom: 1px solid #2196f3;
box-shadow: 0 1px 0 rgba(33, 150, 243, 0.25); box-shadow: 0 1px 0 rgba(33, 150, 243, 0.25);
} }
input[type="text"]::placeholder, input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder, input[type="password"]::placeholder,
textarea::placeholder { textarea::placeholder {
color: #bbb; color: #bbb;
index.html
+31 -34
View File
@@ -1011,27 +1011,25 @@
submitClasses += " disabled"; submitClasses += " disabled";
} }
return ( return (
<div> <form id="login-form" onSubmit={this.handleSubmit}>
<form id="login-form" onSubmit={this.handleSubmit}> <input type="text" id="inputLogin"
<input type="text" id="inputLogin" placeholder="Login (alice, bob, carol, dave, frank)"
placeholder="Login (alice, bob, carol, dave, frank)" autoComplete="username"
autoComplete="username" value={this.state.login}
value={this.state.login} onChange={this.handleLoginChange}
onChange={this.handleLoginChange} required autoFocus />
required autoFocus /> <input type="password" id="inputPassword"
<input type="password" id="inputPassword" placeholder="Password (alice123, bob123, ...)"
placeholder="Password (alice123, bob123, ...)" autoComplete="current-password"
autoComplete="current-password" value={this.state.password}
value={this.state.password} onChange={this.handlePasswordChange}
onChange={this.handlePasswordChange} required />
required /> <HostSelector serverAddress={this.props.serverAddress}
<HostSelector serverAddress={this.props.serverAddress} onServerAddressChange={this.handleServerAddressChange} />
onServerAddressChange={this.handleServerAddressChange} /> <div className="dialog-buttons">
<div className="dialog-buttons"> <button className={submitClasses} type="submit">Sign in</button>
<button className={submitClasses} type="submit">Sign in</button> </div>
</div> </form>
</form>
</div>
); );
} }
}); });
@@ -1071,8 +1069,9 @@
handleSubmit: function(e) { handleSubmit: function(e) {
e.preventDefault(); e.preventDefault();
if (this.state.password.trim() != this.state.password2.trim()) { if (this.state.password.trim() != this.state.password2.trim()) {
// FIXME(gene): report an error here. this.props.onError("Passwords don't match", "warn");
} else { } else {
// TODO: check email for validity
this.setState({errorCleared: false}); this.setState({errorCleared: false});
this.props.onCreateAccount( this.props.onCreateAccount(
this.state.login.trim(), this.state.login.trim(),
@@ -1087,7 +1086,7 @@
submitClasses += " disabled"; submitClasses += " disabled";
} }
return ( return (
<div className="panel-form"> <form className="panel-form-column" onSubmit={this.handleSubmit}>
<div className="panel-form-row"> <div className="panel-form-row">
<div className="panel-form-column"> <div className="panel-form-column">
<input type="text" placeholder="Login" <input type="text" placeholder="Login"
@@ -1102,7 +1101,7 @@
onError={this.props.onError} /> onError={this.props.onError} />
</div> </div>
<div className="panel-form-row"> <div className="panel-form-row">
<input type="text" placeholder="Email, e.g john.doe@example.com" <input type="email" placeholder="Email, e.g john.doe@example.com"
value={this.state.email} onChange={this.handleEmailChange} required/> value={this.state.email} onChange={this.handleEmailChange} required/>
</div> </div>
<div className="panel-form-row"> <div className="panel-form-row">
@@ -1110,9 +1109,9 @@
value={this.state.fn} onChange={this.handleFnChange} required/> value={this.state.fn} onChange={this.handleFnChange} required/>
</div> </div>
<div className="dialog-buttons"> <div className="dialog-buttons">
<button className={submitClasses} onClick={this.handleSubmit}>Sign up</button> <button className={submitClasses} type="submit">Sign up</button>
</div> </div>
</div> </form>
); );
} }
}); });
@@ -2190,7 +2189,7 @@
<div className="panel-form-row"> <div className="panel-form-row">
<input type="text" placeholder="List like email:alice@example.com, tel:17025550003..." <input type="text" placeholder="List like email:alice@example.com, tel:17025550003..."
value={this.state.search} onChange={this.handleSearchChange} value={this.state.search} onChange={this.handleSearchChange}
onKeyPress={this.handleKeyPress} required /> onKeyPress={this.handleKeyPress} required autoFocus />
<a href="#" onClick={this.handleSearch}> <a href="#" onClick={this.handleSearch}>
<i className="material-icons">search</i> <i className="material-icons">search</i>
</a> </a>
@@ -3407,7 +3406,8 @@
</a>} </a>}
<textarea id="sendMessage" placeholder={prompt} <textarea id="sendMessage" placeholder={prompt}
disabled={this.props.disabled} value={this.state.message} disabled={this.props.disabled} value={this.state.message}
onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress} /> onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress}
autoFocus />
{this.props.disabled ? {this.props.disabled ?
<i className="material-icons disabled">send</i> : <i className="material-icons disabled">send</i> :
<a href="#" onClick={this.handleSend} title="Send"><i className="material-icons">send</i></a>} <a href="#" onClick={this.handleSend} title="Send"><i className="material-icons">send</i></a>}
@@ -3600,7 +3600,7 @@
doLogin: function(login, password, cred) { doLogin: function(login, password, cred) {
var instance = this; var instance = this;
cred = cred ? Tinode.addCredential(null, cred.type, null, null, cred.resp).cred : undefined; cred = cred ? Tinode.addCredential(null, cred).cred : undefined;
// Try to login with token. If token is not available, try password. If no password, ask for it. // Try to login with token. If token is not available, try password. If no password, ask for it.
var promise = null; var promise = null;
var token = Tinode.getLoginToken(); var token = Tinode.getLoginToken();
@@ -3791,11 +3791,8 @@
var instance = this; var instance = this;
Tinode.connect(this.state.serverAddress) Tinode.connect(this.state.serverAddress)
.then(function() { .then(function() {
if (cred_ && !Array.isArray(cred_)) { var params = Tinode.addCredential({public: public_, tags: tags_}, cred_);
cred_ = [cred_]; return Tinode.createAccountBasic(login_, password_, params);
}
return Tinode.createAccountBasic(login_, password_,
{public: public_, cred: cred_, tags: tags_});
}).then(function(ctrl) { }).then(function(ctrl) {
if (ctrl.code >= 300 && ctrl.text === "validate credentials") { if (ctrl.code >= 300 && ctrl.text === "validate credentials") {
instance.handleCredentialsRequest(ctrl.params); instance.handleCredentialsRequest(ctrl.params);