r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

Fix layout on user pages

This commit is contained in:
Andrew Nicolaou 2019-06-04 14:57:48 +02:00 committed by Cassie Tarakajian
parent 1f95718f58
commit eb4846c3c2
5 changed files with 112 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/modules/User/pages/EmailVerificationView.jsx
View File

@ -65,21 +65,23 @@ class EmailVerificationView extends React.Component {
} }
return ( return (
<div className="form-container user"> <div className="user">
<Helmet> <div className="form-container">
<title>p5.js Web Editor | Email Verification</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Email Verification</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.closeLoginPage}> </button>
<InlineSVG src={exitUrl} alt="Close Login Page" /> <button className="form-container__exit-button" onClick={this.closeLoginPage}>
</button> <InlineSVG src={exitUrl} alt="Close Login Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Verify your email</h2> <div className="form-container__content">
{status} <h2 className="form-container__title">Verify your email</h2>
{status}
</div>
</div> </div>
</div> </div>
); );

54
client/modules/User/pages/LoginView.jsx
View File

@ -34,32 +34,34 @@ class LoginView extends React.Component {
return null; return null;
} }
return ( return (
<div className="form-container user"> <div className="user">
<Helmet> <div className="form-container">
<title>p5.js Web Editor | Login</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Login</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.closeLoginPage}> </button>
<InlineSVG src={exitUrl} alt="Close Login Page" /> <button className="form-container__exit-button" onClick={this.closeLoginPage}>
</button> <InlineSVG src={exitUrl} alt="Close Login Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Log In</h2> <div className="form-container__content">
<LoginForm {...this.props} /> <h2 className="form-container__title">Log In</h2>
<h2 className="form-container__divider">Or</h2> <LoginForm {...this.props} />
<GithubButton buttonText="Login with Github" /> <h2 className="form-container__divider">Or</h2>
<GoogleButton buttonText="Login with Google" /> <GithubButton buttonText="Login with Github" />
<p className="form__navigation-options"> <GoogleButton buttonText="Login with Google" />
Don&apos;t have an account?&nbsp; <p className="form__navigation-options">
<Link className="form__signup-button" to="/signup">Sign Up</Link> Don&apos;t have an account?&nbsp;
</p> <Link className="form__signup-button" to="/signup">Sign Up</Link>
<p className="form__navigation-options"> </p>
Forgot your password?&nbsp; <p className="form__navigation-options">
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link> Forgot your password?&nbsp;
</p> <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
</p>
</div>
</div> </div>
</div> </div>
); );

38
client/modules/User/pages/NewPasswordView.jsx
View File

@ -35,24 +35,26 @@ class NewPasswordView extends React.Component {
'user': true 'user': true
}); });
return ( return (
<div className={newPasswordClass}> <div className="user">
<Helmet> <div className={newPasswordClass}>
<title>p5.js Web Editor | New Password</title> <Helmet>
</Helmet> <title>p5.js Web Editor | New Password</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.gotoHomePage}> </button>
<InlineSVG src={exitUrl} alt="Close NewPassword Page" /> <button className="form-container__exit-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={exitUrl} alt="Close NewPassword Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Set a New Password</h2> <div className="form-container__content">
<NewPasswordForm {...this.props} /> <h2 className="form-container__title">Set a New Password</h2>
<p className="new-password__invalid"> <NewPasswordForm {...this.props} />
The password reset token is invalid or has expired. <p className="new-password__invalid">
</p> The password reset token is invalid or has expired.
</p>
</div>
</div> </div>
</div> </div>
); );

50
client/modules/User/pages/ResetPasswordView.jsx
View File

@ -34,30 +34,32 @@ class ResetPasswordView extends React.Component {
'user': true 'user': true
}); });
return ( return (
<div className={resetPasswordClass}> <div className="user">
<Helmet> <div className={resetPasswordClass}>
<title>p5.js Web Editor | Reset Password</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Reset Password</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.gotoHomePage}> </button>
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" /> <button className="form-container__exit-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Reset Your Password</h2> <div className="form-container__content">
<ResetPasswordForm {...this.props} /> <h2 className="form-container__title">Reset Your Password</h2>
<p className="reset-password__submitted"> <ResetPasswordForm {...this.props} />
Your password reset email should arrive shortly. If you don&apos;t see it, check <p className="reset-password__submitted">
in your spam folder as sometimes it can end up there. Your password reset email should arrive shortly. If you don&apos;t see it, check
</p> in your spam folder as sometimes it can end up there.
<p className="form__navigation-options"> </p>
<Link className="form__login-button" to="/login">Log In</Link> <p className="form__navigation-options">
&nbsp;or&nbsp; <Link className="form__login-button" to="/login">Log In</Link>
<Link className="form__signup-button" to="/signup">Sign Up</Link> &nbsp;or&nbsp;
</p> <Link className="form__signup-button" to="/signup">Sign Up</Link>
</p>
</div>
</div> </div>
</div> </div>
); );

40
client/modules/User/pages/SignupView.jsx
View File

@ -34,25 +34,27 @@ class SignupView extends React.Component {
return null; return null;
} }
return ( return (
<div className="form-container user"> <div className="user">
<Helmet> <div className="form-container">
<title>p5.js Web Editor | Signup</title> <Helmet>
</Helmet> <title>p5.js Web Editor | Signup</title>
<div className="form-container__header"> </Helmet>
<button className="form-container__logo-button" onClick={this.gotoHomePage}> <div className="form-container__header">
<InlineSVG src={logoUrl} alt="p5js Logo" /> <button className="form-container__logo-button" onClick={this.gotoHomePage}>
</button> <InlineSVG src={logoUrl} alt="p5js Logo" />
<button className="form-container__exit-button" onClick={this.closeSignupPage}> </button>
<InlineSVG src={exitUrl} alt="Close Signup Page" /> <button className="form-container__exit-button" onClick={this.closeSignupPage}>
</button> <InlineSVG src={exitUrl} alt="Close Signup Page" />
</div> </button>
<div className="form-container__content"> </div>
<h2 className="form-container__title">Sign Up</h2> <div className="form-container__content">
<SignupForm {...this.props} /> <h2 className="form-container__title">Sign Up</h2>
<p className="form__navigation-options"> <SignupForm {...this.props} />
Already have an account?&nbsp; <p className="form__navigation-options">
<Link className="form__login-button" to="/login">Log In</Link> Already have an account?&nbsp;
</p> <Link className="form__login-button" to="/login">Log In</Link>
</p>
</div>
</div> </div>
</div> </div>
); );