SignIn Dialog

client/coral-framework/actions/auth.js

@@ -1,6 +1,14 @@
 import * as actions from '../constants/auth';
 import {base, handleResp, getInit} from '../helpers';
 
+export const showSignInDialog = () => ({
+  type: actions.SHOW_SIGNIN_DIALOG
+});
+
+export const hideSignInDialog = ()  => ({
+  type: actions.HIDE_SIGNIN_DIALOG
+});
+
 export const loginFacebook = () => dispatch => {
   dispatch(loginFacebookRequest());
   window.open(

client/coral-framework/constants/auth.js

@@ -7,3 +7,5 @@ export const USER_FACEBOOK_FAILURE = 'USER_FACEBOOK_FAILURE';
 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';

client/coral-framework/reducers/auth.js

@@ -1,21 +1,26 @@
 import {Map} from 'immutable';
-//
-//import {
-//  FETCH_COMMENTERS_REQUEST,
-//  FETCH_COMMENTERS_FAILURE,
-//  FETCH_COMMENTERS_SUCCESS,
-//  SORT_UPDATE
-//} from '../constants/community';
-//
+
+import {
+  SHOW_SIGNIN_DIALOG,
+  HIDE_SIGNIN_DIALOG
+} from '../constants/auth';
+
 const initialState = Map({
   auth: Map(),
   loggedIn: false,
   error: '',
-  user: {}
+  user: {},
+  showSignInDialog: false
 });
 
 export default function community (state = initialState, action) {
   switch (action.type) {
+  case SHOW_SIGNIN_DIALOG :
+    return state
+      .set('showSignInDialog', true)
+  case HIDE_SIGNIN_DIALOG :
+    return state
+      .set('showSignInDialog', false)
   default :
     return state;
   }

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

@@ -1,18 +1,11 @@
 import React from 'react';
-import Button from './Button';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
 
-const lang = new I18n(translations);
-
-const SignIn = ({openFacebookWindow, logout}) => (
+const SignIn = ({openSignInDialog, children}) => (
   <div>
-    <Button type="facebook" onClick={openFacebookWindow}>
-      {lang.t('signIn.facebookLogin')}
+    <Button onClick={openSignInDialog}>
+      Sign in to comment
     </Button>
-    <a onClick={logout}>
-      {lang.t('signIn.logout')}
-    </a>
+    {children}
   </div>
 );
 

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

@@ -0,0 +1,37 @@
+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/styles.css

@@ -40,4 +40,9 @@
 .facebook:hover {
     background-color: #365899;
     border-color: #365899;
+}
+
+.dialog {
+    width: 400px;
+    border: none;
 }

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

@@ -2,11 +2,14 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
 import SignIn from '../components/SignIn';
+import SignInDialog from '../components/SignInDialog';
+import Button from '../components/Button';
 
 import {
   loginFacebookCallback,
   loginFacebook,
-  logout
+  logout,
+  showSignInDialog
 } from '../../coral-framework/actions/auth';
 
 class SignInContainer extends Component {
@@ -14,6 +17,7 @@ class SignInContainer extends Component {
     super(props);
 
     this.openFacebookWindow = this.openFacebookWindow.bind(this);
+    this.openSignInDialog = this.openSignInDialog.bind(this);
     this.logout = this.logout.bind(this);
   }
 
@@ -29,8 +33,23 @@ class SignInContainer extends Component {
     this.props.dispatch(logout());
   }
 
+  openSignInDialog() {
+    this.props.dispatch(showSignInDialog());
+  }
+
   render() {
-    return <SignIn {...this} />;
+    const {auth} = this.props;
+    return (
+      <div>
+        <Button onClick={this.openSignInDialog}>
+          Sign in to comment
+        </Button>
+        <SignInDialog
+          openFacebookWindow={this.openFacebookWindow}
+          open={auth.get('showSignInDialog')}
+        />
+      </div>
+    );
   }
 }
 

client/coral-ui/components/Dialog.js

@@ -0,0 +1,62 @@
+import React, {Component, PropTypes} from 'react';
+import ReactDOM from 'react-dom';
+import dialogPolyfill from 'dialog-polyfill';
+import 'dialog-polyfill/dialog-polyfill.css';
+
+export default class Dialog extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string,
+    onCancel: PropTypes.func,
+    onClose: PropTypes.func,
+    open: PropTypes.bool,
+    style: PropTypes.object
+  };
+
+  static defaultProps = {
+    onCancel: e => e.preventDefault(),
+    onClose: e => e.preventDefault()
+  };
+
+  componentDidMount(){
+    const dialog = ReactDOM.findDOMNode(this.refs.dialog);
+    dialogPolyfill.registerDialog(dialog);
+
+    if (this.props.open) {
+      dialog.showModal();
+    }
+
+    dialog.addEventListener('close', this.props.onClose);
+    dialog.addEventListener('cancel', this.props.onCancel);
+  }
+
+  componentDidUpdate(prevProps) {
+    const dialog = ReactDOM.findDOMNode(this.refs.dialog);
+    if (this.props.open !== prevProps.open) {
+      if (this.props.open) {
+        dialog.showModal();
+      } else {
+        dialog.close();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    const dialog = ReactDOM.findDOMNode(this.refs.dialog);
+    dialog.removeEventListener('cancel', this.props.onCancel);
+  }
+
+  render() {
+    const { children, className = '', onClose, onCancel, open, ...rest } = this.props;
+
+    return (
+      <dialog
+        ref="dialog"
+        className={`mdl-dialog ${className}`}
+        {...rest}
+      >
+          {children}
+      </dialog>
+    )
+  }
+}

client/coral-ui/index.js

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

package.json

@@ -16,8 +16,13 @@
   "config": {
     "pre-git": {
       "commit-msg": [],
-      "pre-commit": ["npm run lint", "npm test"],
-      "pre-push": ["npm test"],
+      "pre-commit": [
+        "npm run lint",
+        "npm test"
+      ],
+      "pre-push": [
+        "npm test"
+      ],
       "post-commit": [],
       "post-merge": []
     }
@@ -26,7 +31,12 @@
     "type": "git",
     "url": "git+https://github.com/coralproject/talk.git"
   },
-  "keywords": ["talk", "coral", "coralproject", "ask"],
+  "keywords": [
+    "talk",
+    "coral",
+    "coralproject",
+    "ask"
+  ],
   "author": "",
   "license": "Apache-2.0",
   "bugs": {
@@ -72,6 +82,7 @@
     "chai-http": "^3.0.0",
     "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.25.0",
+    "dialog-polyfill": "^0.4.4",
     "eslint": "^3.9.1",
     "eslint-config-postcss": "^2.0.2",
     "eslint-config-standard": "^6.2.1",