Sign up steps and Login

client/coral-framework/actions/auth.js

@@ -64,3 +64,28 @@ export const loginFacebookRequest = () => ({
 export const loginRequest = () => ({
   type: actions.USER_SIGNIN_REQUEST
 });
+
+const showSignInForm = () => ({
+  type: actions.SHOW_SIGNIN_FORM
+});
+
+const showSignUpForm = () => ({
+  type: actions.SHOW_SIGNUP_FORM
+});
+
+const newStep = (step) => ({
+  type: actions.NEW_STEP,
+  step
+});
+
+export const goTo = (step) => dispatch => {
+  dispatch(newStep(step));
+  switch (step) {
+  case 1 :
+    return dispatch(showSignInForm());
+  case 2 :
+    return dispatch(showSignUpForm());
+  default :
+    return dispatch(showSignInForm());
+  }
+};

client/coral-framework/constants/auth.js

@@ -8,4 +8,8 @@ export const USER_LOGOUT_REQUEST = 'USER_LOGOUT_REQUEST';
 export const USER_LOGOUT_SUCCESS = 'USER_LOGOUT_SUCCESS';
 export const USER_LOGOUT_FAILURE = 'USER_LOGOUT_FAILURE';
 export const SHOW_SIGNIN_DIALOG = 'SHOW_SIGNIN_DIALOG';
-export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG';
+export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG';
+
+export const NEW_STEP = 'NEW_STEP';
+export const SHOW_SIGNIN_FORM = 'SHOW_SIGNIN_FORM';
+export const SHOW_SIGNUP_FORM = 'SHOW_SIGNUP_FORM';

client/coral-framework/reducers/auth.js

@@ -2,7 +2,8 @@ import {Map} from 'immutable';
 
 import {
   SHOW_SIGNIN_DIALOG,
-  HIDE_SIGNIN_DIALOG
+  HIDE_SIGNIN_DIALOG,
+  NEW_STEP
 } from '../constants/auth';
 
 const initialState = Map({
@@ -10,17 +11,21 @@ const initialState = Map({
   loggedIn: false,
   error: '',
   user: {},
-  showSignInDialog: false
+  showSignInDialog: false,
+  step: 1
 });
 
 export default function community (state = initialState, action) {
   switch (action.type) {
   case SHOW_SIGNIN_DIALOG :
     return state
-      .set('showSignInDialog', true)
+      .set('showSignInDialog', true);
   case HIDE_SIGNIN_DIALOG :
     return state
-      .set('showSignInDialog', false)
+      .set('showSignInDialog', false);
+  case NEW_STEP :
+    return state
+      .set('step', action.step);
   default :
     return state;
   }

client/coral-sign-in/components/Button.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './styles.css';
 
-const Button = ({type = 'local', children, ...props}) => (
+const Button = ({type = 'local', children, className, ...props}) => (
   <button
-    className={`${styles.button} ${styles[type]}`}
+    className={`${styles.button} ${styles[`type--${type}`]} ${className}`}
     {...props}
   >
     {children}

client/coral-sign-in/components/SignDialog.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Dialog} from 'coral-ui';
+import styles from './styles.css';
+
+import SignInContent from './SignInContent';
+import SingUpContent from './SignUpContent';
+
+const SignDialog = ({open, step, ...props}) => (
+  <Dialog className={styles.dialog} open={open}>
+    {step === 1 && <SignInContent {...props} />}
+    {step === 2 && <SingUpContent {...props} />}
+  </Dialog>
+);
+
+export default SignDialog;

client/coral-sign-in/components/SignIn.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const SignIn = ({openSignInDialog, children}) => (
-  <div>
-    <Button onClick={openSignInDialog}>
-      Sign in to comment
-    </Button>
-    {children}
-  </div>
-);
-
-export default SignIn;

client/coral-sign-in/components/SignInContent.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import styles from './styles.css';
+import Button from './Button';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
+
+const SignInContent = ({openFacebookWindow, goTo}) => (
+  <div>
+    <div className={styles.header}>
+      <h1>{lang.t('signIn.signIn')}</h1>
+    </div>
+    <div className={styles.socialConnections}>
+      <Button type="facebook" onClick={openFacebookWindow}>
+        {lang.t('signIn.facebookSignIn')}
+      </Button>
+    </div>
+    <div className={styles.separator}>
+      <h1>{lang.t('signIn.or')}</h1>
+    </div>
+    <form>
+      <div className={styles.formField}>
+        <label htmlFor="email">{lang.t('signIn.email')}</label>
+        <input type="text" id="email" />
+      </div>
+      <div className={styles.formField}>
+        <label htmlFor="password">{lang.t('signIn.password')}</label>
+        <input type="password" id="password" />
+      </div>
+      <Button type="black" className={styles.signInButton} onClick={()=>{}}>
+        {lang.t('signIn.signIn')}
+      </Button>
+    </form>
+    <div className={styles.footer}>
+      <span><a>{lang.t('signIn.forgotYourPass')}</a></span>
+      <span>{lang.t('signIn.needAnAccount')} <a onClick={() => goTo(2)}>{lang.t('signIn.register')}</a></span>
+    </div>
+  </div>
+);
+
+export default SignInContent;

client/coral-sign-in/components/SignInDialog.js

@@ -1,37 +0,0 @@
-import React, {Component} from 'react';
-import { Dialog } from 'coral-ui';
-import styles from './styles.css';
-import Button from './Button';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
-const lang = new I18n(translations);
-
-const SignInDialog = ({open, openFacebookWindow}) => (
-  <Dialog
-    className={styles.dialog}
-    open={open}
-  >
-    <h1>Sign In</h1>
-    <Button type="facebook" onClick={openFacebookWindow}>
-      {lang.t('signIn.facebookLogin')}
-    </Button>
-    <hr/>
-      <form>
-        <label>
-          Email Adress
-        <input type="text"/>
-        </label>
-        <label>
-          Password
-          <input type="Password"/>
-        </label>
-        <Button onClick={()=>{}}>
-          Sign In
-        </Button>
-        Forgot Password
-        Need an Account? <a>Register</a>
-      </form>
-  </Dialog>
-);
-
-export default SignInDialog;

client/coral-sign-in/components/SignUpContent.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './styles.css';
+import Button from './Button';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
+
+const SignUpContent = ({goTo, openFacebookWindow}) => (
+  <div>
+    <div className={styles.header}>
+      <h1>{lang.t('signIn.signUp')}</h1>
+    </div>
+    <div className={styles.socialConnections}>
+      <Button type="facebook" onClick={openFacebookWindow}>
+        {lang.t('signIn.facebookSignUp')}
+      </Button>
+    </div>
+    <div className={styles.separator}>
+      <h1>{lang.t('signIn.or')}</h1>
+    </div>
+    <form>
+      <div className={styles.formField}>
+        <label htmlFor="email">{lang.t('signIn.email')}</label>
+        <input type="text" id="email" />
+      </div>
+      <div className={styles.formField}>
+        <label htmlFor="username">{lang.t('signIn.username')}</label>
+        <input type="text" id="username" />
+      </div>
+      <div className={styles.formField}>
+        <label htmlFor="password">{lang.t('signIn.password')}</label>
+        <input type="password" id="password" />
+      </div>
+      <div className={styles.formField}>
+        <label htmlFor="confirmPassword">{lang.t('signIn.confirmPassword')}</label>
+        <input type="password" id="confirmPassword" />
+      </div>
+      <Button type="black" className={styles.signInButton} onClick={()=>{}}>
+        {lang.t('signIn.signIn')}
+      </Button>
+    </form>
+    <div className={styles.footer}>
+      <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => goTo(1)}>{lang.t('signIn.signIn')}</a></span>
+    </div>
+  </div>
+);
+
+export default SignUpContent;

client/coral-sign-in/components/styles.css

@@ -12,7 +12,6 @@
     font-family: 'Roboto','Helvetica','Arial',sans-serif;
     font-size: 14px;
     font-weight: 500;
-    text-transform: uppercase;
     letter-spacing: 0;
     overflow: hidden;
     will-change: box-shadow,transform;
@@ -24,20 +23,27 @@
     text-align: center;
     line-height: 36px;
     vertical-align: middle;
+    width: 100%;
+    margin: 0;
 }
 
-.local {
+.type--black {
+    color: #E0E0E0;
+    background: #212121;
+}
+
+.type--local {
     background: #E0E0E0;
     color: #212121;
 }
 
-.facebook {
+.type--facebook {
     background-color: #4267b2;
     border-color: #4267b2;
     color: rgb(255, 255, 255);
 }
 
-.facebook:hover {
+.type--facebook:hover {
     background-color: #365899;
     border-color: #365899;
 }
@@ -45,4 +51,57 @@
 .dialog {
     width: 400px;
     border: none;
+    border: none;
+    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+    width: 280px;
+}
+
+.header {
+    margin-bottom: 20px;
+}
+
+.header h1, .separator h1{
+    text-align: center;
+    font-size: 1.2em;
+}
+
+.formField label {
+    font-size: 1.08em;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.formField input {
+    width: 100%;
+    display: block;
+    border: none;
+    outline: none;
+    border: 1px solid rgba(0,0,0,.12);
+    padding: 10px 6px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin: 5px auto;
+}
+
+.footer {
+    margin: 20px auto 10px;
+    text-align: center;
+}
+
+.footer span {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.footer a {
+    color: #2c69b6;
+    cursor: pointer;
+}
+
+.socialConnections {
+    margin-bottom: 20px;
+}
+
+.signInButton {
+    margin-top: 10px;
 }

client/coral-sign-in/containers/SignInContainer.js

@@ -1,15 +1,15 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
-import SignIn from '../components/SignIn';
-import SignInDialog from '../components/SignInDialog';
+import SignDialog from '../components/SignDialog';
 import Button from '../components/Button';
 
 import {
   loginFacebookCallback,
   loginFacebook,
   logout,
-  showSignInDialog
+  showSignInDialog,
+  goTo,
 } from '../../coral-framework/actions/auth';
 
 class SignInContainer extends Component {
@@ -19,6 +19,7 @@ class SignInContainer extends Component {
     this.openFacebookWindow = this.openFacebookWindow.bind(this);
     this.openSignInDialog = this.openSignInDialog.bind(this);
     this.logout = this.logout.bind(this);
+    this.goTo = this.goTo.bind(this);
   }
 
   componentDidMount() {
@@ -37,6 +38,10 @@ class SignInContainer extends Component {
     this.props.dispatch(showSignInDialog());
   }
 
+  goTo(step = 1) {
+    this.props.dispatch(goTo(step));
+  }
+
   render() {
     const {auth} = this.props;
     return (
@@ -44,9 +49,11 @@ class SignInContainer extends Component {
         <Button onClick={this.openSignInDialog}>
           Sign in to comment
         </Button>
-        <SignInDialog
+        <SignDialog
           openFacebookWindow={this.openFacebookWindow}
           open={auth.get('showSignInDialog')}
+          step={auth.get('step')}
+          goTo={this.goTo}
         />
       </div>
     );

client/coral-sign-in/translations.js

@@ -1,14 +1,38 @@
 export default {
   en: {
     'signIn': {
-      facebookLogin: 'Continue with Facebook',
-      logout: 'Logout'
+      facebookSignIn: 'Sign in with Facebook',
+      facebookSignUp: 'Sign up with Facebook',
+      logout: 'Logout',
+      signIn: 'Sign In',
+      or: 'Or',
+      email: 'E-mail Address',
+      password: 'Password',
+      forgotYourPass: 'Forgot your password?',
+      needAnAccount: 'Need an account?',
+      register: 'Register',
+      signUp: 'Sign Up',
+      confirmPassword: 'Confirm Password',
+      username: 'Username',
+      alreadyHaveAnAccount: 'Already have an account?'
     }
   },
   es: {
     'signIn': {
-      facebookLogin: 'Continuar con Facebook',
-      logout: 'Salir'
+      facebookSignIn: 'Entrar con Facebook',
+      facebookSignUp: 'Regístrate con Facebook',
+      logout: 'Salir',
+      signIn: 'Entrar',
+      or: 'o',
+      email: 'E-mail',
+      password: 'Contraseña',
+      forgotYourPass: 'Has olvidado tu contraseña?',
+      needAnAccount: 'Necesitas una cuenta?',
+      register: 'Regístrate',
+      signUp: 'Registro',
+      confirmPassword: 'Confirmar Contraseña',
+      username: 'Usuario',
+      alreadyHaveAnAccount: 'Ya tienes una cuenta?'
     }
   }
 };

client/coral-ui/components/Dialog.js

@@ -47,7 +47,7 @@ export default class Dialog extends Component {
   }
 
   render() {
-    const { children, className = '', onClose, onCancel, open, ...rest } = this.props;
+    const {children, className = '', onClose, onCancel, open, ...rest} = this.props; // eslint-disable-line
 
     return (
       <dialog
@@ -57,6 +57,6 @@ export default class Dialog extends Component {
       >
           {children}
       </dialog>
-    )
+    );
   }
-}
+}

client/coral-ui/index.js

@@ -1 +1 @@
-export { default as Dialog } from './components/Dialog';
+export {default as Dialog} from './components/Dialog';