wip

public/locales/en-US/gcauth.json

@@ -0,0 +1,4 @@
+{
+  "navigation": "GCAuth",
+  "title": "GCAuth Token Generator"
+}

src/components/MenuDesktop.tsx

@@ -20,6 +20,12 @@ export default function MenuDesktop(props:{handleHeaderTitleChange: (title:strin
             ) : (
                 <Link to="/artifact" onClick={() => handleHeaderTitleChange("Artifact Command Generator")} className="menu-item text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Artifact</Link>
             )}
+
+            {location.pathname === "/gcauth" ? (
+            <Link to="/gcauth" className="menu-item block bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">GCAuth</Link>
+            ) : (
+            <Link to="/gcauth" onClick={() => handleHeaderTitleChange("GCAuth Token Generator")} className="menu-item block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">GCAuth</Link>
+            )}
         </>
     )
 }

src/components/MenuMobile.tsx

@@ -20,6 +20,12 @@ export default function MenuMobile(props: any) {
             ) : (
                 <Link to="/artifact" onClick={() => handleHeaderTitleChange("Artifact Command Generator")} className="menu-item block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Artifact</Link>
             )}
+
+            {location.pathname === "/gcauth" ? (
+                <Link to="/gcauth" className="menu-item block bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">GCAuth</Link>
+            ) : (
+                <Link to="/gcauth" onClick={() => handleHeaderTitleChange("GCAuth Token Generator")} className="menu-item block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">GCAuth</Link>
+            )}
         </>
     )
 }

src/components/Navbar.tsx

@@ -1,14 +1,20 @@
-import React from "react";
+import React, {useEffect} from "react";
 import MenuDesktop from "./MenuDesktop";
 import MenuMobile from "./MenuMobile";
 import {Menu} from "@mui/material";
-import i18n from "i18next";
+import i18n, {use} from "i18next";
 import {useTranslation} from "react-i18next";
 import LanguageChange from "./LanguageChange";
+import {useNavigate} from "react-router-dom";
 
-class Navbar extends React.Component {
+interface Props {
-    handleHeaderTitleChange;
+    handleHeaderTitleChange: (title: string) => void;
-    toggleMobileMenu = () => {
+}
+export default function Navbar(props: Props) {
+    const {handleHeaderTitleChange} = props;
+    const pathname = window.location.pathname;
+    const {t} = useTranslation();
+    const toggleMobileMenu = () => {
         const menuShow = document.querySelector(".menu-show");
         const menuHide = document.querySelector(".menu-hide");
         const mobileMenu = document.querySelector("#mobile-menu");
@@ -28,26 +34,26 @@ class Navbar extends React.Component {
             }
         }
     }
-
+    useEffect(() => {
-    constructor(props:{handleHeaderTitleChange: (title:string) => void}) {
+        switch (pathname){
-        super(props);
+            case "/":
-        const {handleHeaderTitleChange} = props;
+                handleHeaderTitleChange("Home")
-
+                break;
-        this.handleHeaderTitleChange = handleHeaderTitleChange;
+            case "/artifact":
-        const pathname =window.location.pathname;
+                handleHeaderTitleChange(t('title',{ns:"artifact"}))
-
+                break;
-        if(pathname==="/") handleHeaderTitleChange("Home")
+            case "/gcauth":
-        else if(pathname==="/artifact") handleHeaderTitleChange("Artifact Command Generator")
+                handleHeaderTitleChange(t('title',{ns:"gcauth"}))
+                break;
         }
-
+    }, []);
-    render() {
     return(
         <nav className="bg-gray-800">
             <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
                 <div className="relative flex items-center justify-between h-16">
                     <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                         {/* Mobile menu button */}
-                            <button onClick={this.toggleMobileMenu} className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out">
+                        <button onClick={toggleMobileMenu} className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out">
                             <svg className="menu-show block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"/>
                             </svg>
@@ -62,7 +68,7 @@ class Navbar extends React.Component {
                         </div>
                         <div className="hidden sm:block sm:ml-6 w-full">
                             <div className="flex w-full">
-                                    <MenuDesktop handleHeaderTitleChange={this.handleHeaderTitleChange}/>
+                                <MenuDesktop handleHeaderTitleChange={handleHeaderTitleChange}/>
                                 <LanguageChange/>
                             </div>
                         </div>
@@ -72,12 +78,10 @@ class Navbar extends React.Component {
             </div>
             <div className="hidden sm:hidden" id="mobile-menu">
                 <div className="px-2 pt2 pb-3 space-y-1">
-                        <MenuMobile handleHeaderTitleChange={this.handleHeaderTitleChange}/>
+                    <MenuMobile handleHeaderTitleChange={handleHeaderTitleChange}/>
                     <LanguageChange/>
                 </div>
             </div>
         </nav>
     )
 }
-}
-export default Navbar;

src/components/RouteMenu.tsx

@@ -1,6 +1,7 @@
 import {Routes, Route, RouteProps} from "react-router-dom";
 import React from "react";
 import Artifacts from "./pages/Artifacts";
+import GCAuth from "./pages/GCAuth";
 
 interface RouteMenuProps extends RouteProps{
     handleHeaderTitleChange: (title: string) => void;
@@ -17,6 +18,9 @@ export default function RouteMenu(props: RouteMenuProps) {
             <Route path="/artifact" element={
                 <Artifacts/>
             }/>
+            <Route path="/gcauth" element={
+                <GCAuth/>
+            }/>
         </Routes>
     );
 }

src/components/pages/GCAuth.tsx

@@ -0,0 +1,74 @@
+import {useEffect, useState} from "react";
+import {Autocomplete, TextField} from "@mui/material";
+
+interface IGCAuthResponse{
+    status: string;
+    message: string;
+    jwt: string;
+}
+
+interface IJWTPayload{
+    token: string;
+    username: string;
+    uid: string;
+}
+
+interface IGCAuthLogin{
+    username: string;
+    password: string;
+}
+
+interface IGCAuthRegister{
+    username: string;
+    password: string;
+    password_confirmation: string;
+}
+
+interface IGCAuthChangePassword{
+    username: string;
+    new_password: string;
+    new_password_confirmation: string;
+    old_password: string;
+}
+
+export default function GCAuth() {
+    const [jwt, setJwt] = useState("");
+    const [dispatchServer, setDispatchServer] = useState("");
+    const [useSSl, setUseSSl] = useState(true);
+    const [baseUrl, setBaseUrl] = 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");
+                }else{
+                    console.log("GCAuth is not installed");
+                }
+            })
+            .catch(err => {
+                console.log(err);
+            });
+    }
+
+    useEffect(() => {
+        setBaseUrl(`http${useSSl ? "s" : ""}://${dispatchServer}`);
+    }, [useSSl, dispatchServer]);
+    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, ex : genshin.exzork.me:443" 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>
+                        </div>
+                        <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>
+            </div>
+        </>
+    )
+}

src/i18n.ts

@@ -13,7 +13,7 @@ i18n
         interpolation: {
             escapeValue: false, // not needed for react!!
         },
-        ns: ["artifact"],
+        ns: ["artifact","gcauth"],
         defaultNS: "",
     });