Witchcraft error catching

src/frontend/src/App.tsx

@@ -2,14 +2,24 @@ import * as React from "react";
 import { Router, Route, IndexRoute, hashHistory } from "react-router";
 import Layout from "./Layout";
 import Project from "./views/Project";
+import SignIn from "./views/SignIn";
 import Home from "./views/Home";
+import {map, actionsInterface} from "./actions";
 
+export interface AppProps { title: string; }
+export interface AppState { open?: boolean; title?: string; }
 
-export default () => (
-  <Router history={hashHistory} >
-    <Route path="/" component={Layout}>
-      <IndexRoute component={Home} />
-      <Route path="project/:id" component={Project} />
-    </Route>
-  </Router>
-);
+class App extends React.Component<AppProps&actionsInterface, AppState> {
+  render() {
+    const projects = this.props.appState.projects;
+    return this.props.user.questid == null ? <SignIn/> : (
+    <Router history={hashHistory} >
+      <Route path="/" component={Layout}>
+        <IndexRoute component={Home} />
+        <Route path="project/:id" component={Project} />
+      </Route>
+    </Router>);
+  }
+}
+
+export default map(App);

src/frontend/src/actions/index.ts

@@ -3,8 +3,11 @@ import { ComponentClass } from "react";
 import { globalState } from "../reducers/";
 import {projectRef, fileRef} from "../types";
 import {appStateActions} from "../reducers/appStateReducer";
+import {userActions} from "../reducers/userReducer";
+import { Services, GenericError, LoginError } from "../helpers/Services";
+import { showError } from "../partials/Errors";
+import { trim } from "ramda";
 import {settingsActions, settingsReducerState} from "../reducers/settingsReducer";
-import {Services} from "../helpers/Services";
 import {File} from "../helpers/Storage/Interface";
 
 
@@ -19,6 +22,20 @@ function returnType<T>(func: Func<T>) {
 const mapStoreToProps = (state: globalState) => state;
 
 const mapDispatchToProps = (dispatch: Function) => {
+
+    async function asyncAction<T>(pr: Promise<T>) {
+        try {
+            return await pr;
+        }catch (e) {
+            if (e instanceof LoginError) {
+                showError(e.message);
+                dispatch({type: userActions.INVALIDATE});
+            } else {
+                throw e;
+            }
+        }
+    }
+
     return {
         dispatch: {
           settings: {
@@ -65,6 +82,16 @@ const mapDispatchToProps = (dispatch: Function) => {
                   Services.storage().getFiles(project).then((files) => dispatch({type: appStateActions.switchQuestion, payload: {question: {name: name, files: files.filter((file) => file.name.split("/")[0] === name).map((file) => file.name)}}}));
               }
           },
+          user: {
+            signin: (username: string, password: string) => {
+                if (trim(username) === "" || trim(password) === ""){
+                    showError("Please fill in all fields!");
+                } else {
+                    let result = asyncAction(Services.login(username, password));
+                    alert("hi!");
+                }
+            }
+          },
           project: {
               addProject: (newProjectName: string) => Services.storage().newProject(newProjectName).then(() => dispatch({type: appStateActions.addProject, payload: {name: newProjectName}})),
               removeProject: (name: string) => Services.storage().deleteProject(name).then(() => dispatch({type: appStateActions.removeProject, payload: {name: name}})),

src/frontend/src/helpers/Services.ts

@@ -15,14 +15,22 @@ import {AbstractCompiler,
 
 export * from "./Storage/Interface";
 export * from "./Compiler/Interface";
-export {Services, LoginError, Connection, DispatchFunction};
+export {Services, GenericError, LoginError, Connection, DispatchFunction};
 
-class LoginError extends Error {
-  constructor(msg: string,
+class GenericError extends Error {
+  __proto__: Error;
+    constructor(message?: string) {
+        const trueProto = new.target.prototype;
+        super(message);
+    }
+}
+
+class LoginError extends GenericError {
+  constructor(message: string,
               public username?: string,
               public status?: number,
               public statusText?: number) {
-    super(msg);
+    super(message);
   }
 }
 

src/frontend/src/partials/Errors.tsx

@@ -6,4 +6,5 @@ export const Errors = Toaster.create({
     position: Position.BOTTOM,
 });
 
-export default (message: string) => Errors.show({ message: message, timeout: 0, intent: Intent.DANGER });
+
+export const showError =  (message: string)=>Errors.show({ message: message, timeout: 0, intent: Intent.DANGER });;

src/frontend/src/partials/Navigation/index.tsx

@@ -7,7 +7,7 @@ import SettingsDialog from "./Dialogs";
 import * as R from "ramda";
 
 
-const logo = require("./logo.svg");
+const logo = require("../../assets/logo.svg");
 const styles = require("./index.scss");
 const layoutStyles = require("../../Layout.scss");
 

src/frontend/src/reducers/appStateReducer.ts

@@ -1,6 +1,5 @@
 import {mergeBetter} from "../helpers/utils";
 import {clone, reject, equals} from "ramda";
-import Error from "../partials/Errors";
 import {projectRef, fileRef} from "../types";
 export interface appStateReducerState {[key: string]: any;
   projects: string[];
@@ -76,7 +75,6 @@ export default function appStateReducer(state: appStateReducerState = {currentPr
     case appStateActions.changeFileContent:
       return mergeBetter(state, {currentProject: { currentQuestion: {currentFile: {content: action.payload}}}});
     case appStateActions.openFile:
-      Error("You opened a file");
       if (state.currentProject.currentQuestion.openFiles.indexOf(action.payload) !== -1) return state; // don't duplicate files
       state = clone(state);
       state.currentProject.currentQuestion.openFiles.push(action.payload);

src/frontend/src/reducers/userReducer.ts

@@ -4,10 +4,16 @@ export interface userReducerState {[key: string]: any;
     questid?: string;
 };
 export interface userReducerAction {type: string; payload: userReducerState; };
-export const appStateActions = {
+export const userActions = {
+  INVALIDATE: "USER_INVALIDATE",
+  SIGNIN: "USER_SIGNIN"
 };
-export default function assignmentReducer(state: userReducerState = {questid: "kcpei"}, action: userReducerAction= {type: null, payload: {}}) {
+export default function userReducer(state: userReducerState = {questid: null}, action: userReducerAction= {type: null, payload: {}}) {
   switch (action.type) {
+    case userActions.INVALIDATE:
+      return {questid: null};
+    case userActions.SIGNIN:
+      return {questid: action.payload};
     default:
       return state;
   }

src/frontend/src/views/Project/index.tsx

@@ -16,7 +16,7 @@ import DeleteWindow from "./DeleteWindow";
 
 
 export interface ProjectProps { title: string; routeParams: any; }
-export interface ProjectState { deleteVisible: boolean; renameVisible: boolean; copyVisible: boolean; fileOpTarget: string; toggleView: boolean}
+export interface ProjectState { deleteVisible: boolean; renameVisible: boolean; copyVisible: boolean; fileOpTarget: string; toggleView: boolean; }
 
 
 

src/frontend/src/views/SignIn.scss

@@ -0,0 +1,15 @@
+.container{
+    max-width:300px;
+    margin:0 auto;
+    padding:4em 1em;
+    text-align:center;
+    h5{
+        margin-bottom:2em;
+    }
+}
+.logo{
+    width:50%;
+    max-width:80px;
+    display:block;
+    margin:0 auto 3em auto;
+}

src/frontend/src/views/SignIn.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import {map, actionsInterface} from "../actions";
+const layoutStyles = require("../Layout.scss");
+const styles = require("./SignIn.scss");
+
+const logo = require("../assets/logo.svg");
+
+export interface SignInProps { }
+export interface SignInState { }
+
+class SignIn extends React.Component<SignInProps&actionsInterface, SignInState> {
+    constructor(props: SignInProps){
+        super(props);
+        this.signin = this.signin.bind(this);
+    }
+    signin(e: any) {
+        e.preventDefault();
+        this.props.dispatch.user.signin((this.refs.username as HTMLInputElement).value, (this.refs.password as HTMLInputElement).value);
+    }
+    render() {
+        const projects = this.props.appState.projects;
+        return (<div className={styles.container}>
+                <img src={logo} className={styles.logo}/><h5>Sign in to Seashell</h5>
+                <form className="pt-control-group pt-vertical" onSubmit={this.signin}>
+                    <div className="pt-input-group pt-large">
+                        <span className="pt-icon pt-icon-person"></span>
+                        <input type="text" className="pt-input" ref="username" placeholder="Username" />
+                    </div>
+                    <div className="pt-input-group pt-large">
+                        <span className="pt-icon pt-icon-lock"></span>
+                        <input type="password" className="pt-input" ref="password" placeholder="Password" />
+                    </div>
+                    <button className="pt-button pt-large pt-intent-primary">Sign In</button>
+                </form>
+
+            </div>);
+    }
+}
+
+export default map(SignIn);