A start on a frontend application in React.

backend/Cargo.lock

@@ -213,6 +213,12 @@ dependencies = [
  "winapi 0.3.9",
 ]
 
+[[package]]
+name = "const-sha1"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fb58b6451e8c2a812ad979ed1d83378caa5e927eef2622017a45f251457c2c9d"
+
 [[package]]
 name = "const_fn"
 version = "0.4.9"
@@ -551,9 +557,11 @@ dependencies = [
  "diesel_migrations",
  "jsonwebtoken",
  "libsqlite3-sys",
+ "local-ip-address",
  "password-hash",
  "rand_core",
  "rocket",
+ "rocket_cors",
  "rocket_dyn_templates",
  "rocket_sync_db_pools",
  "serde",
@@ -861,6 +869,19 @@ dependencies = [
  "vcpkg",
 ]
 
+[[package]]
+name = "local-ip-address"
+version = "0.4.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b143c6ef86e36328caa40a7578e95d1544aca8a1740235fd2b416a69441a5c7"
+dependencies = [
+ "libc",
+ "memalloc",
+ "neli",
+ "thiserror",
+ "windows",
+]
+
 [[package]]
 name = "lock_api"
 version = "0.4.6"
@@ -915,6 +936,12 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
+[[package]]
+name = "memalloc"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df39d232f5c40b0891c10216992c2f250c054105cb1e56f0fc9032db6203ecc1"
+
 [[package]]
 name = "memchr"
 version = "2.4.1"
@@ -1034,6 +1061,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "neli"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9053554eb5dcb7e10d9cdab1206965bde870eed5d0d341532ca035e3ba221508"
+dependencies = [
+ "byteorder",
+ "libc",
+]
+
 [[package]]
 name = "net2"
 version = "0.2.37"
@@ -1534,6 +1571,22 @@ dependencies = [
  "unicode-xid",
 ]
 
+[[package]]
+name = "rocket_cors"
+version = "0.6.0-alpha1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f5aa2c9cdb5dabbbf38bd4fb0038844cc47598399fed70fc938185679154793"
+dependencies = [
+ "log",
+ "regex",
+ "rocket",
+ "serde",
+ "serde_derive",
+ "unicase",
+ "unicase_serde",
+ "url",
+]
+
 [[package]]
 name = "rocket_dyn_templates"
 version = "0.1.0-rc.1"
@@ -2177,6 +2230,25 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "unicase"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50f37be617794602aabbeee0be4f259dc1778fabe05e2d67ee8f79326d5cb4f6"
+dependencies = [
+ "version_check",
+]
+
+[[package]]
+name = "unicase_serde"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ef53697679d874d69f3160af80bc28de12730a985d57bdf2b47456ccb8b11f1"
+dependencies = [
+ "serde",
+ "unicase",
+]
+
 [[package]]
 name = "unicode-bidi"
 version = "0.3.7"
@@ -2417,6 +2489,33 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
+[[package]]
+name = "windows"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68088239696c06152844eadc03d262f088932cce50c67e4ace86e19d95e976fe"
+dependencies = [
+ "const-sha1",
+ "windows_gen",
+ "windows_macros",
+]
+
+[[package]]
+name = "windows_gen"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cf583322dc423ee021035b358e535015f7fd163058a31e2d37b99a939141121d"
+
+[[package]]
+name = "windows_macros"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "58acfb8832e9f707f8997bd161e537a1c1f603e60a5bd9c3cf53484fdcc998f3"
+dependencies = [
+ "syn",
+ "windows_gen",
+]
+
 [[package]]
 name = "ws2_32-sys"
 version = "0.2.1"

backend/Cargo.toml

@@ -21,4 +21,5 @@ rand_core = { version = "0.6", features = ["std"] }
 diesel-derive-enum = { version = "1.1", features = ["sqlite"] }
 jsonwebtoken = "8.1"
 validator = { version = "0.14", features = ["derive"] }
-
+rocket_cors = "0.6.0-alpha1"
+local-ip-address = "0.4"

backend/src/main.rs

@@ -45,13 +45,12 @@ fn rocket() -> _ {
         .attach(Template::fairing())
         .attach(AdHoc::on_ignite("Run Migrations", schema::run_migrations))
         .attach(AdHoc::config::<AppConfig>())
+        .attach(site::make_cors())
         .mount(
             "/",
             routes![
                 site::index,
-                site::gamenights,
+                site::files
-                site::add_game_night,
-                site::register
             ],
         )
         .mount(

backend/src/site.rs

@@ -1,90 +1,43 @@
-use crate::schema;
+use rocket::fs::NamedFile;
-use rocket::request::FlashMessage;
+use rocket::http::Method;
-use rocket::response::Redirect;
+use rocket_cors::{AllowedHeaders, AllowedOrigins, Cors, CorsOptions};
-use rocket_dyn_templates::Template;
+use std::io;
-use serde::{Deserialize, Serialize};
+use std::path::{Path, PathBuf};
-use std::borrow::Cow;
+use local_ip_address::local_ip;
 
-#[derive(Serialize, Deserialize, Debug)]
+
-struct FlashData {
+pub fn make_cors() -> Cors {
-    has_data: bool,
+    let allowed_origins = AllowedOrigins::some_exact(&[
-    kind: Cow<'static, str>,
+        "http://localhost:3000",
-    message: Cow<'static, str>,
+        "http://127.0.0.1:3000",
+        &format!("http://{}:8000",local_ip().unwrap())[..],
+        "http://localhost:8000",
+        "http://0.0.0.0:8000",
+    ]);
+    
+    CorsOptions {
+        allowed_origins,
+        allowed_methods: vec![Method::Get].into_iter().map(From::from).collect(), // 1.
+        allowed_headers: AllowedHeaders::some(&[
+            "Authorization",
+            "Accept",
+            "Access-Control-Allow-Origin",
+        ]),
+        allow_credentials: true,
+        ..Default::default()
+    }
+    .to_cors()
+    .expect("error while building CORS")
 }
 
-impl FlashData {
+#[get("/<file..>", rank = 10)]
-    const EMPTY: Self = Self {
+pub async fn files(file: PathBuf) -> Option<NamedFile> {
-        has_data: false,
+    NamedFile::open(Path::new("../frontend/build/").join(file))
-        message: Cow::Borrowed(""),
+        .await
-        kind: Cow::Borrowed(""),
+        .ok()
-    };
-}
-
-#[derive(Serialize, Deserialize, Debug)]
-struct GameNightsData {
-    gamenights: Vec<schema::GameNight>,
-    flash: FlashData,
-}
-
-#[get("/gamenights")]
-pub async fn gamenights(conn: schema::DbConn) -> Template {
-    let gamenights = schema::get_all_gamenights(conn).await;
-
-    let data = GameNightsData {
-        gamenights: gamenights,
-        flash: FlashData::EMPTY,
-    };
-
-    Template::render("gamenights", &data)
 }
 
 #[get("/")]
-pub async fn index() -> Redirect {
+pub async fn index() -> io::Result<NamedFile> {
-    Redirect::to(uri!(gamenights))
+    NamedFile::open("../frontend/build/index.html").await
-}
-
-#[derive(Serialize, Deserialize, Debug)]
-struct GameNightAddData {
-    post_url: String,
-    flash: FlashData,
-}
-
-#[get("/gamenight/add")]
-pub async fn add_game_night(flash: Option<FlashMessage<'_>>) -> Template {
-    let flash_data = match flash {
-        None => FlashData::EMPTY,
-        Some(flash) => FlashData {
-            has_data: true,
-            message: Cow::Owned(flash.message().to_string()),
-            kind: Cow::Owned(flash.kind().to_string()),
-        },
-    };
-
-    let data = GameNightAddData {
-        post_url: "/api/gamenight".to_string(),
-        flash: flash_data,
-    };
-
-    Template::render("gamenight_add", &data)
-}
-
-#[derive(Serialize, Deserialize, Debug)]
-struct RegisterData {
-    flash: FlashData,
-}
-
-#[get("/register")]
-pub async fn register(flash: Option<FlashMessage<'_>>) -> Template {
-    let flash_data = match flash {
-        None => FlashData::EMPTY,
-        Some(flash) => FlashData {
-            has_data: true,
-            message: Cow::Owned(flash.message().to_string()),
-            kind: Cow::Owned(flash.kind().to_string()),
-        },
-    };
-
-    let data = RegisterData { flash: flash_data };
-
-    Template::render("register", &data)
 }

frontend/package.json

@@ -15,7 +15,11 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "watch": "npm-watch"
+  },
+  "watch": {
+    "build": "src/"
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "npm-watch": "^0.11.0"
   }
 }

frontend/public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>It's gamenight</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

frontend/src/App.css

@@ -28,6 +28,19 @@
   color: #61dafb;
 }
 
+fieldset label {
+  display: block;
+  text-align: left;
+}
+
+input {
+  display: block;
+}
+
+input[type=submit] {
+  margin:5px;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

frontend/src/App.js

@@ -1,25 +1,99 @@
 import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+import MenuBar from './components/MenuBar';
+import Login from './components/Login';
+import Gamenights from "./components/Gamenights"
 
-function App() {
+class App extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.handleLogin = this.handleLogin.bind(this);
+    this.onLogout = this.onLogout.bind(this);
+    this.state = {
+      user: null,
+      token: null,
+      gamenights: null
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    console.log("component update?")
+    if (prevState.token !== this.state.token) {
+      const requestOptions = {
+        method: 'GET',
+        headers: { 'Authorization': `bearer: ${this.state.token}` },
+      };
+      fetch('api/gamenights', requestOptions)
+        .then(response => response.json())
+        .then(data => {
+          if(data.result === "Ok") {
+            this.setState((state, props) => ({
+              gamenights: data.gamenights
+            }));
+          } else {
+            this.setState((state, props) => ({
+              flash_data: {
+                type: "Error",
+                message: data.message
+              }
+            }));
+          }
+          console.log(this.state)
+        });
+    }
+}
+
+  render() {
+    if(this.state.token === null) {
       return (
         <div className="App">
-      <header className="App-header">
+          <Login onChange={this.handleLogin}/>
-        <img src={logo} className="App-logo" alt="logo" />
+        </div>
-        <p>
+      );
-          Edit <code>src/App.js</code> and save to reload.
+    } else {
-        </p>
+      return (
-        <a
+        <div className="App">
-          className="App-link"
+          <MenuBar user={this.state.user} onLogout={this.onLogout}/>
-          href="https://reactjs.org"
+          <Gamenights />
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
         </div>
       );
     }
+  }
+
+  onLogout() {
+    this.setState((state, props) => ({
+      user: null,
+      token: null,
+      flash_data: null
+    }));
+  }
+
+  handleLogin(input) {
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(input)
+    };
+    fetch('api/login', requestOptions)
+      .then(response => response.json())
+      .then(data => {
+        if(data.result === "Ok") {
+          this.setState((state, props) => ({
+            token: data.jwt
+          }));
+        } else {
+          this.setState((state, props) => ({
+            flash_data: {
+              type: "Error",
+              message: data.message
+            }
+          }));
+        }
+        console.log(this.state)
+      });
+  }
+}
 
 export default App;

frontend/src/components/Gamenights.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default class Gamenights extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  render() {
+    let gamenights = this.props.gamenights.map(g => 
+      (<li>{g.name}</li>)
+    );
+    return (
+      <ul>
+        {gamenights}
+      </ul>
+    );
+  }
+}

frontend/src/components/Login.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export default class Login extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: "",
+      password: "",
+    };
+
+    this.handleUsernameChange = this.handleUsernameChange.bind(this);
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+    this.handleLogin = this.handleLogin.bind(this);
+  }
+
+  render() {
+    return (
+      <div className="Login-Component">
+        <form onSubmit={this.handleLogin}>
+          <fieldset>
+            <legend>Login</legend>
+
+            <label for="username">Username:</label>
+            <input id="username" name="username" type="text"
+              value={this.state.username}
+              onChange={this.handleUsernameChange} />
+            <label for="password">Password:</label>
+            <input id="password" name="password" type="password"
+              value={this.state.password}
+              onChange={this.handlePasswordChange} />
+
+            <input type="submit" value="Submit" />
+          </fieldset>
+        </form>
+      </div>
+    );
+  }
+
+  handleUsernameChange(event) {
+    this.setState((state, props) => ({
+      username: event.target.value
+    }));
+  }
+
+  handlePasswordChange(event) {
+    this.setState((state, props) => ({
+      password: event.target.value
+    }));
+  }
+
+  handleLogin(event) {
+    this.props.onChange({ username: this.state.username, password: this.state.password });
+    event.preventDefault();
+  }
+}

frontend/src/components/MenuBar.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class MenuBar extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <ul>
+        <li>
+          <a>Gamenight</a>
+        </li>
+        <li>
+          <a>User</a>
+        </li>
+        <li>
+          <button onClick={this.props.onLogout}>Logout</button>
+        </li>
+      </ul>
+    );
+  }
+}