backend/src/app.py

@@ -132,6 +132,22 @@ def protected():
          -H "Authorization: Bearer <your_token>"
     """
     return {'message': f'protected endpoint (allowed user {flask_praetorian.current_user().username})'}
+
+@app.route('/api/register', methods=['POST']) 
+def register():
+    req = flask.request.get_json(force=True)
+    username = req.get('username', None)
+    password = req.get('password', None)
+    new_user = User(
+        username=username,
+        password=guard.hash_password(password)
+    )
+    db.session.add(new_user)
+    db.session.commit()
+    ret = {'message': 'Account erstellt für den Account {}'.format(
+        new_user.username
+    )}
+    return ret, 200
     
 @app.route('/time')
 def get_current_time():

frontend/src/components/pages/Register.js

@@ -1,28 +1,54 @@
 import React from "react";
+import { useState } from "react/cjs/react.development";
 import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
 
 export default function Login() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
+    const onSubmitClick = (e) => {
+    e.preventDefault();
+    let opts = {
+      username: username,
+      password: password,
+    };
+    console.log(opts);
+    fetch("/api/register", {
+      method: "post",
+      body: JSON.stringify(opts),
+    })
+  };
+
+  const handleUsernameChange = (e) => {
+    setUsername(e.target.value);
+  };
+
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
+
   return (
     <>
       <div className="sitePage">
         <h1>Registrierung</h1>
-        <p>Herzlich willkommen bei meiner Bachelorarbeit. Du kannst dich hier einfach registrieren, sodass du mir ein positives Feedback hinterlassen kannst. Bei der ersten Registrierung geht es darum, dass ich ein paar Sachen über dich kennenlerne. Ich werde diese Fragen strikt trennen mit der eigentlichen Fragestellung. Diese Fragen dienen mir dazu, dass ich einschätzen kann, welche Leute ich befragt habe.</p>
         <form>
           <InputField
             LabelName="Benutzername / Kennung"
-            InputType=""
+            InputType="text"
+            onChange={handleUsernameChange}
             InputName="username"
           />
           <InputField
             LabelName="Passwort"
             InputType="password"
+            onChange={handlePasswordChange}
             InputName="password"
           />
           <br />
-          <SubmitField LabelName="Einloggen" />
+          <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
         </form>
       </div>
       <Footer />