Merge pull request #8 from Rantahu/master

Finished #2 and #3

src/scss/main.scss → src/assets/scss/main.scss

@@ -25,6 +25,8 @@
 @import "pages/boards.scss";
 @import "pages/radio.scss";
 @import "pages/profile.scss";
+@import "pages/auth.scss";
+@import "pages/about.scss";
 
 #content,
 #root,
@@ -92,7 +94,7 @@ a:visited {
   min-height: 100%;
   height: 100%;
   text-align: center;
-  padding: 80px 50px;
+  padding: 0;
 }
 
 // canvas {

src/assets/scss/pages/_about.scss

@@ -0,0 +1,10 @@
+.about-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  justify-content: center;
+  align-items: center;
+  background-image: url('../img/vapor.gif');
+  background-size: cover;
+}

src/assets/scss/pages/_auth.scss

@@ -0,0 +1,8 @@
+.auth-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  justify-content: center;
+  align-items: center;
+}

src/components/LoginForm/LoginForm.js

@@ -38,7 +38,7 @@ export default class LoginForm extends Component {
 
     return (
       <form className="form-horizontal" onSubmit={handleSubmit}>
-        <Field name="email" type="text" component={Input} label="Email" />
+        <Field name="username" type="text" component={Input} label="Username" />
         <Field name="password" type="password" component={Input} label="Password" />
         {error && (
           <p className="text-danger">

src/components/RegisterForm/RegisterForm.js

@@ -38,6 +38,7 @@ export default class RegisterForm extends Component {
 
     return (
       <form className="form-horizontal" onSubmit={handleSubmit}>
+        <Field name="username" type="text" component={Input} label="Username" />
         <Field name="email" type="text" component={Input} label="Email" />
         <Field name="password" type="password" component={Input} label="Password" />
         <Field name="password_confirmation" type="password" component={Input} label="Password confirmation" />

src/components/RegisterForm/registerValidation.js

@@ -1,7 +1,8 @@
 import memoize from 'lru-memoize';
-import { createValidator, required, email, match } from 'utils/validation';
+import { createValidator, required, email, username, match } from 'utils/validation';
 
 const registerValidation = createValidator({
+  username: [required, username],
   email: [required, email],
   password: required,
   password_confirmation: [required, match('password')]

src/components/profilebutton/profile-button.jsx

@@ -1,37 +1,45 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
+@connect(state => ({
+  user: state.auth.user
+}))
 class ProfileButton extends Component {
   static propTypes = {
-    user: PropTypes.arrayOf(PropTypes.object).isRequired,
+    user: PropTypes.arrayOf(PropTypes.object),
   };
 
   render() {
+    if (this.props.user != null) {
+      return (
+        <div id="profile-button">
+          <div id="user-profile-status">
+            <p>{this.props.user.username}</p>
+            <p>{this.props.user.rep}</p>
+          </div>
+          <div id="user-profile-avatar">
+            <img
+              className="profile-image"
+              src={this.props.user.avatarUrl}
+              alt={this.props.user.username}
+            />
+          </div>
+          <div className="u-cf" />
+        </div>
+      );
+    }
     return (
       <div id="profile-button">
-        <div id="user-profile-status">
-          <p>{this.props.user.username}</p>
-          <p>{this.props.user.rep}</p>
-        </div>
-        <div id="user-profile-avatar">
-          <img
-            className="profile-image"
-            src={this.props.user.avatarUrl}
-            alt={this.props.user.username}
-          />
-        </div>
+        <Link to="login">login</Link>
+        <br />
+        <Link to="register">sign up</Link>
         <div className="u-cf" />
       </div>
     );
   }
 }
 
 
-function mapStateToProps(state) {
-  return {
-    user: state.activeUser
-  };
-}
-
-export default connect(mapStateToProps)(ProfileButton);
+export default ProfileButton;

src/containers/Login/Login.js

@@ -2,16 +2,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
+
 import LoginForm from 'components/LoginForm/LoginForm';
-import FacebookLogin from 'components/FacebookLogin/FacebookLogin';
 import * as authActions from 'redux/modules/auth';
 import * as notifActions from 'redux/modules/notifs';
 
-@connect(state => ({ user: state.auth.user }), { ...notifActions, ...authActions })
+@connect(
+  state => ({ user: state.auth.user }),
+  { ...notifActions, ...authActions }
+)
 export default class Login extends Component {
   static propTypes = {
     user: PropTypes.shape({
-      email: PropTypes.string
+      username: PropTypes.string
     }),
     login: PropTypes.func.isRequired,
     logout: PropTypes.func.isRequired,
@@ -26,24 +29,6 @@ export default class Login extends Component {
     router: PropTypes.object
   };
 
-  onFacebookLogin = async (err, data) => {
-    if (err) return;
-
-    try {
-      await this.props.login('facebook', data);
-      this.successLogin();
-    } catch (error) {
-      if (error.message === 'Incomplete oauth registration') {
-        this.context.router.push({
-          pathname: '/register',
-          state: { oauth: error.data }
-        });
-      } else {
-        throw error;
-      }
-    }
-  };
-
   login = async data => {
     const result = await this.props.login('local', data);
     this.successLogin();
@@ -58,34 +43,20 @@ export default class Login extends Component {
     });
   };
 
-  FacebookLoginButton = ({ facebookLogin }) => (
-    <button className="btn btn-primary" onClick={facebookLogin}>
-      Login with <i className="fa fa-facebook-f" />
-    </button>
-  );
-
   render() {
     const { user, logout } = this.props;
     return (
-      <div className="container">
-        <Helmet title="Login" />
+      <div className="auth-container">
+        <Helmet title="login" />
         <h1>Login</h1>
         {!user && (
           <div>
             <LoginForm onSubmit={this.login} />
-            <p>This will "log you in" as this user, storing the username in the session of the API server.</p>
-            <FacebookLogin
-              appId="635147529978862"
-              /* autoLoad={true} */
-              fields="name,email,picture"
-              onLogin={this.onFacebookLogin}
-              component={this.FacebookLoginButton}
-            />
           </div>
         )}
         {user && (
           <div>
-            <p>You are currently logged in as {user.email}.</p>
+            <p>You are currently logged in as {user.username}.</p>
 
             <div>
               <button className="btn btn-danger" onClick={logout}>

src/containers/Register/Register.js

@@ -6,7 +6,10 @@ import RegisterForm from 'components/RegisterForm/RegisterForm';
 import * as authActions from 'redux/modules/auth';
 import * as notifActions from 'redux/modules/notifs';
 
-@connect(() => ({}), { ...notifActions, ...authActions })
+@connect(
+  () => ({}),
+  { ...notifActions, ...authActions }
+)
 export default class Register extends Component {
   static propTypes = {
     location: PropTypes.shape({
@@ -37,8 +40,8 @@ export default class Register extends Component {
 
   render() {
     return (
-      <div className="container">
-        <Helmet title="Register" />
+      <div className="auth-container">
+        <Helmet title="register" />
         <h1>Register</h1>
         <RegisterForm onSubmit={this.register} initialValues={this.getInitialValues()} />
       </div>

src/containers/about/about.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Helmet from 'react-helmet';
+
+/**
+ * About Page
+ * Display a the cozy logo.
+ *
+ * ToDo: Add pause/mute button
+ */
+class About extends Component {
+  render() {
+    let cube = require('assets/img/cube.svg');
+    let musicmp3 = require('assets/audio/lake-zurich.mp3');
+    let musicogg = require('assets/audio/lake-zurich.ogg');
+
+    return (
+      <div className="about-container">
+        <Helmet title="about" />
+        <img src={cube}  alt="cube" />
+          <audio autoPlay>
+            <source src={musicogg} type="audio/ogg" />
+            <source src={musicmp3} type="audio/mpeg" />
+          </audio>
+      </div>
+    );
+  }
+}
+
+export default About;

src/containers/App/App.js → src/containers/app/app.jsx

@@ -8,7 +8,6 @@ import { provideHooks } from 'redial';
 import Helmet from 'react-helmet';
 import { isLoaded as isInfoLoaded, load as loadInfo } from 'redux/modules/info';
 import { isLoaded as isAuthLoaded, load as loadAuth, logout } from 'redux/modules/auth';
-import { Notifs } from 'components';
 import config from 'config';
 import NavBar from 'components/navbar/navbar';
 
@@ -24,7 +23,6 @@ import NavBar from 'components/navbar/navbar';
 })
 @connect(
   state => ({
-    notifs: state.notifs,
     user: state.auth.user
   }),
   { logout, pushState: push }
@@ -35,11 +33,8 @@ export default class App extends Component {
     route: PropTypes.objectOf(PropTypes.any).isRequired,
     location: PropTypes.objectOf(PropTypes.any).isRequired,
     user: PropTypes.shape({
-      email: PropTypes.string
+      username: PropTypes.string
     }),
-    notifs: PropTypes.shape({
-      global: PropTypes.array
-    }).isRequired,
     logout: PropTypes.func.isRequired,
     pushState: PropTypes.func.isRequired
   };
@@ -75,26 +70,14 @@ export default class App extends Component {
   };
 
   render() {
-    const { notifs, route } = this.props;
-    const styles = require('scss/main.scss');
+    const { route } = this.props;
+    const styles = require('assets/scss/main.scss');
 
     return (
-      <div className={styles.app}>
+      <div id="container">
         <Helmet {...config.app.head} />
         <NavBar />
-        <div className={styles.appContent}>
-          {notifs.global && (
-            <div className="container">
-              <Notifs
-                className={styles.notifs}
-                namespace="global"
-                NotifComponent={props => <div>{props.message}</div>}
-              />
-            </div>
-          )}
-
-          {renderRoutes(route.routes)}
-        </div>
+        {renderRoutes(route.routes)}
       </div>
     );
   }

src/containers/index.js

@@ -1,2 +1,2 @@
-export App from './App/App';
+export App from './app/app';
 export NotFound from './NotFound/NotFound';

src/containers/radio/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import ChannelList from '../../components/radio/channel-list';
+import ChannelList from 'components/radio/channel-list';
 
 /**
  * Radio Home Page

src/redux/reducer.js

@@ -1,10 +1,6 @@
 import multireducer from 'multireducer';
 import { routerReducer } from 'react-router-redux';
 
-// Auth/User Reducers
-import activeUserReducer from './user/active-user';
-import usersReducer from './user/user-list';
-
 // Boards Reducers
 import BoardReducer from './boards/board-list';
 import ActiveBoard from './boards/active-board';
@@ -29,10 +25,6 @@ export default function createReducers(asyncReducers) {
     items: ItemReducer,
     cart: cartReducer,
 
-    // Users/auth
-    activeUser: activeUserReducer,
-    users: usersReducer,
-
     // Radio
     channels: ChannelsReducer,
 
@@ -41,7 +33,6 @@ export default function createReducers(asyncReducers) {
     activeBoard: ActiveBoard,
     activeThread: ActiveThread,
 
-
     router: routerReducer,
     online: (v = true) => v,
     notifs,

src/routes.js

@@ -1,7 +1,7 @@
 import { routerActions } from 'react-router-redux';
 import { connectedReduxRedirect } from 'redux-auth-wrapper/history4/redirect';
 import { App, NotFound } from 'containers';
-import About from 'containers/About/Loadable';
+import About from 'containers/about/about';
 import Chat from 'containers/Chat/Loadable';
 import ChatFeathers from 'containers/ChatFeathers/Loadable';
 import Login from 'containers/Login/Loadable';
@@ -28,7 +28,6 @@ import Thread from './containers/boards/thread';
 // Discovery
 import DiscoveryHome from './containers/discovery/index';
 
-
 const isAuthenticated = connectedReduxRedirect({
   redirectPath: '/login',
   authenticatedSelector: state => state.auth.user !== null,

src/utils/validation.js

@@ -8,6 +8,13 @@ export function email(value) {
   }
 }
 
+export function username(value) {
+  // Not finished
+  if (!isEmpty(value)) {
+    return 'Invalid Username';
+  }
+}
+
 export function required(value) {
   if (isEmpty(value)) {
     return 'Required';

webpack/dev.config.js

@@ -94,7 +94,10 @@ var webpackConfig = module.exports = {
       }, {
         test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'file-loader'
-      }, {
+      },{
+        test: /\.(ogg|mp3|wav|mpe?g)$/i,
+        loader: 'file-loader'
+      },{
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'url-loader',
         options: {