From 413d46095313f6913919cd991e9937bc800eaf36 Mon Sep 17 00:00:00 2001
From: mattlee24 <matthew.d.lee@hotmail.co.uk>
Date: Sat, 19 Nov 2022 18:22:35 +0000
Subject: [PATCH] Firebase Authentication Working

---
 .gcloudignore                 |  19 ++++
 app.yaml                      |  25 ++++++
 index.yaml                    |  21 +++++
 main.py                       |  95 ++++++++++++++++++++
 requirements.txt              |   4 +
 static/custom.css             | 158 ++++++++++++++++++++++++++++++++++
 static/script.js              |  72 ++++++++++++++++
 static/style.css              |   3 +
 templates/404.html            |  10 +++
 templates/about.html          |   5 ++
 templates/base.html           |  60 +++++++++++++
 templates/home.html           |  71 +++++++++++++++
 templates/index.html          |  89 +++++++++++++++++++
 templates/login.html          |  21 +++++
 templates/register.html       |  21 +++++
 templates/submitted_form.html |  26 ++++++
 16 files changed, 700 insertions(+)
 create mode 100644 .gcloudignore
 create mode 100644 app.yaml
 create mode 100644 index.yaml
 create mode 100644 main.py
 create mode 100644 requirements.txt
 create mode 100644 static/custom.css
 create mode 100644 static/script.js
 create mode 100644 static/style.css
 create mode 100644 templates/404.html
 create mode 100644 templates/about.html
 create mode 100644 templates/base.html
 create mode 100644 templates/home.html
 create mode 100644 templates/index.html
 create mode 100644 templates/login.html
 create mode 100644 templates/register.html
 create mode 100644 templates/submitted_form.html

diff --git a/.gcloudignore b/.gcloudignore
new file mode 100644
index 0000000..603f0b6
--- /dev/null
+++ b/.gcloudignore
@@ -0,0 +1,19 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Python pycache:
+__pycache__/
+# Ignored by the build system
+/setup.cfg
\ No newline at end of file
diff --git a/app.yaml b/app.yaml
new file mode 100644
index 0000000..1283e5e
--- /dev/null
+++ b/app.yaml
@@ -0,0 +1,25 @@
+#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.
+runtime: python39
+
+handlers: 
+ # This configures Google App Engine to serve the files in the app's static
+ # directory.
+- url: /static
+  static_dir: static
+ # This handler routes all requests not caught above to your main app. It is
+ # required when static routes are defined, but can be omitted (along with
+ # the entire handlers section) when there are no static files defined.
+- url: /.*
+  script: auto
\ No newline at end of file
diff --git a/index.yaml b/index.yaml
new file mode 100644
index 0000000..b20da30
--- /dev/null
+++ b/index.yaml
@@ -0,0 +1,21 @@
+# 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.
+
+indexes:
+
+  - kind: visit
+    ancestor: yes
+    properties:
+    - name: timestamp
+      direction: desc
\ No newline at end of file
diff --git a/main.py b/main.py
new file mode 100644
index 0000000..c16d488
--- /dev/null
+++ b/main.py
@@ -0,0 +1,95 @@
+import datetime
+
+from flask import Flask, render_template, request
+from google.auth.transport import requests
+from google.cloud import datastore
+import google.oauth2.id_token
+
+firebase_request_adapter = requests.Request()
+
+# [START gae_python38_datastore_store_and_fetch_user_times]
+# [START gae_python3_datastore_store_and_fetch_user_times]
+datastore_client = datastore.Client()
+
+# [END gae_python3_datastore_store_and_fetch_user_times]
+# [END gae_python38_datastore_store_and_fetch_user_times]
+app = Flask(__name__)
+
+
+# [START gae_python38_datastore_store_and_fetch_user_times]
+# [START gae_python3_datastore_store_and_fetch_user_times]
+def store_time(email, dt):
+    entity = datastore.Entity(key=datastore_client.key('User', email, 'visit'))
+    entity.update({
+        'timestamp': dt
+    })
+
+    datastore_client.put(entity)
+
+
+def fetch_times(email, limit):
+    ancestor = datastore_client.key('User', email)
+    query = datastore_client.query(kind='visit', ancestor=ancestor)
+    query.order = ['-timestamp']
+
+    times = query.fetch(limit=limit)
+
+    return times
+
+
+@app.route('/')
+def root():
+    # Verify Firebase auth.
+    id_token = request.cookies.get("token")
+    error_message = None
+    claims = None
+    times = None
+
+    if id_token:
+        try:
+            # Verify the token against the Firebase Auth API. This example
+            # verifies the token on each page load. For improved performance,
+            # some applications may wish to cache results in an encrypted
+            # session store (see for instance
+            # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
+            claims = google.oauth2.id_token.verify_firebase_token(
+                id_token, firebase_request_adapter)
+
+            store_time(claims['email'], datetime.datetime.now())
+            times = fetch_times(claims['email'], 10)
+
+        except ValueError as exc:
+            # This will be raised if the token is expired or any other
+            # verification checks fail.
+            error_message = str(exc)
+
+    return render_template(
+        'index.html',
+        user_data=claims, error_message=error_message, times=times)
+
+@app.route('/home') 
+def home(): 
+ return render_template('home.html') 
+
+@app.route('/about') 
+def about(): 
+ return render_template('about.html') 
+
+@app.route('/register') 
+def register(): 
+ return render_template('register.html') 
+
+@app.route('/login') 
+def login(): 
+ return render_template('login.html') 
+
+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
+    # can be configured by adding an `entrypoint` to app.yaml.
+
+    # Flask's development server will automatically serve static files in
+    # the "static" directory. See:
+    # http://flask.pocoo.org/docs/1.0/quickstart/#static-files. Once deployed,
+    # App Engine itself will serve those files as configured in app.yaml.
+    app.run(host='127.0.0.1', port=8080, debug=True)
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..5308a30
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,4 @@
+Flask==2.0.1
+google-cloud-datastore==2.7.1
+google-auth==1.31.0
+requests==2.26.0
\ No newline at end of file
diff --git a/static/custom.css b/static/custom.css
new file mode 100644
index 0000000..3587718
--- /dev/null
+++ b/static/custom.css
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Exo:wght@900&display=swap');
+
+body {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+}
+p { 
+    font-size: 1.2em;   
+} 
+.starter-template { 
+    text-align: center; 
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+.topDiv-home{
+    text-align: center;
+}
+.topDiv-home h1{
+    color: white;
+    font-weight: bold;
+    font-size: 55px;
+}
+.topDiv-home p{
+    color: white;
+}
+.topDiv-home a{
+    color: greenyellow;
+    font-size: 20px;
+    font-weight: bold;
+}
+.topDiv-home a:hover{
+    cursor: pointer;
+}
+.topContainer-home{
+    display: flex;
+    margin-top: 5rem;
+    margin-bottom: 10rem;
+}
+.mainDiv-home-pic {
+    flex: 2;
+}
+.mainDiv-home-text {
+    flex: 1;
+    padding-right: 15rem;
+    padding-left: 3rem;
+    padding-top: 1rem;
+    padding-bottom: 3rem;
+    margin-right: -10rem;
+    background-color: rgb(40, 41, 43);
+    color: white;
+    align-self: center;
+}
+.mainDiv-home-text h1{
+    font-weight: bold;
+}
+.mainDiv-home-pic-2 {
+    flex: 2;
+}
+.mainDiv-home-text-2 {
+    flex: 1;
+    padding-left: 15rem;
+    padding-right: 3rem;
+    padding-top: 1rem;
+    padding-bottom: 3rem;
+    margin-left: -10rem;
+    background-color: rgb(40, 41, 43);
+    color: white;
+    align-self: center;
+    text-align: right;
+}
+.mainDiv-home-text h1{
+    font-weight: bold;
+}
+.secondDiv-home {
+    height: 300px;
+    width: 45%;
+    float: left;
+    position: relative;
+    margin: auto;
+    background-color: aliceblue;
+    -webkit-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    -moz-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    border-radius: 25px;
+}
+.thirdDiv-home {
+    height: 300px;
+    width: 45%;
+    position: absolute;
+    float: left;
+    background-color: aliceblue;
+    -webkit-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    -moz-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    border-radius: 25px;
+}
+.pageTitle {
+    position: absolute; 
+    margin-top: 10rem;
+    color: white;
+    font-weight: bold;
+}
+.coverImage {
+    width: 100%;
+    height: 100%;
+}
+.navbar {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    background-color: rgb(40, 41, 43);
+    border-width: 0;
+    -webkit-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    -moz-box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+    box-shadow: 0px 9px 8px -4px rgba(0,0,0,0.48);
+}
+.navbar .collapse ul li a {
+    color: rgb(255, 255, 255);
+    font-size: 15;
+    font-weight: bold;
+}
+.navbar .collapse ul .active .navlink {
+    background-color: rgb(83, 79, 77);
+    color: rgb(255, 255, 255);
+    font-size: 15;
+    font-weight: bold;
+}
+.navbar .collapse .navbar-header .navbar-brand {
+    color: rgb(255, 255, 255);
+    background-repeat: no-repeat;
+    padding-left:10px;
+    padding-right:10px;
+    font-family: 'Exo';
+    font-size: 40px;
+    transform: skew(-15deg);
+    letter-spacing: 0.01em;
+}
+.navbar .collapse .navbar-header .navbar-brand-sub {
+    font-family: 'Mr Dafoe';
+    font-size: 20px;
+    color: white;
+    text-shadow: 0 0 0.05em #fff, 0 0 0.2em black, 0 0 0.3em black;
+    transform: rotate(-2deg);
+    position: absolute;
+    top: 2.5rem;
+    left: 20rem;
+    letter-spacing: 0.1em;
+    text-decoration: underline;
+    text-decoration-color: white;    
+}
+.navbar .collapse ul {
+    position: relative;
+    left: 50%;
+    transform: translatex(-50%);
+}
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..c950fcb
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2018, 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.
+ */
+ 
+// [START gae_python38_log]
+'use strict';
+
+window.addEventListener('load', function () {
+  document.getElementById('sign-out').onclick = function () {
+    firebase.auth().signOut();
+  };
+
+  // FirebaseUI config.
+  var uiConfig = {
+    signInSuccessUrl: '/',
+    signInOptions: [
+      // Comment out any lines corresponding to providers you did not check in
+      // the Firebase console.
+      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+      firebase.auth.EmailAuthProvider.PROVIDER_ID,
+      //firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+      //firebase.auth.TwitterAuthProvider.PROVIDER_ID,
+      //firebase.auth.GithubAuthProvider.PROVIDER_ID,
+      //firebase.auth.PhoneAuthProvider.PROVIDER_ID
+
+    ],
+    // Terms of service url.
+    tosUrl: '<your-tos-url>'
+  };
+
+  firebase.auth().onAuthStateChanged(function (user) {
+    if (user) {
+      // User is signed in, so display the "sign out" button and login info.
+      document.getElementById('sign-out').hidden = false;
+      document.getElementById('login-info').hidden = false;
+      console.log(`Signed in as ${user.displayName} (${user.email})`);
+      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.
+        // SECURITY NOTE: As cookies can easily be modified, only put the
+        // token (which is verified server-side) in a cookie; do not add other
+        // user information.
+        document.cookie = "token=" + token;
+      });
+    } else {
+      // User is signed out.
+      // Initialize the FirebaseUI Widget using Firebase.
+      var ui = new firebaseui.auth.AuthUI(firebase.auth());
+      // Show the Firebase login button.
+      ui.start('#firebaseui-auth-container', uiConfig);
+      // Update the login state indicators.
+      document.getElementById('sign-out').hidden = true;
+      document.getElementById('login-info').hidden = true;
+      // Clear the token cookie.
+      document.cookie = "token=";
+    }
+  }, function (error) {
+    console.log(error);
+    alert('Unable to log in: ' + error)
+  });
+});
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..b54e9fc
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,3 @@
+.pagetitle { 
+    color: #800080; 
+} 
\ No newline at end of file
diff --git a/templates/404.html b/templates/404.html
new file mode 100644
index 0000000..9298f25
--- /dev/null
+++ b/templates/404.html
@@ -0,0 +1,10 @@
+{% extends "base.html" %} 
+{% block content %} 
+<div class="container">
+ <div>
+ <h3> 404 - <b>{{ request.path }}</b> </h3>
+ <p> The requested URL was not found on the server. If you entered the URL ma
+nually please check your spelling and try again. </p>
+ </div>
+</div><!-- /.container -->
+{% endblock %} 
diff --git a/templates/about.html b/templates/about.html
new file mode 100644
index 0000000..61a8dff
--- /dev/null
+++ b/templates/about.html
@@ -0,0 +1,5 @@
+{% extends "base.html" %} 
+{% set active_page = "about" %} 
+{% block body %} 
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis lorem rhoncus, condimentum massa eget, semper sapien. Suspendisse vitae magna venenatis, iaculis odio eu, cursus neque. Vivamus imperdiet sapien velit, nec venenatis dolor laoreet in. Phasellus dictum ac felis eget lacinia. Vivamus porttitor magna justo, vitae mattis nisi fermentum ut. Curabitur vehicula augue erat, quis pellentesque risus tristique tempus. Nullam tempor purus massa, sollicitudin suscipit massa pretium sed. Maecenas ut dui nec nulla tristique malesuada nec quis nibh. Sed nibh sapien, tempor finibus rhoncus sit amet, gravida at eros. Nunc tempor lacinia eros non euismod. Sed maximus leo hendrerit, lacinia massa vel, tincidunt metus. Quisque magna lorem, sollicitudin nec dictum at, finibus quis felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse non ullamcorper libero. Aliquam erat volutpat.</p>
+{% endblock %} 
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..3897b3e
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="description" content="Advanced Development Coursework">
+        <meta name="author" content="Xin Lu">
+        <!--<link rel="icon" href="TODO">-->
+        <!-- Favicons (http://realfavicongenerator.net) -->
+        <title>Advanced Development Coursework</title>
+        <!-- Bootstrap core CSS -->
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+        <!-- Custom styles -->
+        <link href="static/custom.css" rel="stylesheet">
+    </head>
+    <!-- Jinja2 stuff related to generating nav and setting active state. Add more pages here! -->
+    {% set navigation_bar = [('/', 'home', 'Home'), ('/about', 'about', 'About')] -%} 
+    {% set navigation_bar_right = [('/register', 'register', 'Sign Up'), ('/login', 'login', 'Login')] -%} 
+    <body>
+        <nav class="navbar navbar-inverse">
+            <div class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                    {% for href, id, caption in navigation_bar %} 
+                    {% if id == active_page %} 
+                    <li class="active"><a class="navlink" href="{{ href|e }}">{{ caption|e }}</a></li>
+                    {% else %} 
+                    <li>
+                    <a href="{{ href|e }}">{{ caption|e }}</a>
+                    </li>
+                    {% endif %} 
+                    {% endfor %} 
+                    <div class="navbar-header">
+                        <a class="navbar-brand">GameZone</a>
+                        <a class="navbar-brand-sub">Game Store</a>
+                    </div>
+                    {% for href, id, caption in navigation_bar_right %} 
+                    {% if id == active_page %} 
+                    <li class="active"><a class="navlink" href="{{ href|e }}">{{ caption|e }}</a></li>
+                    {% else %} 
+                    <li>
+                    <a href="{{ href|e }}">{{ caption|e }}</a>
+                    </li>
+                    {% endif %} 
+                    {% endfor %} 
+                </ul>
+            </div>
+        </nav>    
+        <main role="main" class="container">
+            <!-- Content -->
+            {% block body %} 
+            {% endblock %} 
+        </main><!-- /.container -->
+        <!-- Bootstrap core JavaScript
+        ================================================== -->
+        <!-- Placed at the end of the document so the pages load faster -->
+        <script src="https://code.jquery.com/jquery3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    </body>    
+</html>
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
new file mode 100644
index 0000000..609a70a
--- /dev/null
+++ b/templates/home.html
@@ -0,0 +1,71 @@
+{% extends "base.html" %} 
+{% set active_page = "home" %} 
+{% block body %} 
+<div class="topDiv-home">
+    <h1> All Your Favourtie Games, In One Place </h1>
+    <p>Games featuring the Optimised for Xbox Series X|S 
+        icon will showcase unparalleled load-times, heightened 
+        visuals and steadier framerates at up to 120FPS. These include new 
+        titles built natively using the Xbox Series X|S development 
+        environment as well as previously released titles that have been 
+        rebuilt specifically for Xbox Series X|S.</p>
+    <a>See more <span class="glyphicon glyphicon-chevron-right"></span></a>
+</div>
+<div class="topContainer-home">
+    <div class="mainDiv-home-pic">
+        <img class="coverImage" src="https://wallpapercave.com/wp/wp11162731.jpg">
+    </div>
+    <div class="mainDiv-home-text">
+        <h1>All Your Favourtie Games, In One Place</h1>
+        <p>Games featuring the Optimised for Xbox Series X|S 
+            icon will showcase unparalleled load-times, heightened 
+            visuals and steadier framerates at up to 120FPS. These include new 
+            titles built natively using the Xbox Series X|S development 
+            environment as well as previously released titles that have been 
+            rebuilt specifically for Xbox Series X|S.</p>
+    </div>
+</div>
+<div class="topContainer-home">
+    <div class="mainDiv-home-text-2">
+        <h1>All Your Favourtie Games, In One Place</h1>
+        <p>Games featuring the Optimised for Xbox Series X|S 
+            icon will showcase unparalleled load-times, heightened 
+            visuals and steadier framerates at up to 120FPS. These include new 
+            titles built natively using the Xbox Series X|S development 
+            environment as well as previously released titles that have been 
+            rebuilt specifically for Xbox Series X|S.</p>
+    </div>
+    <div class="mainDiv-home-pic-2">
+        <img class="coverImage" src="https://s25.q4cdn.com/103200307/files/doc_multimedia/NFS_Standard_Master_MF_220825_16_9_Plan_C_Flat_Logo.jpg">
+    </div>
+</div>
+<div class="topContainer-home">
+    <div class="mainDiv-home-pic">
+        <img class="coverImage" src="https://wallpapercave.com/wp/wp1809647.jpg">
+    </div>
+    <div class="mainDiv-home-text">
+        <h1>All Your Favourtie Games, In One Place</h1>
+        <p>Games featuring the Optimised for Xbox Series X|S 
+            icon will showcase unparalleled load-times, heightened 
+            visuals and steadier framerates at up to 120FPS. These include new 
+            titles built natively using the Xbox Series X|S development 
+            environment as well as previously released titles that have been 
+            rebuilt specifically for Xbox Series X|S.</p>
+    </div>
+</div>
+<div class="topContainer-home">
+    <div class="mainDiv-home-text-2">
+        <h1>All Your Favourtie Games, In One Place</h1>
+        <p>Games featuring the Optimised for Xbox Series X|S 
+            icon will showcase unparalleled load-times, heightened 
+            visuals and steadier framerates at up to 120FPS. These include new 
+            titles built natively using the Xbox Series X|S development 
+            environment as well as previously released titles that have been 
+            rebuilt specifically for Xbox Series X|S.</p>
+    </div>
+    <div class="mainDiv-home-pic-2">
+        <img class="coverImage" src="https://assets.xboxservices.com/assets/fa/9a/fa9af5ee-9854-4995-b0cf-e281fc832069.jpg?n=FIFA-23_GLP-Page-Hero-1084_1920x1080.jpg">
+    </div>
+</div>
+
+{% endblock %} 
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..828065d
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,89 @@
+<!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.
+-->
+
+<html>
+<head>
+  <title>Datastore and Firebase Auth Example</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] -->
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
+  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+
+</head>
+<body>
+
+<!-- [START gae_python38_auth_firebase_html] -->
+<!-- [START gae_python3_auth_firebase_html] -->
+<div id="firebaseui-auth-container"></div>
+
+<button id="sign-out" hidden=true>Sign Out</button>
+
+<div id="login-info" hidden=true>
+  <h2>Login info:</h2>
+  {% if user_data %}
+    <dl>
+      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
+      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
+      <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
+ var firebaseConfig = {
+        apiKey: "AIzaSyCJIw3wmaEl0dEb9wQsi8cGsQyEMJVPe9Q",
+        authDomain: "ad-364515.firebaseapp.com",
+        projectId: "ad-364515",
+        storageBucket: "ad-364515.appspot.com",
+        messagingSenderId: "998989263237",
+        appId: "1:998989263237:web:46ccb72401634a2e4b14ec"
+    };
+  // Initialize Firebase
+  firebase.initializeApp(firebaseConfig);
+</script>
+
+
+</html>
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..c00af1d
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %} 
+{% set active_page = "login" %} 
+{% block body %}
+    <div id="main">
+        <form action="login.html" method="post">
+            <div class="container">
+                <label for="uname"><b>Username</b></label>
+                <input type="text" placeholder="Enter Username" name="uname" required>
+            
+                <label for="psw"><b>Password</b></label>
+                <input type="password" placeholder="Enter Password" name="psw" required>
+            
+                <button type="submit">Login</button>
+            </div>
+            <div class="container" style="background-color:#f1f1f1">
+                <button type="button" class="cancelbtn">Cancel</button>
+                <span class="psw">Forgot <a href="#">password?</a></span>
+            </div>
+        </form>
+    </div> 
+{% endblock %} 
\ No newline at end of file
diff --git a/templates/register.html b/templates/register.html
new file mode 100644
index 0000000..b498f6f
--- /dev/null
+++ b/templates/register.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %} 
+{% set active_page = "register" %} 
+{% block body %} 
+    <div class="starter-template">
+        <h1>Register your informaiton </h1>
+        <p class="lead">Please type your information </i></p>
+    </div>
+    <div id="main">
+        <form method="post" action="{{ url_for('submitted_form') }}">
+            <label for="name">Name:</label>
+            <input type="text" name="name"><br />
+            <label for="email">Email address:</label>
+            <input type="email" name="email"><br />
+            <label for="site_url">Website URL:</label>
+            <input type="url" name="site_url"><br />
+            <label for="comments">Comments:</label>
+            <textarea name="comments"></textarea><br />
+            <input type="submit">
+        </form>
+    </div>
+{% endblock %} 
\ No newline at end of file
diff --git a/templates/submitted_form.html b/templates/submitted_form.html
new file mode 100644
index 0000000..a71ef43
--- /dev/null
+++ b/templates/submitted_form.html
@@ -0,0 +1,26 @@
+{% extends "base.html" %} 
+{% block content %} 
+<div class="starter-template">
+    <head>
+        <title>Submitted form</title>
+        <link rel="stylesheet" type="text/css" href="/static/style.css">
+    </head>
+    <body>
+        <div id="container">
+            <div class="pagetitle">
+                <h1>Form submitted</h1>
+            </div>
+            <div id="main">
+                <p>Thanks for your submission, {{name}}!</p>
+                <p>Here's a review of the information that you sent:</p>
+                <p>
+                <strong>Name</strong>: {{name}} <br>
+                <strong>Email</strong>: {{email}} <br>
+                <strong>Website URL</strong>: {{site}} <br>
+                <strong>Comments</strong>: {{comments}} 
+                </p>
+            </div>
+        </div>
+    </body>
+</div>
+{% endblock %}
\ No newline at end of file