Config file update. Credentials in LoginPage are now sent in JSON

src/config.js

@@ -1 +1,2 @@
 export const SPRING_SERVER = "http://localhost:8080";
+export const KEYCLOAK_SERVER = "http://localhost:8181"

src/pages/LoginPage.js

@@ -1,20 +1,54 @@
 import {Button} from "primereact/button";
 import {InputText} from "primereact/inputtext";
 import {Navigate, useNavigate} from "react-router-dom";
-import React, {useState} from "react";
+import React, {useRef, useState} from "react";
+import {KEYCLOAK_SERVER, SPRING_SERVER} from "../config";
+import {Toast} from "primereact/toast";
+
 
 export default function () {
     const navigate = useNavigate();
     const [login, setLogin] = useState("");
     const [password, setPassword] = useState("");
+    const [login2, setLogin2] = useState("");
+    const [password2, setPassword2] = useState("");
+    const my_toast = useRef(null)
 
     if (localStorage.getItem("access_token")) {
         return <Navigate to="/home" replace/>
     }
 
+    function onRegisterClick() {
+
+        const url = SPRING_SERVER + '/keycloak/createUser'
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                "username": login2,
+                "enabled": true,
+                "credentials": [
+                    {
+                        "type": "password",
+                        "value": password2,
+                        "temporary": false
+                    }
+                ]
+            })
+        }).then((res) => {
+            if (res.ok) {
+                my_toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Account created'});
+            } else {
+                my_toast.current.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
+            }
+        })
+    }
 
     function onLoginClick() {
-        fetch('http://localhost:8181/auth/realms/SpringBootKeycloak/protocol/openid-connect/token', {
+        fetch(KEYCLOAK_SERVER + '/auth/realms/SpringBootKeycloak/protocol/openid-connect/token', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
@@ -46,8 +80,10 @@ export default function () {
 
     return (
         <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh'}}
-             className="bg-orange-500">
-            <div className="surface-card p-4 shadow-2 border-round flex flex-column w-3 ">
+             className="bg-orange-500 flex flex-row">
+            <Toast ref={my_toast}></Toast>
+
+            <div className="surface-card p-4 shadow-2 border-round flex flex-column w-3 mx-2">
                 <div className="text-3xl font-medium text-900 mb-2">Login Panel</div>
                 <div className="font-medium text-500 mb-3">Login using your credentials</div>
 
@@ -66,6 +102,25 @@ export default function () {
                 </div>
 
             </div>
+            <div className="surface-card p-4 shadow-2 border-round flex flex-column w-3 mx-2">
+                <div className="text-3xl font-medium text-900 mb-2">Register Panel</div>
+                <div className="font-medium text-500 mb-3">Register your new account</div>
+
+                <span className="p-input-icon-left py-1 ">
+                        <i className="pi pi-user"/>
+                        <InputText placeholder="Username" onChange={(e) => setLogin2(e.target.value)}
+                                   className="min-w-full max-w-full"/>
+                </span>
+                <span className="p-input-icon-left py-1">
+                        <i className="pi pi-key"/>
+                        <InputText type="password" placeholder="Password" onChange={(e) => setPassword2(e.target.value)}
+                                   className="min-w-full max-w-full"/>
+                </span>
+                <div className="flex justify-content-end pt-2">
+                    <Button onClick={onRegisterClick}>Register</Button>
+                </div>
+
+            </div>
         </div>
     )
 }