1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00

Whitelabel login form

- also make some changes to signup form
This commit is contained in:
Tim Daubenschütz 2016-03-07 14:04:34 +01:00
parent 6301c0fe46
commit bc3093d4d7
4 changed files with 21 additions and 19 deletions

View File

@ -22,7 +22,8 @@ let LoginForm = React.createClass({
propTypes: { propTypes: {
headerMessage: React.PropTypes.string, headerMessage: React.PropTypes.string,
submitMessage: React.PropTypes.string, submitMessage: React.PropTypes.string,
location: React.PropTypes.object location: React.PropTypes.object,
whitelabelName: React.PropTypes.string
}, },
mixins: [History], mixins: [History],
@ -46,7 +47,8 @@ let LoginForm = React.createClass({
render() { render() {
const { headerMessage, const { headerMessage,
location: { query: { email: emailQuery } }, location: { query: { email: emailQuery } },
submitMessage } = this.props; submitMessage,
whitelabelName } = this.props;
return ( return (
<Form <Form
@ -67,7 +69,7 @@ let LoginForm = React.createClass({
</span> </span>
}> }>
<div className="ascribe-form-header"> <div className="ascribe-form-header">
<h3>{headerMessage}</h3> <h3>{whitelabelName ? `Welcome to ${whitelabelName}` : headerMessage}</h3>
</div> </div>
<Property <Property
name='email' name='email'

View File

@ -29,7 +29,7 @@ let SignupForm = React.createClass({
React.PropTypes.element, React.PropTypes.element,
React.PropTypes.string React.PropTypes.string
]), ]),
whitelabel: React.PropTypes.object whitelabelName: React.PropTypes.string
}, },
mixins: [History], mixins: [History],
@ -63,11 +63,7 @@ let SignupForm = React.createClass({
headerMessage, headerMessage,
location: { query: { email: emailQuery } }, location: { query: { email: emailQuery } },
submitMessage, submitMessage,
whitelabel: { name: whitelabelName} } = this.props; whitelabelName } = this.props;
const tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
getLangText('This password is securing your digital property like a bank account') + '.\n ' +
getLangText('Store it in a safe place') + '!';
return ( return (
<Form <Form
@ -101,18 +97,16 @@ let SignupForm = React.createClass({
</Property> </Property>
<Property <Property
name='password' name='password'
label={getLangText('Password')} label={getLangText('Password')}>
tooltip={tooltipPassword}>
<input <input
type="password" type="password"
placeholder={getLangText('Use a combination of minimum 10 chars and numbers')} placeholder={getLangText('Use a combination of minimum 10 characters and numbers')}
autoComplete="on" autoComplete="on"
required/> required/>
</Property> </Property>
<Property <Property
name='password_confirm' name='password_confirm'
label={getLangText('Confirm Password')} label={getLangText('Confirm Password')}>
tooltip={tooltipPassword}>
<input <input
type="password" type="password"
placeholder={getLangText('Enter your password once again')} placeholder={getLangText('Enter your password once again')}

View File

@ -20,13 +20,18 @@ let LoginContainer = React.createClass({
}, },
render() { render() {
const { whitelabel: { name: whitelabelName },
location } = this.props;
setDocumentTitle(getLangText('Log in')); setDocumentTitle(getLangText('Log in'));
return ( return (
<div className="ascribe-login-wrapper"> <div className="ascribe-login-wrapper">
<LoginForm location={this.props.location} /> <LoginForm
location={location}
whitelabelName={whitelabelName} />
<div className="ascribe-login-text"> <div className="ascribe-login-text">
{getLangText('Not an ascribe user')}&#63; <Link to="/signup">{getLangText('Sign up')}...</Link><br/> {getLangText(`Not a ${whitelabelName || 'ascribe'} user`)}&#63; <Link to="/signup">{getLangText('Sign up')}...</Link><br/>
{getLangText('Forgot my password')}&#63; <Link to="/password_reset">{getLangText('Rescue me')}...</Link> {getLangText('Forgot my password')}&#63; <Link to="/password_reset">{getLangText('Rescue me')}...</Link>
</div> </div>
</div> </div>

View File

@ -34,7 +34,8 @@ let SignupContainer = React.createClass({
}, },
render() { render() {
const { location, whitelabel } = this.props; const { location,
whitelabel: { name: whitelabelName } } = this.props;
const { message, submitted } = this.state; const { message, submitted } = this.state;
setDocumentTitle(getLangText('Sign up')); setDocumentTitle(getLangText('Sign up'));
@ -53,10 +54,10 @@ let SignupContainer = React.createClass({
<div className="ascribe-login-wrapper"> <div className="ascribe-login-wrapper">
<SignupForm <SignupForm
handleSuccess={this.handleSuccess} handleSuccess={this.handleSuccess}
whitelabel={whitelabel} whitelabelName={whitelabelName}
location={location}/> location={location}/>
<div className="ascribe-login-text"> <div className="ascribe-login-text">
{getLangText(`Already a ${whitelabel.name || 'ascribe'} user`)}&#63; <Link to="/login">{getLangText('Log in')}...</Link><br/> {getLangText(`Already a ${whitelabelName || 'ascribe'} user`)}&#63; <Link to="/login">{getLangText('Log in')}...</Link><br/>
</div> </div>
</div> </div>