A start on a frontend application in React.
This commit is contained in:
parent
d80f705b5d
commit
56d0889963
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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::add_game_night,
|
||||
site::register
|
||||
site::files
|
||||
],
|
||||
)
|
||||
.mount(
|
||||
|
|
|
|||
|
|
@ -1,90 +1,43 @@
|
|||
use crate::schema;
|
||||
use rocket::request::FlashMessage;
|
||||
use rocket::response::Redirect;
|
||||
use rocket_dyn_templates::Template;
|
||||
use serde::{Deserialize, Serialize};
|
||||
use std::borrow::Cow;
|
||||
use rocket::fs::NamedFile;
|
||||
use rocket::http::Method;
|
||||
use rocket_cors::{AllowedHeaders, AllowedOrigins, Cors, CorsOptions};
|
||||
use std::io;
|
||||
use std::path::{Path, PathBuf};
|
||||
use local_ip_address::local_ip;
|
||||
|
||||
#[derive(Serialize, Deserialize, Debug)]
|
||||
struct FlashData {
|
||||
has_data: bool,
|
||||
kind: Cow<'static, str>,
|
||||
message: Cow<'static, str>,
|
||||
|
||||
pub fn make_cors() -> Cors {
|
||||
let allowed_origins = AllowedOrigins::some_exact(&[
|
||||
"http://localhost:3000",
|
||||
"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 {
|
||||
const EMPTY: Self = Self {
|
||||
has_data: false,
|
||||
message: Cow::Borrowed(""),
|
||||
kind: Cow::Borrowed(""),
|
||||
};
|
||||
}
|
||||
|
||||
#[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("/<file..>", rank = 10)]
|
||||
pub async fn files(file: PathBuf) -> Option<NamedFile> {
|
||||
NamedFile::open(Path::new("../frontend/build/").join(file))
|
||||
.await
|
||||
.ok()
|
||||
}
|
||||
|
||||
#[get("/")]
|
||||
pub async fn index() -> Redirect {
|
||||
Redirect::to(uri!(gamenights))
|
||||
}
|
||||
|
||||
#[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)
|
||||
pub async fn index() -> io::Result<NamedFile> {
|
||||
NamedFile::open("../frontend/build/index.html").await
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
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">
|
||||
<Login onChange={this.handleLogin}/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="App">
|
||||
<MenuBar user={this.state.user} onLogout={this.onLogout}/>
|
||||
<Gamenights />
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue