Optional user data can be deleted

main.py

@@ -77,6 +77,13 @@ def fetch_user_details(uid, limit):
 
     return userData
 
+def delete_user_details(user_id):
+
+    ancestor = datastore_client.key('UserId', user_id)
+    query = datastore_client.query(kind='userDetails', ancestor=ancestor)
+    data = query.fetch()
+    datastore_client.delete_multi(data)
+
 
 @app.route('/')
 @app.route('/index')
@@ -185,9 +192,14 @@ def editGame(slug):
     data=mongoDb.get_single_game(slug)
     return render_template("editGameDetails.html", data=data)
 
-@app.route('/account') 
+@app.route('/account', methods=["GET", "POST"]) 
 def account(): 
 
+    if request.method == "POST":
+        user_id = request.form["user_id"]
+
+        delete_user_details(user_id)
+
     id_token = request.cookies.get("token")
 
     claims = google.oauth2.id_token.verify_firebase_token(
@@ -225,6 +237,12 @@ def accountInfo():
     data = mongoDb.get_games()
     return render_template('accountInfo.html', data=data, user_data=user_data) 
 
+
+@app.route('/deleteUserdata', methods=["DELETE"]) 
+def deleteExtraAccountInfo(): 
+
+    return redirect('/account') 
+
 if __name__ == '__main__':
     # This is used when running locally only. When deploying to Google App
     # Engine, a webserver process such as Gunicorn will serve the app. This

static/custom.css

@@ -2,7 +2,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap');
 
 body {
-    width: 100%;
+    width: 100vw;
     height: 100%;
     background-color: black;
     max-width: 100%;
@@ -203,8 +203,7 @@ p{
 .navbar .container-fluid .navbar-header .navbar-brand {
     color: greenyellow;
     background-repeat: no-repeat;
-    padding-left: 20px;
-    padding-right: 5px; 
+    padding-left: 35px;
     font-family: 'Exo';
     font-size: 40px;
     transform: skew(-15deg);
@@ -231,13 +230,7 @@ p{
 }
 @media screen and (max-width: 770px) {
     body {
-        background-color: black;
-    }
-    .nav {
-        display: none;
-    }
-    .conentDiv{
-        display: none;
+        width: 770px;
     }
 }
 @media (max-width: 1500px) {

static/gamesDetails.css

@@ -63,6 +63,9 @@ body{
     font-weight: bold;
     margin-top: -10px;
 }
+.badPricing{
+    color: red !important;
+}
 #rating{
     margin-top: -15px;
     font-size: 15px;

templates/account.html

@@ -10,6 +10,12 @@
         <img src="https://www.wallpapertip.com/wmimgs/80-805348_game-wallpapers-hd-collection-for-free-download-gaming.jpg"  class="coverImage">
         <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Default_pfp.svg/1200px-Default_pfp.svg.png"  class="profileImage" width="200" height="200">
         <div class="infoText">
+            {% if user_data %}
+            <form action="/account" method="POST">
+                <input type="text" id="user_id" name="user_id" value="{{user_data['user_id']}}" hidden required><br>
+                <input type="submit" value="Delete Account Details" name="deleteBtn" id="submitBtn">
+            </form>
+            {% endif %}
             {% if user_data %}
             <div>
                 <p>Name:</p><p class="dataText">{{ user_data['name'] }}</p>

templates/base.html

@@ -108,7 +108,7 @@
                         document.getElementById("edit-gameBtn").style.display='block';
                         document.getElementById("add-gameBtn").style.display='block';
                     } else {
-                        console.log("User not authorised to use CRUD")
+                        console.log("User not authorised to use CRUD")      
                     }
                 } else {
                     console.log("No user signed in")

templates/games.html

@@ -19,7 +19,7 @@ <h1>Add Game</h1>
     <label for="gameImage">Game Image:</label>
     <input type="url" id="gameImage" name="gameImage" required><br>
     <label for="gamePrice">Game Price:</label>
-    <input type="number" step="0.01" id="gamePrice" name="gamePrice" required><br>
+    <input type="text" id="gamePrice" name="gamePrice" required><br>
     <label for="gameDescription">Game Description: (Type 'newline' when you want to start a new paragraph/line in description)</label>
     <textarea type="text" id="gameDescription" name="gameDescription" required></textarea><br>
     <input type="submit" value="Add Game" name="addbtn" id="submitBtn">

templates/gamesDetails.html

@@ -5,7 +5,7 @@
 {% set active_page = "games" %} 
 {% block body %}
 <div class="conentDiv-games">   
-    <iframe id="vid" src="https://www.youtube.com/embed/Wqsg2vWHZBM?autoplay=1&mute=1&showinfo=0?modestbranding=0&controls=0" frameborder="0" allow="autoplay"></iframe>                             
+    <!-- <iframe id="vid" src="https://www.youtube.com/embed/Wqsg2vWHZBM?autoplay=1&mute=1&showinfo=0?modestbranding=0&controls=0" frameborder="0" allow="autoplay"></iframe>                              -->
     <div class="mainDiv-game">
         {% for game in data %}
             <div>
@@ -16,8 +16,10 @@ <h1 hidden="true" id="slug">{{ game.slug }}</h1>
                 <h1 id="gameName">{{ game.name }}</h1>
                 {% if game.price == "FREE" %}
                     <p id="price">{{ game.price }}</p>
-                {% else %}
+                {% elif game.price == number %}
                     <p id="price">£{{ game.price }}</p>
+                {% else %}
+                <p id="price" class="badPricing">Error, bad pricing</p>
                 {% endif %}
                 <p id="rating">Rating: {{ game.rating }}/5 </p>
                 <p id="About">{{ game.description }}</p>

templates/index.html

@@ -1,80 +1,26 @@
 <!doctype html>
-<!--
- Copyright 2021 Google LLC
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-      http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
+<!-- 
+  Main page at the front of the web application, authenticates users, 
+  using firebase authentication and firebase-authui
+ -->
 <html>
   <head>
     <title>Advanced Developmeny Coursework</title>
-
-    <!-- See https://github.com/firebase/firebaseui-web. -->
-    <!-- [START gae_python38_auth_init_firebase] -->
-    <!-- [START gae_python3_auth_init_firebase] -->
-    <!-- *******************************************************************************************
-        * TODO(DEVELOPER): Paste the initialization snippet from:
-        * http://console.firebase.google.com > Overview > Add Firebase to your web app.
-        ***************************************************************************************** -->
-    <!-- [END gae_python3_auth_init_firebase] -->
-    <!-- [END gae_python38_auth_init_firebase] -->
-
-    <!-- [START gae_python38_auth_include_firebaseui] -->
-    <!-- [START gae_python3_auth_include_firebaseui] -->
     <script src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
     <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css">
-    <!-- [END gae_python3_auth_include_firebaseui] -->
-    <!-- [END gae_python38_auth_include_firebaseui] -->
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <!-- <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='script.js') }}"> -->
-
   </head>
   <body>
-
     <div class="logoDiv">
       <h1 class="brand">GameZone</h1><h1 class="brand-sub">Game Store</h1>
     </div>
-
-    <!-- [START gae_python38_auth_firebase_html] -->
-    <!-- [START gae_python3_auth_firebase_html] -->
     <div id="firebaseui-auth-container"></div>
-
-    <div id="login-info" hidden=true>
-      <h2>Login info:</h2>
-      {% if user_data %}
-        <dl>
-          <dt class="dt">Name</dt><dd class="dt">{{ user_data['name'] }}</dd>
-          <dt class="dt">Email</dt><dd class="dt">{{ user_data['email'] }}</dd>
-          <dt class="dt">User ID</dt><dd class="dt">{{ user_data['user_id'] }}</dd>
-          <dt class="dt">Last 10 visits</dt><dd>
-      {% for time in times %}
-              <p>{{ time['timestamp'] }}</p>
-            {% endfor %} </dd>
-        </dl>
-      {% elif error_message %}
-        <p>Error: {{ error_message }}</p>
-      {% endif %}
-    </div>
-    <!-- [END gae_python3_auth_firebase_html] -->
-    <!-- [END gae_python38_auth_firebase_html] -->
   </body>
   <!-- The core Firebase JS SDK is always required and must be listed first -->
   <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-app.js"></script>
-
   <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-auth.js"></script>
-
-  <!-- TODO: Add SDKs for Firebase products that you want to use
-      https://firebase.google.com/docs/web/setup#available-libraries -->
-
   <script>
-    // Your web app's Firebase configuration
-    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
+    // Firebase configuration
     var firebaseConfig = {
           apiKey: "AIzaSyCJIw3wmaEl0dEb9wQsi8cGsQyEMJVPe9Q",
           authDomain: "ad-364515.firebaseapp.com",
@@ -96,10 +42,8 @@ <h2>Login info:</h2>
     };
     firebase.auth().onAuthStateChanged(function(user) {
     if (user) {
-        // Show user signed in screen. Reset if user just signed in. (Single page app)
-        document.getElementById('login-info').style.display = 'block';
-        document.getElementById('sign-out').style.display = 'block';
         console.log(`Signed in as ${user.displayName} ${user.email}`);
+        window.location.replace("/home");
         user.getIdToken().then(function (token) {
         // Add the token to the browser's cookies. The server will then be
         // able to verify the token against the API.