Skip to content

Commit

Permalink
Add Bootstrap 3 notification to sign-up and
Browse files Browse the repository at this point in the history 
sign-in pages
  • Loading branch information
@guillecro
guillecro committed Nov 24, 2023
1 parent 52298b6 commit 36a98f3
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 146 deletions.
127 changes: 72 additions & 55 deletions lib/site/forgot/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,64 +38,81 @@ export default class Forgot extends Component {

render () {
return (
<div className='center-container'>
<div id='forgot-form'>
<div className='title-page'>
<div className='circle'>
<i className='icon-envelope' />
<div>
<div className="container">
<div className="row">
<div className='panel panel-danger' role='alert' style={{fontSize: '12px', marginTop: '10px'}}>
<div className="panel-heading">
<h3 className="panel-title">📢 Importante</h3>
</div>
<div className="panel-body">
<p>Debido a la <u>alta demanda</u> en registros y recuperaciones de contraseña, <b>las cuentas de correo de Microsoft (hotmail.com/live.com/outlook.com) han tenido problemas</b> en recibir correo. Esto se debe a un factor externo fuera de nuestro control. Si han tenido problemas en recuperar contraseña o en registrarse utilizando, le pedimos que vuelvan a intentarlo. </p>
<p>📣 Los correos de otros proveedores como Gmail, Yahoo, etc. <u>no se ven afectados</u>. ✅</p>
<p>👉 <b>Si ya te registraste</b>: Hemos validado todas las cuentas que no han podido recibir su correo para confirmar su registro. Por favor, intente iniciar sesión. Si recibe un mensaje que debe validar su contraseña, puede reenviarse el correo de confirmacion haciendo <a href="https://participa.mardelplata.gob.ar/signup/resend-validation-email" target='_blank'>clic aquí</a> Si aun asi no logra poder verificar, intentelo mas tarde pasadas unas horas.</p>
<p>👉 <b>Si te olvidaste tu contraseña y no logras recibir el correo</b>: Por favor te pedimos que esperes unas horas y vuelvas a intentarlo.</p>
</div>
</div>
<h1>{t('forgot.question')}</h1>
</div>
<p className={!this.state.success ? 'explanation-message' : 'hide'}>
{t('forgot.explanation')}.
</p>
<p className={this.state.success ? 'success-message' : 'hide'}>
{t('forgot.mail.sent')}.
</p>
<p className={this.state.success ? '' : 'hide'}>
Si no te llega el correo electrónico asegurate de mirar tu casilla de <strong>correo no deseado</strong>.
</p>
<p className={this.state.success ? '' : 'hide'}>
Si no lo recibiste podés contactarte con <a href="mailto:[email protected]">[email protected]</a>.
</p>
<FormAsync
action='/api/forgot'
hidden={this.state.success}
onSuccess={this.onSuccess.bind(this)}
onFail={this.onFail.bind(this)}
onSubmit={this.onSubmit.bind(this)}>
<ul
className={this.state.errors ? 'form-errors' : 'hide'}>
{
this.state.errors && this.state.errors
.map((error, key) => (<li key={key}>{error}</li>))
}
</ul>
<div className='form-group'>
<label htmlFor='forgot-email'>{t('signup.email')}</label>
<input
type='email'
className='form-control'
name='email'
maxLength='200'
tabIndex={1}
placeholder={t('forgot.mail.example')}
required />
</div>
<div className='form-group'>
<button
className={!this.state.loading ? 'btn btn-primary btn-block' : 'hide'}
type='submit'
tabIndex={3}>
{t('forgot.reset')}
</button>
<button
className={this.state.loading ? 'loader-btn btn btn-block btn-default' : 'hide'}>
<div className='loader' />
{t('forgot.reset')}
</button>
</div>
<div className='center-container'>
<div id='forgot-form'>
<div className='title-page'>
<div className='circle'>
<i className='icon-envelope' />
</div>
<h1>{t('forgot.question')}</h1>
</div>
</FormAsync>
<p className={!this.state.success ? 'explanation-message' : 'hide'}>
{t('forgot.explanation')}.
</p>
<p className={this.state.success ? 'success-message' : 'hide'}>
{t('forgot.mail.sent')}.
</p>
<p className={this.state.success ? '' : 'hide'}>
Si no te llega el correo electrónico asegurate de mirar tu casilla de <strong>correo no deseado</strong>.
</p>
<p className={this.state.success ? '' : 'hide'}>
Si no lo recibiste podés contactarte con <a href="mailto:[email protected]">[email protected]</a>.
</p>
<FormAsync
action='/api/forgot'
hidden={this.state.success}
onSuccess={this.onSuccess.bind(this)}
onFail={this.onFail.bind(this)}
onSubmit={this.onSubmit.bind(this)}>
<ul
className={this.state.errors ? 'form-errors' : 'hide'}>
{
this.state.errors && this.state.errors
.map((error, key) => (<li key={key}>{error}</li>))
}
</ul>
<div className='form-group'>
<label htmlFor='forgot-email'>{t('signup.email')}</label>
<input
type='email'
className='form-control'
name='email'
maxLength='200'
tabIndex={1}
placeholder={t('forgot.mail.example')}
required />
</div>
<div className='form-group'>
<button
className={!this.state.loading ? 'btn btn-primary btn-block' : 'hide'}
type='submit'
tabIndex={3}>
{t('forgot.reset')}
</button>
<button
className={this.state.loading ? 'loader-btn btn btn-block btn-default' : 'hide'}>
<div className='loader' />
{t('forgot.reset')}
</button>
</div>
</FormAsync>
</div>
</div>
</div>
)
Expand Down
146 changes: 74 additions & 72 deletions lib/site/reset/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,80 +49,82 @@ export default class Reset extends Component {

render () {
return (
<div className='center-container'>
<div id='reset-form'>
<div className='title-page'>
<div className='circle'>
<i className='icon-energy' />
<div>
<div className='center-container'>
<div id='reset-form'>
<div className='title-page'>
<div className='circle'>
<i className='icon-energy' />
</div>
<h1>{t('forgot.reset')}</h1>
</div>
<h1>{t('forgot.reset')}</h1>
</div>
<FormAsync
action='/api/forgot/reset'
className='form'
onSuccess={this.onSuccess.bind(this)}
onFail={this.onFail.bind(this)}
onSubmit={this.onSubmit.bind(this)}>
<input
type='hidden'
name='token'
defaultValue={this.props.params.token} />
{
!!this.state.errors.length &&
(
<ul
className='form-errors'>
{
this.state.errors && this.state.errors
.map((error, key) => (<li key={key}>{error}</li>))
}
</ul>
)
}
{
!!this.state.msg &&
(
<div className='alert alert-success'>
{this.state.msg}
</div>
)
}
<div className='form-group'>
<label htmlFor='pass-reset'>{t('password.new')}</label>
<input
id='reset-pass'
type='password'
className='form-control'
name='password'
tabIndex={1}
placeholder={t('password')}
required />
</div>
<div className='form-group'>
<label htmlFor='pass-reset-re'>{t('password.retype')}</label>
<FormAsync
action='/api/forgot/reset'
className='form'
onSuccess={this.onSuccess.bind(this)}
onFail={this.onFail.bind(this)}
onSubmit={this.onSubmit.bind(this)}>
<input
type='password'
className='form-control'
name='re_password'
tabIndex={2}
placeholder={t('password.repeat')}
required />
</div>
<div className='form-group'>
<button
className={!this.state.loading ? 'btn btn-primary btn-block' : 'hide'}
onClick={this.validatePass}
type='submit'
tabIndex={3}>
{t('form.send')}
</button>
<button
className={this.state.loading ? 'loader-btn btn btn-default btn-block' : 'hide'}>
<div className='loader' />
{t('form.send')}
</button>
</div>
</FormAsync>
type='hidden'
name='token'
defaultValue={this.props.params.token} />
{
!!this.state.errors.length &&
(
<ul
className='form-errors'>
{
this.state.errors && this.state.errors
.map((error, key) => (<li key={key}>{error}</li>))
}
</ul>
)
}
{
!!this.state.msg &&
(
<div className='alert alert-success'>
{this.state.msg}
</div>
)
}
<div className='form-group'>
<label htmlFor='pass-reset'>{t('password.new')}</label>
<input
id='reset-pass'
type='password'
className='form-control'
name='password'
tabIndex={1}
placeholder={t('password')}
required />
</div>
<div className='form-group'>
<label htmlFor='pass-reset-re'>{t('password.retype')}</label>
<input
type='password'
className='form-control'
name='re_password'
tabIndex={2}
placeholder={t('password.repeat')}
required />
</div>
<div className='form-group'>
<button
className={!this.state.loading ? 'btn btn-primary btn-block' : 'hide'}
onClick={this.validatePass}
type='submit'
tabIndex={3}>
{t('form.send')}
</button>
<button
className={this.state.loading ? 'loader-btn btn btn-default btn-block' : 'hide'}>
<div className='loader' />
{t('form.send')}
</button>
</div>
</FormAsync>
</div>
</div>
</div>
)
Expand Down
54 changes: 35 additions & 19 deletions lib/site/sign-in/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,27 +136,43 @@ export class SignIn extends Component {
)

return (
<div id='sign-in'>
<div className='title-page'>
<div className='circle'>
<i className='icon-login' />
<div>
{/* Bootstrap 3 notification */}
<div className="container">
<div className="row">
<div className='panel panel-danger' role='alert' style={{fontSize: '12px', marginTop: '10px'}}>
<div className="panel-heading">
<h3 className="panel-title">📢 Importante</h3>
</div>
<div className="panel-body">
<p>Debido a la <u>alta demanda</u> en registros y recuperaciones de contraseña, <b>las cuentas de correo de Microsoft (hotmail.com/live.com/outlook.com) han tenido problemas</b> en recibir correo. Esto se debe a un factor externo fuera de nuestro control. Si han tenido problemas en recuperar contraseña o en registrarse utilizando, le pedimos que vuelvan a intentarlo. </p>
<p>📣 Los correos de otros proveedores como Gmail, Yahoo, etc. <u>no se ven afectados</u>. ✅</p>
<p>👉 <b>Si ya te registraste</b>: Hemos validado todas las cuentas que no han podido recibir su correo para confirmar su registro. Por favor, intente iniciar sesión. Si recibe un mensaje que debe validar su contraseña, puede reenviarse el correo de confirmacion haciendo <a href="https://participa.mardelplata.gob.ar/signup/resend-validation-email" target='_blank'>clic aquí</a> Si aun asi no logra poder verificar, intentelo mas tarde pasadas unas horas.</p>
<p>👉 <b>Si te olvidaste tu contraseña y no logras recibir el correo</b>: Por favor te pedimos que esperes unas horas y vuelvas a intentarlo.</p>
</div>
</div>
</div>
</div>
{!config.facebookSignin
&&
<h1 className='ingresar-title'>{t('header.signin')}</h1>
||
<FacebookForm />
}

{ form }

<hr />
<div className="signup">
<span>¿Todavía no te hiciste una cuenta?</span>
<button type="submit" className="btn btn-block btn-outline-primary" onClick={this.handleSignUp}>
¡Hacé click y registrate!
</button>
<div id='sign-in'>
<div className='title-page'>
<div className='circle'>
<i className='icon-login' />
</div>
</div>
{!config.facebookSignin
&&
<h1 className='ingresar-title'>{t('header.signin')}</h1>
||
<FacebookForm />
}
{ form }
<hr />
<div className="signup">
<span>¿Todavía no te hiciste una cuenta?</span>
<button type="submit" className="btn btn-block btn-outline-primary" onClick={this.handleSignUp}>
¡Hacé click y registrate!
</button>
</div>
</div>
</div>
)
Expand Down
15 changes: 15 additions & 0 deletions lib/site/sign-up/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,21 @@ export default class SignUp extends Component {

return (
<div className='center-container'>
<div className="container">
<div className="row">
<div className='panel panel-danger' role='alert' style={{fontSize: '12px', marginTop: '10px'}}>
<div className="panel-heading">
<h3 className="panel-title">📢 Importante</h3>
</div>
<div className="panel-body">
<p>Debido a la <u>alta demanda</u> en registros y recuperaciones de contraseña, <b>las cuentas de correo de Microsoft (hotmail.com/live.com/outlook.com) han tenido problemas</b> en recibir correo. Esto se debe a un factor externo fuera de nuestro control. Si han tenido problemas en recuperar contraseña o en registrarse utilizando, le pedimos que vuelvan a intentarlo. </p>
<p>📣 Los correos de otros proveedores como Gmail, Yahoo, etc. <u>no se ven afectados</u>. ✅</p>
<p>👉 <b>Si ya te registraste</b>: Hemos validado todas las cuentas que no han podido recibir su correo para confirmar su registro. Por favor, intente iniciar sesión. Si recibe un mensaje que debe validar su contraseña, puede reenviarse el correo de confirmacion haciendo <a href="https://participa.mardelplata.gob.ar/signup/resend-validation-email" target='_blank'>clic aquí</a> Si aun asi no logra poder verificar, intentelo mas tarde pasadas unas horas.</p>
<p>👉 <b>Si te olvidaste tu contraseña y no logras recibir el correo</b>: Por favor te pedimos que esperes unas horas y vuelvas a intentarlo.</p>
</div>
</div>
</div>
</div>
{
this.state.active === 'form' &&
(
Expand Down

0 comments on commit 36a98f3

Please sign in to comment.