User register

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Ignore kube directory
+kube
\ No newline at end of file

src/backend/userapi.ts

@@ -43,6 +43,28 @@ export async function createUser(name: string, email: string, password: string,
     }
 }
 
+export async function registerUser(name: string, email: string, password: string): Promise<any>{
+    const url = `${HOST}/api/user/register`;
+
+    // eslint-disable-next-line no-useless-catch
+    try{
+        const response:Response = await fetch(url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name, email, password}),
+        })
+
+        if(response.ok){
+            const userResource: UserResource = await response.json();
+            return userResource;
+        }else if(response.status === 400){
+            throw new Error("Invalid email or password");
+        }
+    }catch(err){
+        throw(err);
+    }
+}
+
 export async function deleteUser(userId:string): Promise<void>{
     // eslint-disable-next-line no-useless-catch
     try{

src/components/LoginDialog.tsx

 import React from 'react';
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { Alert, Form, Modal } from "react-bootstrap";
 import { Button } from "react-bootstrap";
 import { login } from "../backend/shopperapi";
 import { getLoginInfoFromJWT, storeJWT} from "../JWTManager";
 import { useLoginContext } from "../LoginContext";
-import { createUser } from "../backend/userapi";
+import { registerUser } from "../backend/userapi";
 import ReactGA from "react-ga4";
 
 
@@ -37,9 +37,10 @@ export default function LoginDialog({show, onHide}: LoginDialogProps){
     const doRegistration = async(e : React.FormEvent) => {
         e.preventDefault();
         try{
-            await createUser(username, email, password, false);
+            await registerUser(username, email, password);
             //doLogin(e);
             console.log("Registriert");
+            setMessage("Registriert");
         }catch(err){
             setMessage(String(err));
         }
@@ -96,33 +97,35 @@ export default function LoginDialog({show, onHide}: LoginDialogProps){
                 <Modal.Body>
                 <Form>
                     {registrieren ?
-                    <>  <Form.Group controlId="formUsername">
+                    <div>
+                      <Form.Group>
                             <Form.Label>Username</Form.Label>
                             <Form.Control id="inputUsername" type="text" name="Username" placeholder="Enter Username" onChange={e => setUsername(e.target.value)} />
                         </Form.Group>
-                        <Form.Group controlId="formUsername" className="mt-3">
+                        <Form.Group  className="mt-3">
                             <Form.Label>E-Mail</Form.Label>
                             <Form.Control id="inputEmail" type="text" name="Email" placeholder="Enter Email" onChange={e => setEmail(e.target.value)} />
                         </Form.Group>
                         <br />
-                        <Form.Group controlId="formPassword">
+                        <Form.Group>
                             <Form.Label>Passwort</Form.Label>
                             <Form.Control id="inputPassword" type="password" name="pass" placeholder="Enter password" onChange={e => setPassword(e.target.value)} />
                         </Form.Group>
                         <br />
-                    </>
+                    </div>
                     :
-                    <>  <Form.Group controlId="formUsername">
+                    <div>
+                        <Form.Group>
                             <Form.Label>E-Mail</Form.Label>
                             <Form.Control id="inputEmail" type="text" name="Email" placeholder="Enter Email" onChange={e => setEmail(e.target.value)} />
                         </Form.Group>
                         <br />
-                        <Form.Group controlId="formPassword">
+                        <Form.Group>
                             <Form.Label>Passwort</Form.Label>
                             <Form.Control id="inputPassword" type="password" name="pass" placeholder="Enter password" onChange={e => setPassword(e.target.value)} />
                         </Form.Group>
                         <br />
-                    </>
+                    </div>  
                     }
                     {
                         message !== "" &&
@@ -136,16 +139,16 @@ export default function LoginDialog({show, onHide}: LoginDialogProps){
                 </Modal.Body>
                 <Modal.Footer style={{display: "flex"}}>
                     {registrieren ? 
-                    <>
+                    <div>
                         <Button variant="success" onClick={doRegistration}>Registrieren</Button>
                         <Button variant="secondary" onClick={hideRegistration}>Cancel</Button>
-                    </>
+                    </div>
                     :
-                    <>
+                    <div>
                         <Button variant="success" onClick={showRegistration}>Noch keinen Account? Hier Registrieren!</Button>
                         <Button variant="secondary" onClick={hideRegistration}>Cancel</Button>
                         <Button id="okButton" variant="primary" onClick={doLogin}>OK</Button>
-                    </>
+                    </div>
                     }
                 </Modal.Footer>
             </form>