Add generated password to frontend

backend/src/app.py

@@ -132,12 +132,14 @@ def protected():
     """
     return {'message': f'protected endpoint (allowed user {flask_praetorian.current_user().username})'}
 
+
 @app.route('/api/protected/rcv_pw', methods=['GET'])
 # @flask_praetorian.auth_required
 def get_password():
     pw = get_random_password()
-    print(pw)
+    ret = {'password': pw}
-    return pw
+    return ret, 200
+
 
 @app.route('/api/register', methods=['POST'])
 def register():
@@ -246,8 +248,6 @@ def survey():
         return ret, 400
 
 
-
-
 # Run the example
 if __name__ == '__main__':
     app.run(debug=debug, host=host, port=port)

frontend/src/App.css

@@ -77,3 +77,7 @@ h1 {
 .bildnachweise {
   font-size: 1.3em;
 }
+
+.generated-password {
+  font-weight: bold;
+}

frontend/src/components/pages/BehaviorNormal.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
@@ -16,6 +16,8 @@ export default function BehaviorNormal() {
     password = tmp_password;
   };
 
+  const [genPassword, setGenPassword] = useState("")
+
   let logger = new Logger({
     //inputs: ["cursor", "wheel", "keyboard", "touch"],
     inputs: ["keyboard"],
@@ -35,24 +37,20 @@ export default function BehaviorNormal() {
   };
 
   const handlePasswordChange = (e) => {
-    console.log("handlePasswordChange");
     setPassword(e.target.value);
   };
 
   const handleUsernameChange = (e) => {
-    console.log("handleUsernamechange");
     setUsername(e.target.value);
   };
 
   const handleOnCopyEvent = (e) => {
     e.preventDefault();
-    console.log("copy not allowed");
     return false;
   };
 
   const handleOnPasteEvent = (e) => {
     e.preventDefault();
-    console.log("paste not allowed");
     return false;
   };
 
@@ -80,6 +78,16 @@ export default function BehaviorNormal() {
     });
   };
 
+  useEffect(() => {
+    fetch("/api/protected/rcv_pw", {
+      method: "get",
+    }).then((response) => {
+      response.json().then((resp) => {
+        setGenPassword(resp.password)
+      })
+    });
+  }, []);
+
   return (
     <>
       <div className="sitePage">
@@ -97,7 +105,7 @@ export default function BehaviorNormal() {
           normalerweise anmelden.
         </p>
         <p onCopy={handleOnCopyEvent}>
-          Das Passwort für diese Situation lautet: abcdefgeh
+          Das Passwort für diese Situation lautet: <span className="generated-password">{genPassword}</span>
         </p>
         <form id="behaviorNormal" action="#">
           <InputField