games/factorio-server-manager
games/factorio-server-manager
1
0
Fork 0
mirror of https://github.com/OpenFactorioServerManager/factorio-server-manager.git synced 2025-02-05 13:24:57 +02:00
Code Issues Releases Activity

wip

Browse Source
This commit is contained in:
Jan Naahs 2020-06-10 15:15:00 +02:00
parent 2b3886de6e
commit 9aae0b84d3
8 changed files with 102 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/images/factorio-main-banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 910 KiB

1
package.json
View File

@ -55,6 +55,7 @@
},
"dependencies": {
"axios": "^0.19.2",
"react-hook-form": "^5.7.2",
"tailwindcss": "^1.4.6"
}
}

30
tailwind.config.js
View File

@ -1,7 +1,35 @@
module.exports = {
purge: [],
theme: {
extend: {},
extend: {
},
colors: {
"gray": {
dark: "#313030",
medium: "#403F40",
light: "#8E8E8E"
},
"white": "#F9F9F9",
"dirty-white": "#ffe6c0",
"green": "#5EB663",
"green-light": "#92e897",
"red": "#FE5A5A",
"red-light": "#FF9B9B",
"orange": "#E39827",
"black": "#1C1C1C"
},
boxShadow: {
default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)',
md: '0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)',
"2xl": '0 25px 50px -12px rgba(0, 0, 0, .25)',
"3xl": '0 35px 60px -15px rgba(0, 0, 0, .3)',
inner: 'inset 0 4px 8px 0 rgba(0, 0, 0, 0.9)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
'none': 'none',
}
},
variants: {},
plugins: [],

38
ui/App/views/Login.js
View File

@ -1,38 +0,0 @@
import React from 'react';
const Login = () => {
return (
<div className="h-screen overflow-hidden flex items-center justify-center">
<div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
<div className="mb-4">
<label className="block text-grey-darker text-sm font-bold mb-2" htmlFor="username">
Username
</label>
<input className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
id="username"
type="text" placeholder="Username"/>
</div>
<div className="mb-6">
<label className="block text-grey-darker text-sm font-bold mb-2" htmlFor="password">
Password
</label>
<input
className="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
id="password" type="password" placeholder="******************"/>
<p className="text-red text-xs italic">Please choose a password.</p>
</div>
<div className="flex items-center justify-between">
<button className="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" type="button">
Sign In
</button>
<a className="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
href="#">
Forgot Password?
</a>
</div>
</div>
</div>
);
};
export default Login;

59
ui/App/views/Login.jsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import {useForm} from "react-hook-form";
import user from "../../api/resources/user";
const Login = () => {
const {register, handleSubmit, errors} = useForm();
// todo call api
const onSubmit = async data => {
const res = await user.login(data)
console.log(res)
};
return (
<div className="h-screen overflow-hidden flex items-center justify-center bg-banner">
<form onSubmit={handleSubmit(onSubmit)} className="rounded-sm bg-gray-dark shadow-xl">
<div className="px-4 py-2 text-xl text-dirty-white font-bold">
Login
</div>
<div className="rounded-sm bg-gray-medium shadow-inner mx-4 px-6 pt-4 pb-6 mb-4 flex flex-col">
<div className="mb-4">
<label className="block text-white text-sm font-bold mb-2" htmlFor="username">
Username
</label>
<input className="shadow appearance-none border w-full py-2 px-3 text-black"
ref={register({required: true})}
id="username"
name="username"
type="text" placeholder="Username"/>
{errors.password && <span className="block text-red">Username is required</span>}
</div>
<div className="mb-6">
<label className="block text-white text-sm font-bold mb-2" htmlFor="password">
Password
</label>
<input
className="shadow appearance-none w-full py-2 px-3 text-black"
ref={register({required: true})}
name="password"
id="password" type="password" placeholder="******************"/>
{errors.password && <span className="block text-red">Password is required</span>}
</div>
<div className="text-center">
<button className="bg-green hover:bg-green-light text-black font-bold py-2 px-4 w-full"
type="submit">
Sign In
</button>
<a className="bg-gray-light hover:bg-orange text-black py-2 px-4 mt-2 w-full block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
href="#">
Forgot Password?
</a>
</div>
</div>
</form>
</div>
);
};
export default Login;

5
ui/api/client.js
View File

@ -1,7 +1,10 @@
import Axios from "axios";
const client = Axios.create({
withCredentials: true
withCredentials: true,
headers: {
'Content-Type': 'application/json'
}
});
export default client;

4
ui/api/resources/user.js
View File

@ -4,5 +4,9 @@ export default {
status: async () => {
const response = await client.get('/api/user/status');
return response.data;
},
login: async data => {
const response = await client.post('/api/login');
return response.data;
}
}

5
ui/index.scss
View File

@ -1,3 +1,8 @@
@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";
.bg-banner {
background-image: url("/images/factorio-main-banner.jpg");
background-position: center center;
}