DEV Community

Medea
Medea

Posted on

 

Myfe - 23/03/22

My next step was to add a profile page, but I ended up doing way more than that.


Profile Page

First of all, I added a profile route in app.py:

@app.route("/profile")
def profile():
  if getcookie("User") == False:
    return redirect("/")
  else:
    return render_template("profile.html", user=getuser(getcookie("User")))
Enter fullscreen mode Exit fullscreen mode

Then I made the profile.html file in the templates folder:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Myfe - Your Profile</title>
  </head>
  <body>
      <h1>{{user['Username']}}</h1>
      <p>Account created on: {{user['Created']}}</p>
      <p>Money: {{user['Money']}}</p>
      <p>XP: {{user['XP']}}</p>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Main Page

Then I made a better main page, so I created the index.html page in the templates folder:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Myfe - Login</title>
  </head>
  <body>
      <h1>Myfe</h1>
      {% if error != False and error != None and error != "" %}
        <p>{{error}}</p>
      {% endif %}
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

After that, instead of the index function I had before for the route /, I replaced it with the one below:

@app.route('/')
def index():
  return render_template("index.html", logged=getcookie("User"))
Enter fullscreen mode Exit fullscreen mode

Navigation Bar

After that, I wanted it to be able to render it's own navbar without me defining all the navbar link tags every time, so I created a static folder, in which I added a script.js file, which had the code below:

function navbaredit(thelist){
  const elements = {
    home : '<a class="nav-link nav-link-ltr" href="/">Home</a>',
    login: '<a class="nav-link nav-link-ltr" href="/login">Login</a>',
    signup: '<a class="nav-link nav-link-ltr" href="/signup">Signup</a>',
    profile: '<a class="nav-link nav-link-ltr" href="/profile">Profile</a>',
    logout: '<a class="nav-link nav-link-ltr" href="/logout">Logout</a>'
  };
  var thenavbar = document.getElementsByClassName("navbar")[0]
  for (let i = 0; i < thelist.length; i++) {
    thenavbar.innerHTML = thenavbar.innerHTML + elements[thelist[i]];
  }
}
Enter fullscreen mode Exit fullscreen mode

Now I wanted to link it to every HTML file, so first I made a url for the file so it was easy to access in the HTML file:

from flask import send_file
@app.route("/script.js")
def scriptjs():
  return send_file("static/script.js")
Enter fullscreen mode Exit fullscreen mode

Then I added the classes header (which contains the h1 tag of the page), navbar (which has the navbar JS code) and content (which has the rest of the code) in each HTML file. Then I linked the script.js file to every HTML file
eg:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Myfe - Login</title>
    <script src="/script.js"></script>
  </head>
  <body>
    <div class="header">
      <h1>Myfe</h1>
    </div>
    <div class="navbar">
    </div>
    <div class="content">
      {% if error != False and error != None and error != "" %}
        <p>{{error}}</p>
      {% endif %}
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Finally to actually make the navbar work, I added the jinja code in a script tag which would change the navbar depending on if the user was logged in or not:

      <script>
        {% if logged == False %}
          navbaredit(['home', 'signup', 'login'])
        {% else %}
          navbaredit(['home', 'profile', 'logout'])
        {% endif %}
      </script>
Enter fullscreen mode Exit fullscreen mode

Viewing my changes

After I ran all of that code, this was the output:

code output

At least I made some change to the game!
You can view all the code together in a GitHub repo here

Thanks for reading!

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post