Improved frontend file/folder structure.

backend/index.js

@@ -205,6 +205,20 @@ async.waterfall([
 			const app = express();
 			app.listen(config.get("frontendPort"));
 			const rootDir = __dirname.substr(0, __dirname.lastIndexOf("backend")) + "frontend/dist/";
+			const rootDirAssets = __dirname.substr(0, __dirname.lastIndexOf("backend")) + "frontend/app/";
+
+			app.get("/assets/*", (req, res) => {
+				const path = req.path;
+				console.log(rootDirAssets, path, rootDirAssets + path);
+				fs.access(rootDirAssets + path, function(err) {
+					console.log("Error: ", !!err);
+					if (!err) {
+						res.sendFile(rootDirAssets + path);
+					} else {
+						res.redirect("/");
+					}
+				});
+			});
 
 			app.get("/*", (req, res) => {
 				const path = req.path;

frontend/Dockerfile

@@ -1,18 +0,0 @@
-FROM node
-
-RUN apt-get update
-RUN apt-get install nginx -y
-
-RUN npm install -g webpack@2.2.1
-
-RUN mkdir -p /opt
-WORKDIR /opt
-ADD package.json /opt/package.json
-
-RUN npm install
-
-RUN mkdir -p /run/nginx
-
-EXPOSE 80
-
-CMD nginx -c /opt/app/nginx.conf; cd /opt/app; npm run dev

frontend/app/assets/browserconfig.xml

@@ -2,10 +2,10 @@
 <browserconfig>
   <msapplication>
     <tile>
-      <square70x70logo src="/mstile-70x70.png?v=06042016"/>
-      <square150x150logo src="/mstile-150x150.png?v=06042016"/>
-      <square310x310logo src="/mstile-310x310.png?v=06042016"/>
-      <wide310x150logo src="/mstile-310x150.png?v=06042016"/>
+      <square70x70logo src="/assets/images/mstile-70x70.png?v=06042016"/>
+      <square150x150logo src="/assets/images/mstile-150x150.png?v=06042016"/>
+      <square310x310logo src="/assets/images/mstile-310x310.png?v=06042016"/>
+      <wide310x150logo src="/assets/images/mstile-310x150.png?v=06042016"/>
       <TileColor>#2d89ef</TileColor>
     </tile>
   </msapplication>

frontend/app/assets/manifest.json

@@ -2,37 +2,37 @@
 	"name": "Musare",
 	"icons": [
 		{
-			"src": "\/android-chrome-36x36.png?v=06042016",
+			"src": "\/assets\/images\/android-chrome-36x36.png?v=06042016",
 			"sizes": "36x36",
 			"type": "image\/png",
 			"density": 0.75
 		},
 		{
-			"src": "\/android-chrome-48x48.png?v=06042016",
+			"src": "\/assets\/images\/android-chrome-48x48.png?v=06042016",
 			"sizes": "48x48",
 			"type": "image\/png",
 			"density": 1
 		},
 		{
-			"src": "\/android-chrome-72x72.png?v=06042016",
+			"src": "\/assets\/images\/android-chrome-72x72.png?v=06042016",
 			"sizes": "72x72",
 			"type": "image\/png",
 			"density": 1.5
 		},
 		{
-			"src": "\/android-chrome-96x96.png?v=06042016",
+			"src": "\/assets\/images\/android-chrome-96x96.png?v=06042016",
 			"sizes": "96x96",
 			"type": "image\/png",
 			"density": 2
 		},
 		{
-			"src": "\/android-chrome-144x144.png?v=06042016",
+			"src": "\/assets\/images\/android-chrome-144x144.png?v=06042016",
 			"sizes": "144x144",
 			"type": "image\/png",
 			"density": 3
 		},
 		{
-			"src": "\/android-chrome-192x192.png?v=06042016",
+			"src": "\/assets\/images\/android-chrome-192x192.png?v=06042016",
 			"sizes": "192x192",
 			"type": "image\/png",
 			"density": 4

frontend/app/js/views/App/index.jsx → frontend/app/js/app.jsx

@@ -3,12 +3,12 @@ import { Route, Switch, withRouter } from "react-router-dom";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import { ban, authenticate } from "actions/app";
-import Menu from "components/Global/Menu";
+import { ban, authenticate } from "actions/auth";
+import Navbar from "components/Global/Navbar";
 
 import config from "config";
-import io from "../../io";
-import AuthRoute from "../Auth/AuthRoute";
+import AuthRoute from "components/AuthRoute";
+import io from "./io";
 
 const asyncComponent = getComponent => {
 	return class AsyncComponent extends React.Component {
@@ -68,7 +68,7 @@ class App extends Component { // eslint-disable-line react/no-multi-comp
 	render() {
 		return (
 			<div>
-				<Menu />
+				<Navbar />
 				<Switch>
 					<AuthRoute
 						exact
@@ -106,7 +106,7 @@ class App extends Component { // eslint-disable-line react/no-multi-comp
 						exact
 						path="/settings/setpassword"
 						component={ asyncComponent(() =>
-							System.import("views/Auth/SetPassword").then(module => module.default)
+							System.import("views/Auth/Settings/SetPassword").then(module => module.default)
 						) }
 						authRequired={ true }
 					/>
@@ -128,7 +128,7 @@ class App extends Component { // eslint-disable-line react/no-multi-comp
 					<Route
 						path="*"
 						component={ asyncComponent(() =>
-							System.import("views/NotFound").then(module => module.default)
+							System.import("views/Errors/Error404").then(module => module.default)
 						) }
 					/>
 				</Switch>

frontend/app/js/index.js

@@ -8,7 +8,7 @@ import "babel-polyfill";
 
 import rootReducer from "reducers";
 
-import App from "views/App";
+import App from "./app";
 
 import "../styles/main.scss";
 

frontend/app/js/reducers/user.js

@@ -3,7 +3,7 @@ import { Map } from "immutable";
 import {
 	BAN,
 	AUTHENTICATE,
-} from "actions/app";
+} from "actions/auth";
 
 const initialState = Map({
 	loggedIn: false,

frontend/app/js/views/Auth/ForgotPassword.jsx → frontend/app/js/views/Auth/ForgotPassword/index.jsx

@@ -2,10 +2,10 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import CustomInput from "./CustomInput.jsx";
-import CustomErrors from "./CustomErrors.jsx";
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomErrors.jsx";
 
-import io from "../../io";
+import io from "io";
 
 @connect(state => ({
 	user: {

frontend/app/js/views/Auth/Login.jsx → frontend/app/js/views/Auth/Login/index.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 
-import CustomInput from "./CustomInput.jsx";
-import CustomErrors from "./CustomErrors.jsx";
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomErrors.jsx";
 
-import io from "../../io";
+import io from "io";
 import config from "config";
 
 export default class Login extends Component {

frontend/app/js/views/Auth/Logout.jsx → frontend/app/js/views/Auth/Logout/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import io from "../../io";
+import io from "io";
 
 export default class Login extends Component {
 	constructor() {

frontend/app/js/views/Auth/Register.jsx → frontend/app/js/views/Auth/Register/index.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 
-import CustomInput from "./CustomInput.jsx";
-import CustomErrors from "./CustomErrors.jsx";
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomErrors.jsx";
 
-import io from "../../io";
+import io from "io";
 import config from "config";
 
 export default class Register extends Component {

frontend/app/js/views/Auth/SetPassword.jsx → frontend/app/js/views/Auth/Settings/SetPassword/index.jsx

@@ -2,10 +2,10 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import CustomInput from "./CustomInput.jsx";
-import CustomErrors from "./CustomErrors.jsx";
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomErrors.jsx";
 
-import io from "../../io";
+import io from "io";
 
 @connect(state => ({
 	user: {

frontend/app/js/views/Auth/Settings.jsx → frontend/app/js/views/Auth/Settings/index.jsx

@@ -6,10 +6,10 @@ import { NavLink } from "react-router-dom";
 
 import config from "config";
 
-import CustomInput from "./CustomInput.jsx";
-import CustomErrors from "./CustomErrors.jsx";
+import CustomInput from "components/CustomInput.jsx";
+import CustomErrors from "components/CustomErrors.jsx";
 
-import io from "../../io";
+import io from "io";
 
 @connect(state => ({
 	user: {

frontend/app/js/views/NotFound/index.jsx → frontend/app/js/views/Errors/Error404.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-export default class NotFound extends Component {
+export default class Error404 extends Component {
 	render() {
 		return (
 			<div>

frontend/app/styles/main.scss

@@ -1,3 +1,2 @@
-@import "vendor/musare-theme/main.scss"; // Import Musare Theme
+// @import "musare-theme";
 
-@import "station/main.scss"; // Import station styles

frontend/app/styles/vendor/musare-theme/main.scss

@@ -1,7 +0,0 @@
-@import "navigation.scss";
-@import "grid.scss";
-
-
-body {
-    background-color: rgb(245, 245, 245);
-}

frontend/nginx.conf

@@ -1,25 +0,0 @@
-worker_processes  1;
-
-events {
-    worker_connections  1024;
-}
-
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-
-    sendfile        off;
-
-    keepalive_timeout  65;
-
-    server {
-        listen       80;
-        server_name  localhost;
-
-        location / {
-            try_files $uri $uri/ /index.html;
-            root   /opt/app/dist;
-            index  index.html;
-        }
-    }
-}