Skip to content

Commit

Permalink
Better improvements on forms
Browse files Browse the repository at this point in the history
 - Remove placeholders in favor of static labels
 - Add email button on register page
 - Remove zocial icons in favor of MDI svgs
 - Move “Forgot Password?” to near sign-in button
 - Small design adjustments
  • Loading branch information
kevincoleman committed Mar 8, 2019
1 parent 35b9480 commit 5207714
Show file tree
Hide file tree
Showing 11 changed files with 275 additions and 381 deletions.
1 change: 1 addition & 0 deletions assets/mdi-email-outline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/mdi-facebook.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/mdi-google.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/mdi-twitter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 0 additions & 21 deletions src/global_styl/zocial-fixes.styl

This file was deleted.

321 changes: 169 additions & 152 deletions src/index.html

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion src/ogs.styl
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,6 @@ nowrap()
@import "global_styl/global.styl";
@import "global_styl/bootstrap-esq.styl";
@import "global_styl/misc-ui.styl";
@import "global_styl/zocial-fixes.styl";
@import "global_styl/ogs-font.styl";
@import "lib/ogs-goban/Goban.styl";
@import "global_styl/swal.styl";
Expand Down
13 changes: 10 additions & 3 deletions src/views/Register/Register.styl
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,16 @@

.social-buttons {
text-align: center;
.zocial {
margin-left: 0.5rem;
margin-right: 0.5rem;
.mdi-icon {
padding: 0.5rem;
img {
width: 40px;
height: 40px;
}
&.email { filter: invert(52%) sepia(15%) saturate(7%) hue-rotate(35deg) brightness(87%) contrast(94%); }
&.google { filter: invert(26%) sepia(27%) saturate(5667%) hue-rotate(343deg) brightness(108%) contrast(107%); }
&.facebook { filter: invert(26%) sepia(84%) saturate(686%) hue-rotate(192deg) brightness(93%) contrast(85%); }
&.twitter { filter: invert(77%) sepia(45%) saturate(4872%) hue-rotate(178deg) brightness(95%) contrast(90%); }
}
}

Expand Down
117 changes: 20 additions & 97 deletions src/views/Register/Register.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,7 @@ export class Register extends React.PureComponent<{}, any> {
};

let focus_empty = (focus_email?: boolean) => {
if (
this.refs.username.value.trim() === "" ||
!this.validateUsername()
) {
if (this.refs.username.value.trim() === "" || !this.validateUsername()) {
this.refs.username.focus();
return true;
}
Expand Down Expand Up @@ -113,17 +110,13 @@ export class Register extends React.PureComponent<{}, any> {
validateUsername = (ev?) => {
if (/@/.test(this.refs.username.value)) {
$(this.refs.username).addClass("validation-error");
this.setState({
error: _(
"Your username will be publically visible, please do not use your email address here."
)
});
this.setState({ "error": _("Your username will be publically visible, please do not use your email address here.") });
this.refs.username.focus();
return false;
} else {
if ($(this.refs.username).hasClass("validation-error")) {
$(this.refs.username).removeClass("validation-error");
this.setState({ error: null });
this.setState({ "error": null });
}
}
return true;
Expand All @@ -135,100 +128,30 @@ export class Register extends React.PureComponent<{}, any> {
<Card>
<h2>{_("Welcome new player!")}</h2>
<form name="login" autoComplete="on">
<label htmlFor="username">Username</label>
<input
id="username"
className="boxed"
autoFocus
ref="username"
name="username"
onKeyPress={this.register}
onChange={this.validateUsername}
placeholder={
_(
"jack.smith"
) /* translators: New account registration */
}
/>
{this.state.error && (
<div className="error-message">
{this.state.error}
</div>
)}
<label htmlFor="password">Password</label>
<input
id="password"
className="boxed"
ref="password"
type="password"
name="password"
onKeyPress={this.register}
placeholder={
_(
"your unique password"
) /* translators: New account registration */
}
/>
<label htmlFor="email">Email (optional)</label>
<input
id="email"
className="boxed"
ref="email"
type="email"
name="email"
onKeyPress={this.register}
placeholder={
_(
"[email protected]"
) /* translators: New account registration */
}
/>
<div
style={{
textAlign: "right",
marginBottom: "1.0rem"
}}
>
<label htmlFor="username">{_("Username") /* translators: New account registration */}</label>
<input className="boxed" id="username" autoFocus ref="username" name="username" onKeyPress={this.register} onChange={this.validateUsername} />
{this.state.error && <div className="error-message">{this.state.error}</div>}
<label htmlFor="password">{_("Password") /* translators: New account registration */}</label>
<input className="boxed" id="password" ref="password" type="password" name="password" onKeyPress={this.register} />
<label htmlFor="email">{_("Email (optional)") /* translators: New account registration */}</label>
<input className="boxed" id="email" ref="email" type="email" name="email" onKeyPress={this.register} />
<div style={{ textAlign: "right", marginBottom: "1.0rem" }}>
<button className="primary" onClick={this.register}>
<i className="fa fa-sign-in" /> {_("Sign up")}
</button>
</div>
</form>

<div className="social-buttons">
<LineText>
{_(
"or sign in with"
) /* translators: username or password, or sign in with social authentication */}
</LineText>
<a
className="zocial email icon"
href="/sign-in/"
target="_self"
>
Google
</a>
<a
className="zocial google icon"
href="/login/google-oauth2/"
target="_self"
>
Google
</a>
<a
className="zocial facebook icon"
href="/login/facebook/"
target="_self"
>
Facebook
</a>
<a
className="zocial twitter icon"
href="/login/twitter/"
target="_self"
>
Twitter
</a>
<LineText>{
_("or sign in with") /* translators: username or password, or sign in with social authentication */
}</LineText>
<div className="icons">
<Link to="/sign-in" className="mdi-icon email"><img src="/mdi-email-outline.svg" alt="Email" /></Link>
<a href="/login/google-oauth2/" className="mdi-icon google"><img src="/mdi-google.svg" alt="Google" /></a>
<a href="/login/facebook/" className="mdi-icon facebook"><img src="/mdi-facebook.svg" alt="Facebook" /></a>
<a href="/login/twitter" className="mdi-icon twitter"><img src="/mdi-twitter.svg" alt="Twitter" /></a>
</div>
</div>
</Card>
</div>
Expand Down
70 changes: 51 additions & 19 deletions src/views/SignIn/SignIn.styl
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,46 @@
*/

#SignIn {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin-top: 1rem;

.Card {
padding: 1rem;
width: 15rem;
max-width: 100%;

h2 {
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;

.Card {
padding: 1rem;
width: 15rem;
max-width: 100%;

h2 {
margin-top: 0;
}

input {
width: 100%;
margin-bottom: 1rem;
}

.form-actions {
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: baseline;
}

}

.registration {
margin-top: 2rem;
text-align: center;

h3 {
margin-bottom: 0.5rem;
}

.fa-sign-in {
margin-right: 0.5rem;
}

input {
width: 100%;
margin-bottom: 1rem;
Expand All @@ -57,12 +82,19 @@
themedcolorshade1margin-bottom: 1rem;
}

.social-buttons {
text-align: center;
.zocial {
margin-top: 1rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
.social-buttons {
text-align: center;
.mdi-icon {
padding: 0.5rem;
img {
width: 40px;
height: 40px;
}
&.google { filter: invert(26%) sepia(27%) saturate(5667%) hue-rotate(343deg) brightness(108%) contrast(107%); }
&.facebook { filter: invert(26%) sepia(84%) saturate(686%) hue-rotate(192deg) brightness(93%) contrast(85%); }
&.twitter { filter: invert(77%) sepia(45%) saturate(4872%) hue-rotate(178deg) brightness(95%) contrast(90%); }
}

}
}
}
Loading

0 comments on commit 5207714

Please sign in to comment.