Merge pull request 'Add Feedback at the registration process (fix #78)' (#79) from feature/registerFeedback into main

Reviewed-on: #79

backend/src/app.py

@@ -138,16 +138,24 @@ 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
+
+    get_list_by_username = User.query.filter_by(username=username).first()
+    if get_list_by_username is 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
+    else:
+        ret = {'message': 'Benutzername {} existiert bereits. Bitte wähle einen anderen '.format(
+            username
+        )}
+        return ret, 409
 
 
 @app.route('/umfrage', methods=['POST'])

frontend/src/App.css

@@ -11,6 +11,7 @@
   --secondary: rgb(218, 218, 218);
   --third: rgb(171, 183, 183);
   --forth: rgb(255, 255, 255);
+  --error: rgb(221, 140, 18);
 }
 
 .home,
@@ -54,3 +55,7 @@ h1 {
   max-width: 60%;
   margin-bottom: 4vh;
 }
+
+.errorMessage {
+  color: var(--error);
+}

frontend/src/components/Input.css

@@ -1,5 +1,5 @@
 form {
-  max-width: 60%;
+  width: 60%;
 }
 
 .input-field {
@@ -39,4 +39,4 @@ form {
 
 .input-field label {
   font-size: 1.5em;
-}
+}

frontend/src/components/SubmitField.js

@@ -1,6 +1,5 @@
 import React from "react";
 import "./Input.css";
-import "./Button.css";
 
 function SubmitField(props) {
   const InputValue = props.LabelName;

frontend/src/components/pages/Register.js

@@ -4,21 +4,35 @@ import "../../App.css";
 import Footer from "../../Footer";
 import InputField from "../InputField";
 import SubmitField from "../SubmitField";
+import "../Input.css";
 
 export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
+  const [message, setMessage] = useState("");
+
   const onSubmitClick = (e) => {
     e.preventDefault();
     let opts = {
       username: username,
       password: password,
     };
-    console.log(opts);
     fetch("/api/register", {
       method: "post",
       body: JSON.stringify(opts),
+    }).then((response) => {
+      console.log(response);
+      if (response.status === 409) {
+        /* 
+        then is needed twice to get rid of the javascript Promise thing
+        */
+        response.json().then((resp2) => {
+          setMessage(resp2.message);
+        });
+      } else if (response.status === 200) {
+        //TODO  redirect to login #77 or #74
+      }
     });
   };
 
@@ -41,6 +55,7 @@ export default function Login() {
             onChange={handleUsernameChange}
             InputName="username"
           />
+          <p className="errorMessage">{message}</p>
           <InputField
             LabelName="Passwort"
             InputType="password"
@@ -48,7 +63,7 @@ export default function Login() {
             InputName="password"
           />
           <br />
-          <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
+          <SubmitField onClick={onSubmitClick} LabelName="Registrieren" />
         </form>
       </div>
       <Footer />