Merge pull request 'Feature/Backendcontainer' (#35) from feature/backendContainer into main

Reviewed-on: #35

backend/Dockerfile

@@ -1,19 +1,11 @@
-# For more information, please refer to https://aka.ms/vscode-docker-python
-FROM python:3.9
+FROM python
 
-EXPOSE 5000
+WORKDIR /opt/
 
-# Keeps Python from generating .pyc files in the container
-ENV PYTHONDONTWRITEBYTECODE 1
+COPY requirements.txt .
 
-# Turns off buffering for easier container logging
-ENV PYTHONUNBUFFERED 1
+RUN pip install -r requirements.txt
 
-# Install pip requirements
-ADD requirements.txt .
-RUN python -m pip install -r requirements.txt
+COPY /src .
 
-WORKDIR /app
-ADD . /app
-
-CMD ["flask", "run"]
+CMD [ "python", "app.py" ]

backend/Dockerfile.bak

@@ -0,0 +1,19 @@
+# For more information, please refer to https://aka.ms/vscode-docker-python
+FROM python:3.9
+
+#EXPOSE 5000
+
+# Keeps Python from generating .pyc files in the container
+#ENV PYTHONDONTWRITEBYTECODE 1
+
+# Turns off buffering for easier container logging
+# ENV PYTHONUNBUFFERED 1
+
+# Install pip requirements
+ADD requirements.txt .
+RUN python -m pip install -r requirements.txt
+                                                                                   
+WORKDIR /app
+ADD . /app
+
+CMD ["flask", "run"]

backend/Dockerfile.prod

@@ -0,0 +1,12 @@
+FROM python
+
+WORKDIR /opt/demo/
+
+COPY requirements.txt .
+
+RUN apt-get -y update && apt-get -y upgrade
+RUN pip install -r requirements.txt
+
+COPY /src .
+
+CMD [ "python", "main.py" ]

backend/requirements.txt

@@ -1,7 +1,11 @@
 click==7.1.2
 Flask==1.1.2
+Flask-Login==0.5.0
+Flask-SQLAlchemy==2.5.1
+greenlet==1.1.0
 itsdangerous==1.1.0
 Jinja2==2.11.3
 MarkupSafe==1.1.1
 python-dotenv==0.17.1
+SQLAlchemy==1.4.15
 Werkzeug==1.0.1

backend/src/app.py

@@ -1,8 +1,34 @@
 import time 
 from flask import Flask
 
+import os
+
 app = Flask(__name__)
 
+# Read environment variables
+if "DEBUG" in os.environ and os.environ["DEBUG"] == 'yes':
+    debug = True
+else:
+    debug = False
+if "HOST" in os.environ:
+    host = os.environ["HOST"]
+else:
+    host = '0.0.0.0'
+if "PORT" in os.environ:
+    port = int(os.environ["PORT"])
+else:
+    port = 5000
+
+
+
+@app.route('/')
+def home():
+    return "Hello World"
+
 @app.route('/time')
 def get_current_time():
     return {'time': time.time()}
+
+
+if __name__ == '__main__':
+    app.run(debug=debug, host=host, port=port)

docker-compose.yml

@@ -24,5 +24,6 @@ services:
     ports:
       - 5000:5000
     environment:
+      DEBUG: "yes"
       PORT: 5000
-      FLASK_DEBUG: 1
+      HOST: "0.0.0.0"

frontend/issues.sh

@@ -0,0 +1,30 @@
+# Labels: backend, bug, content, design, duplicate, enhancement, frontend, help wanted, invalid, question, wontfix, 
+ISSUE_TITLE="Buttons gleichmässig darstellen"
+DESC="Die Buttons sollen alle die gleiche Breite haben"
+LABELS="design,frontend,enhancement"
+DEADLINE="2021-06-23"
+tea issue create --title "${ISSUE_TITLE}" --description "${DESC}" --labels "${LABELS}" --deadline "${DEADLINE}"
+
+ISSUE_TITLE="login backend implementieren"
+DESC=""
+LABELS="backend,enhancement"
+DEADLINE="2021-06-25"
+tea issue create --title "${ISSUE_TITLE}" --description "${DESC}" --labels "${LABELS}" --deadline "${DEADLINE}"
+
+ISSUE_TITLE="registrieren implementieren backend"
+DESC=""
+LABELS="backend,enhancement"
+DEADLINE="2021-06-25"
+tea issue create --title "${ISSUE_TITLE}" --description "${DESC}" --labels "${LABELS}" --deadline "${DEADLINE}"
+
+ISSUE_TITLE="Umfrage erstellen (für neue Teilnehmer)"
+DESC=""
+LABELS="frontend,enhancement,backend"
+DEADLINE="2021-06-25"
+tea issue create --title "${ISSUE_TITLE}" --description "${DESC}" --labels "${LABELS}" --deadline "${DEADLINE}"
+
+ISSUE_TITLE="Datenerhebung der Maus und Tastatur"
+DESC=""
+LABELS="frontend,backend,enhancement"
+DEADLINE="2021-06-27"
+tea issue create --title "${ISSUE_TITLE}" --description "${DESC}" --labels "${LABELS}" --deadline "${DEADLINE}"

frontend/package.json

@@ -39,5 +39,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://127.0.0.1:5000"
+  "proxy": "http://localhost:5000"
 }

frontend/src/App.css

@@ -7,7 +7,7 @@
 
 :root {
   --primary: rgb(41, 63, 87);
-  --secondary: #fff;
+  --secondary: rgb(218,218,218);
   --third: rgb(171, 183, 183);
 }
 
@@ -28,20 +28,24 @@
   font-size: 100px;
 }
 
-.products {
-  background-image: url('images/img-9.jpg');
+.sign-up {
+  background-image: url("images/img-9.jpg");
   background-position: center;
-  background-size: fill;
+  background-size: cover;
   background-repeat: no-repeat;
   color: var(--primary);
   font-size: 100px;
 }
 
-.sign-up {
-  background-image: url('images/img-9.jpg');
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  color: #fff;
-  font-size: 100px;
+.sitePage {
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  background-color: var(--secondary);
+}
+.sitePage h1 {
+  font-size: 80px;
+  margin: 0.7em auto;
 }

frontend/src/App.js

@@ -7,6 +7,9 @@ import SignUp from "./components/pages/SignUp";
 import Ueber from "./components/pages/Ueber";
 import Lizenzen from "./components/pages/lizenzen";
 import Privacy from "./components/pages/Privacy";
+import Login from "./components/pages/Login";
+import Register from "./components/pages/Register"
+import Manual from "./components/pages/Manual";
 
 function App() {
   return (
@@ -19,6 +22,9 @@ function App() {
           <Route path="/sign-up" component={SignUp} />
           <Route path="/lizenzen" component={Lizenzen} />
           <Route path="/privacy" component={Privacy} />
+          <Route path="/login" component={Login} />
+          <Route path="/register" component={Register} />
+          <Route path="/manual" component={Manual} />
         </Switch>
       </Router>
     </>

frontend/src/Footer.js

@@ -11,7 +11,7 @@ function Footer() {
           <div className="footer-link-items">
             <h2>Informationen</h2>
             <Link to="/">Hintergrund</Link>
-            <Link to="/">Ziel dieser Webseite</Link>
+            <Link to="/manual">Wie funktioniert das?</Link>
           </div>
           <div className="footer-link-items">
             <h2>Kontakt</h2>

frontend/src/components/Input.css

@@ -0,0 +1,11 @@
+.input-field {
+    width: auto;
+}
+
+.input-field p{
+    font-size: 36px;
+}
+.input-field input {
+    width: 100%;
+    border-color: var(--primary);
+}

frontend/src/components/InputField.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Input.css";
+
+function InputField(props) {
+  return (
+    <label className="input-field">
+      <p>{props.LabelName}</p>
+      <input name={props.InputName} type={props.InputType} />
+    </label>
+  );
+}
+
+export default InputField;

frontend/src/components/Navbar.css

@@ -146,7 +146,7 @@
     background-color: transparent;
     color: var(--primary);
     padding: 14px 20px;
-    border: 1px solid #fff;
+    border: 1px solid var(--primary);
     transition: all 0.3s ease-out;
   }
 

frontend/src/components/SubmitField.js

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Input.css"
+import "./Button.css"
+
+function SubmitField(props) {
+  const InputValue = props.LabelName;
+  return (
+    <label className="input-field" className="btn btn--primary btn--medium">
+      <input type="submit" value={InputValue} />
+    </label>
+  );
+}
+
+export default SubmitField;

frontend/src/components/pages/Login.js

@@ -0,0 +1,30 @@
+import React from "react";
+import "../../App.css";
+import Footer from "../../Footer";
+import InputField from "../InputField";
+import SubmitField from "../SubmitField";
+
+export default function Login() {
+  return (
+    <>
+      <div className="sitePage">
+        <h1>Login</h1>
+        <form>
+          <InputField
+            LabelName="Benutzername / Kennung"
+            InputType=""
+            InputName="username"
+          />
+          <InputField
+            LabelName="Passwort"
+            InputType="password"
+            InputName="password"
+          />
+          <br />
+          <SubmitField LabelName="Einloggen" />
+        </form>
+      </div>
+      <Footer />
+    </>
+  );
+}

frontend/src/components/pages/Manual.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "../../App.css";
+import Footer from "../../Footer";
+
+export default function Manual() {
+  return (
+    <>
+      <h2 className="about">Anleitung / Bedienungshinweise</h2>
+      <Footer />
+    </>
+  );
+}

frontend/src/components/pages/Register.js

@@ -0,0 +1,31 @@
+import React from "react";
+import "../../App.css";
+import Footer from "../../Footer";
+import InputField from "../InputField";
+import SubmitField from "../SubmitField";
+
+export default function Login() {
+  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=""
+            InputName="username"
+          />
+          <InputField
+            LabelName="Passwort"
+            InputType="password"
+            InputName="password"
+          />
+          <br />
+          <SubmitField LabelName="Einloggen" />
+        </form>
+      </div>
+      <Footer />
+    </>
+  );
+}