move FormField to coral-ui

client/coral-embed-stream/src/Embed.js

@@ -5,7 +5,7 @@ import {isEqual} from 'lodash';
 
 import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
 
-const {logout, showSignInDialog} = authActions;
+const {logout, showSignInDialog, requestConfirmEmail} = authActions;
 const {addNotification, clearNotification} = notificationActions;
 const {fetchAssetSuccess} = assetActions;
 
@@ -188,6 +188,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
+  requestConfirmEmail: () => dispatch(requestConfirmEmail()),
   loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)),
   addNotification: (type, text) => dispatch(addNotification(type, text)),
   clearNotification: () => dispatch(clearNotification()),

client/coral-framework/actions/auth.js

@@ -137,3 +137,8 @@ export const checkLogin = () => dispatch => {
     })
     .catch(error => dispatch(checkLoginFailure(error)));
 };
+
+export const requestConfirmEmail = () => dispatch => {
+
+};
+

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

@@ -1,8 +1,6 @@
 import React from 'react';
-import Button from 'coral-ui/components/Button';
-import FormField from './FormField';
 import Alert from './Alert';
-import Spinner from 'coral-ui/components/Spinner';
+import {Button, FormField, Spinner} from 'coral-ui';
 import styles from './styles.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import FormField from './FormField';
+// import FormField from './FormField';
 import Alert from './Alert';
-import Button from 'coral-ui/components/Button';
-import Spinner from 'coral-ui/components/Spinner';
-import Success from 'coral-ui/components/Success';
+import {Button, FormField, Spinner, Success} from 'coral-ui';
 import styles from './styles.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';

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

@@ -14,28 +14,6 @@
     font-size: 1.2em;
 }
 
-.formField {
-    margin-top: 15px;
-}
-
-.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;
@@ -150,3 +128,15 @@ input.error{
     background-color: 1px solid coral;
     padding: 10px;
 }
+
+.emailConfirmDialog {
+    margin-top: 15px;
+}
+
+.confirmLabel {
+    display: block;
+}
+
+.confirmSubmit {
+
+}

client/coral-sign-in/translations.js

@@ -1,6 +1,8 @@
 export default {
   en: {
     'signIn': {
+      emailConfirmCTA: 'Please verify your email address. We sent an email to {0} for verification.',
+      requestNewConfirmEmail: 'Request another email',
       notYou: 'Not you?',
       loggedInAs: 'Logged in as',
       facebookSignIn: 'Sign in with Facebook',
@@ -28,6 +30,8 @@ export default {
   },
   es: {
     'signIn': {
+      emailConfirmCTA: 'Por favor verifique su correo electronico. Le enviamos un correo a {0} para verificar.',
+      requestNewConfirmEmail: 'Enviar otro correo',
       notYou: 'No eres tu?',
       loggedInAs: 'Entraste como',
       facebookSignIn: 'Entrar con Facebook',

client/coral-ui/components/FormField.css

@@ -0,0 +1,48 @@
+.formField {
+    margin-top: 15px;
+}
+
+.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;
+}
+
+input.error{
+    border: solid 2px #f44336;
+}
+
+.errorMsg, .hint {
+    color: grey;
+    font-weight: 600;
+    padding: 3px 0 16px;
+}
+
+.attention {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    background: #B71C1C;
+    color: #FFEBEE;
+    font-weight: bolder;
+    padding: 4px;
+    vertical-align: middle;
+    border-radius: 20px;
+    box-sizing: border-box;
+    font-size: 9px;
+    line-height: 7px;
+    text-align: center;
+    margin-right: 5px;
+}

client/coral-ui/components/FormField.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import styles from './styles.css';
+import React, {PropTypes} from 'react';
+import styles from './FormField.css';
 
 const FormField = ({className, showErrors = false, errorMsg, label, ...props}) => (
   <div className={`${styles.formField} ${className ? className : ''}`}>
@@ -15,4 +15,12 @@ const FormField = ({className, showErrors = false, errorMsg, label, ...props}) =
   </div>
 );
 
+FormField.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  errorMsg: PropTypes.string,
+  type: PropTypes.string
+};
+
 export default FormField;

client/coral-ui/index.js

@@ -13,4 +13,6 @@ export {default as Icon} from './components/Icon';
 export {default as List} from './components/List';
 export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
+export {default as FormField} from './components/FormField';
+export {default as Success} from './components/Success';
 export {default as Pager} from './components/Pager';

routes/api/users/index.js

@@ -6,6 +6,7 @@ const CommentsService = require('../../../services/comments');
 const mailer = require('../../../services/mailer');
 const authorization = require('../../../middleware/authorization');
 
+// get a list of users.
 router.get('/', authorization.needed('ADMIN'), (req, res, next) => {
   const {
     value = '',
@@ -44,6 +45,7 @@ router.post('/:user_id/role', authorization.needed('ADMIN'), (req, res, next) =>
     .catch(next);
 });
 
+// update the status of a user
 router.post('/:user_id/status', authorization.needed('ADMIN'), (req, res, next) => {
   UsersService
     .setStatus(req.params.user_id, req.body.status)
@@ -85,10 +87,12 @@ const SendEmailConfirmation = (app, userID, email, referer) => UsersService
     });
   });
 
+// create a local user.
 router.post('/', (req, res, next) => {
   const {
     email,
     password,
+    redirectUri,
     displayName
   } = req.body;
 
@@ -103,7 +107,7 @@ router.post('/', (req, res, next) => {
 
         if (requireEmailConfirmation) {
 
-          SendEmailConfirmation(req.app, user.id, email, req.header('Referer'))
+          SendEmailConfirmation(req.app, user.id, email, redirectUri)
             .then(() => {
 
               // Then send back the user.