mirror of
https://github.com/exzork/gc-tools.git
synced 2024-11-22 07:08:12 +00:00
done, no translation for gcauth at the moment
This commit is contained in:
muhammadeko
parent
fc3d38d028
commit
03472e382b
@ -28,6 +28,7 @@
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-select-search": "^3.0.9",
|
||||
"sweetalert2": "^11.4.10",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"typescript": "^4.6.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {Autocomplete, TextField} from "@mui/material";
|
||||
import {FormEvent, useEffect, useState} from "react";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
interface IGCAuthResponse {
|
||||
status: string;
|
||||
@ -33,18 +33,47 @@ interface IGCAuthChangePassword{
|
||||
|
||||
export default function GCAuth() {
|
||||
const [jwt, setJwt] = useState("");
|
||||
const [dispatchServer, setDispatchServer] = useState("");
|
||||
const [useSSl, setUseSSl] = useState(true);
|
||||
const [dispatchServer, setDispatchServer] = useState(localStorage.getItem("dispatchServer") ?? "");
|
||||
const [useSSl, setUseSSl] = useState(localStorage.getItem("useSSl")==="true" ?? true);
|
||||
const [baseUrl, setBaseUrl] = useState("");
|
||||
|
||||
const [loginUsername, setLoginUsername] = useState("");
|
||||
const [loginPassword, setLoginPassword] = useState("");
|
||||
const [token, setToken] = useState("");
|
||||
|
||||
const [registerUsername, setRegisterUsername] = useState("");
|
||||
const [registerPassword, setRegisterPassword] = useState("");
|
||||
const [registerPasswordConfirmation, setRegisterPasswordConfirmation] = useState("");
|
||||
|
||||
const [changePasswordUsername, setChangePasswordUsername] = useState("");
|
||||
const [changePasswordNewPassword, setChangePasswordNewPassword] = useState("");
|
||||
const [changePasswordNewPasswordConfirmation, setChangePasswordNewPasswordConfirmation] = useState("");
|
||||
const [changePasswordOldPassword, setChangePasswordOldPassword] = useState("");
|
||||
|
||||
const checkGCAuth = async () => {
|
||||
fetch(baseUrl + "/authentication/type")
|
||||
.then(res => res.text())
|
||||
.then(res => {
|
||||
if (res === "me.exzork.gcauth.handler.GCAuthAuthenticationHandler") {
|
||||
console.log("GCAuth is installed");
|
||||
Swal.fire({
|
||||
toast: true,
|
||||
position: "top-end",
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
title: "GCAuth is installed",
|
||||
icon: "success"
|
||||
});
|
||||
} else {
|
||||
console.log("GCAuth is not installed");
|
||||
Swal.fire({
|
||||
toast: true,
|
||||
position: "top-end",
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
title: "GCAuth is not installed",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
@ -54,30 +83,236 @@ export default function GCAuth() {
|
||||
|
||||
useEffect(() => {
|
||||
setBaseUrl(`http${useSSl ? "s" : ""}://${dispatchServer}`);
|
||||
localStorage.setItem("dispatchServer", dispatchServer);
|
||||
localStorage.setItem("useSSl", useSSl.toString());
|
||||
}, [useSSl, dispatchServer]);
|
||||
|
||||
const handleLogin = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
const data: IGCAuthLogin = {
|
||||
username: loginUsername,
|
||||
password: loginPassword
|
||||
}
|
||||
fetch(baseUrl + "/authentication/login", {method: "POST", body: JSON.stringify(data)})
|
||||
.then(async (res) => {
|
||||
const resText = await res.text();
|
||||
try {
|
||||
let resJson = JSON.parse(resText);
|
||||
if (resJson.success) {
|
||||
await Swal.fire({
|
||||
toast: true,
|
||||
position: "top-end",
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
title: "Login success",
|
||||
icon: "success"
|
||||
});
|
||||
setJwt(resJson.jwt);
|
||||
const splitToken = resJson.jwt.split(".");
|
||||
const payload = JSON.parse(atob(splitToken[1]));
|
||||
setToken(payload.token);
|
||||
} else {
|
||||
await Swal.fire({
|
||||
title: "Login failed",
|
||||
text: resJson.message ?? resJson,
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
await Swal.fire({
|
||||
title: "Login failed",
|
||||
text: resText,
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
Swal.fire({
|
||||
title: "Login failed",
|
||||
text: err,
|
||||
icon: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const handleRegister = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
const data: IGCAuthRegister = {
|
||||
username: registerUsername,
|
||||
password: registerPassword,
|
||||
password_confirmation: registerPasswordConfirmation
|
||||
}
|
||||
fetch(baseUrl + "/authentication/register", {method: "POST", body: JSON.stringify(data)})
|
||||
.then(async (res) => {
|
||||
const resText = await res.text();
|
||||
try {
|
||||
let resJson = JSON.parse(resText);
|
||||
if (resJson.success) {
|
||||
await Swal.fire({
|
||||
toast: true,
|
||||
position: "top-end",
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
title: "Register success",
|
||||
icon: "success"
|
||||
});
|
||||
setJwt(resJson.jwt);
|
||||
} else {
|
||||
await Swal.fire({
|
||||
title: "Register failed",
|
||||
text: resJson.message ?? resJson,
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
await Swal.fire({
|
||||
title: "Register failed",
|
||||
text: resText,
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
Swal.fire({
|
||||
title: "Register failed",
|
||||
text: err,
|
||||
icon: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const handleChangePassword = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
const data: IGCAuthChangePassword = {
|
||||
username: changePasswordUsername,
|
||||
new_password: changePasswordNewPassword,
|
||||
new_password_confirmation: changePasswordNewPasswordConfirmation,
|
||||
old_password: changePasswordOldPassword
|
||||
}
|
||||
|
||||
fetch(baseUrl + "/authentication/change_password", {method: "POST", body: JSON.stringify(data)})
|
||||
.then(async (res) => {
|
||||
const resText = await res.text();
|
||||
try {
|
||||
let resJson = JSON.parse(resText);
|
||||
if (resJson.success) {
|
||||
await Swal.fire({
|
||||
toast: true,
|
||||
position: "top-end",
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
title: "Change password success",
|
||||
icon: "success"
|
||||
});
|
||||
} else {
|
||||
await Swal.fire({
|
||||
title: "Change password failed",
|
||||
text: resJson.message ?? resJson,
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
await Swal.fire({
|
||||
title: "Change password failed",
|
||||
text: resText,
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
Swal.fire({
|
||||
title: "Change password failed",
|
||||
text: err,
|
||||
icon: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const handleCopyToken = (e:FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (token!==""){
|
||||
navigator.clipboard.writeText(token);
|
||||
Swal.fire({toast: true, position: "top-end", showConfirmButton: false, timer: 3000, timerProgressBar: true, title: "Token copied", icon: "success"});
|
||||
}else{
|
||||
Swal.fire({title: "No token", text: "You need to login first", icon: "error"});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-8 divide-y divide-gray-200 bg-white p-10">
|
||||
<div className="space-y-8 divide-y divide-gray-200 sm:space-y-5">
|
||||
<div className="flex" id="dispatch-server">
|
||||
<input type="text" onChange={(e)=>setDispatchServer(e.currentTarget.value)} placeholder="Input server ip/domain with port if needed" className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="text" defaultValue={dispatchServer} onChange={(e) => setDispatchServer(e.currentTarget.value)}
|
||||
placeholder="Input server ip/domain with port if needed"
|
||||
className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<div className="flex mx-2">
|
||||
<input type="checkbox" onChange={(e)=>setUseSSl(e.currentTarget.checked)} id="with-ssl" className="form-checkbox m-auto text-indigo-600 transition duration-150 ease-in-out"/>
|
||||
<label htmlFor="with-ssl" className="ml-2 my-auto block text-sm leading-5 text-gray-700">SSL</label>
|
||||
<input type="checkbox" checked={useSSl} onChange={(e) => setUseSSl(e.currentTarget.checked)} id="with-ssl"
|
||||
className="form-checkbox m-auto text-indigo-600 transition duration-150 ease-in-out"/>
|
||||
<label htmlFor="with-ssl"
|
||||
className="ml-2 my-auto block text-sm leading-5 text-gray-700">SSL</label>
|
||||
</div>
|
||||
<button onClick={checkGCAuth} className="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-md">Check</button>
|
||||
<button onClick={checkGCAuth}
|
||||
className="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-md">Check
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="col-span-1">
|
||||
<form className="mt-3 space-y-2">
|
||||
<form className="mt-3 h-full flex flex-col" onSubmit={handleLogin}>
|
||||
<h3 className="text-lg font-medium text-gray-900 text-center">Login</h3>
|
||||
<input type="text" placeholder="Username" className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="password" placeholder="Password" className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<button className="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-md w-full">Login</button>
|
||||
<input type="text" placeholder="Username"
|
||||
onChange={(e) => setLoginUsername(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="password" placeholder="Password"
|
||||
onChange={(e) => setLoginPassword(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<button
|
||||
className="mt-auto bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-md w-full">Login
|
||||
</button>
|
||||
<button onClick={handleCopyToken} className="mt-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-md w-full">Copy Token
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<TextField id="password" label="Password" variant="outlined" className="w-full"/>
|
||||
<form className="mt-3 h-full flex flex-col" onSubmit={handleRegister}>
|
||||
<h3 className="text-lg font-medium text-gray-900 text-center">Register</h3>
|
||||
<input type="text" placeholder="Username"
|
||||
onChange={(e) => setRegisterUsername(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="password" placeholder="Password"
|
||||
onChange={(e) => setRegisterPassword(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="password" placeholder="Confirm Password"
|
||||
onChange={(e) => setRegisterPasswordConfirmation(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<button
|
||||
className="mt-auto bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-md w-full">Register
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<form className="mt-3 h-full flex flex-col" onSubmit={handleChangePassword}>
|
||||
<h3 className="text-lg font-medium text-gray-900 text-center">Change Password</h3>
|
||||
<input type="text" placeholder="Username"
|
||||
onChange={(e) => setChangePasswordUsername(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="password" placeholder="Password"
|
||||
onChange={(e) => setChangePasswordNewPassword(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="password" placeholder="Confirm Password"
|
||||
onChange={(e) => setChangePasswordNewPasswordConfirmation(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<input type="password" placeholder="Old Password"
|
||||
onChange={(e) => setChangePasswordOldPassword(e.currentTarget.value)}
|
||||
className="mt-2 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"/>
|
||||
<button
|
||||
className="mt-auto bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-md w-full">Change
|
||||
Password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8341,6 +8341,11 @@ svgo@^2.7.0:
|
||||
picocolors "^1.0.0"
|
||||
stable "^0.1.8"
|
||||
|
||||
sweetalert2@^11.4.10:
|
||||
version "11.4.10"
|
||||
resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-11.4.10.tgz#d0f7733a0997aad18b81c6f6b39a01c3a6cb4e21"
|
||||
integrity sha512-Ms3mryLA/c5+llHNY0I9KXU8bv0N1a874gZr7xMPOiSnLD9veHZA92nZvJOkuN1hrdcR8kyj4IN8tBxlAIjVww==
|
||||
|
||||
symbol-tree@^3.2.4:
|
||||
version "3.2.4"
|
||||
resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user