From 21b88a37fd7c01e1245f742aa9cdb5bdf6ada253 Mon Sep 17 00:00:00 2001
From: "Saravanan, Mukesh (PG/T - Comp Sci & Elec Eng)" <ks01855@surrey.ac.uk>
Date: Sat, 29 Apr 2023 09:52:49 +0000
Subject: [PATCH] Replace profile.html

---
 .../application/templates/forum/profile.html  | 190 ++++++++++++------
 1 file changed, 129 insertions(+), 61 deletions(-)

diff --git a/frontend/application/templates/forum/profile.html b/frontend/application/templates/forum/profile.html
index 68afac6..db2360e 100644
--- a/frontend/application/templates/forum/profile.html
+++ b/frontend/application/templates/forum/profile.html
@@ -1,66 +1,134 @@
-<a class="btn btn--link" href="{{ url_for('frontend.get_posts') }}">Home</a>
-<br>
-<br>
+ <!DOCTYPE html>
+<html>
+  <head>
+    <title>Login Page</title>
+    <style>
+      .container {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+      .profile {
+        width: 300px;
+        padding: 20px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        margin-bottom: 20px;
+      }
+      .posts {
+        width: calc(100% - 320px);
+        height: 500px;
+        overflow-y: scroll;
+        padding-left: 20px;
+      }
+      .post {
+        margin-bottom: 20px;
+        padding: 20px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+      }
+      .post-title {
+        margin-top: 0;
+        font-weight: bold;
+      }
+      .post-content {
+        margin-bottom: 0;
+      }
+      .form-input {
+        margin-bottom: 10px;
+      }
+      .form-input input,
+      .form-input select {
+        display: block;
+        width: 80%;
+        padding: 10px;
+        font-size: 16px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+      }
+      .form-input label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+      .form-submit {
+        background-color: #2196F3;
+        color: white;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+        font-size: 16px;
+        cursor: pointer;
+      }
+      .home-btn {
+        background-color: #2196F3;
+        color: white;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+        font-size: 16px;
+        cursor: pointer;
+        margin-bottom: 20px;
+      }
+      .profile {
+          width: 45%;
+          margin-right: 20px;
+        }
+      }
 
-<div>
-  {% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
-    <ul>
-    {% for category, message in messages %}
-  <li class="{{ category }}">{{ message }}</li>
-    {% endfor %}
-    </ul>
-    {% endif %}
-  {% endwith %}
-</div>
-
-<form action="{{ url_for('frontend.display_currentuser') }}" method="POST", enctype="multipart/form-data">
+    </style>
+  </head>
 
-    {{ form.csrf_token }} 
-
-    <img class="rounded-circle" width="100" src="images/users/{{session['user'].image_url }}">
-    <br>
-    <input type="file" id="image" name="image" placeholder="Upload new profile picture">
-    <br>
-    <br>
-    {{user['first_name']}}
-    <br>
-    <input type="text" id="first_name" name="first_name" placeholder="Enter modified first name">
-    <br>
-    <br>
-    {{user['last_name']}}
-    <br>
-    <input type="text" id="last_name" name="last_name" placeholder="Enter modified last name">
-    <br>
-    <br>
-    {{user['email']}}
-    <br>
-    <br>
-    {{user['phone_number']}}
-    <br>
-    <input type="text" id="phone_number" name="phone_number" placeholder="Enter modified phone number">
+    <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a>
     <br>
     <br>
-    {{user['user_role']}}
-    {% if user['user_role'] == 'student' %}
-    <br>
-    <select id="user_role" name="user_role">
-              <option value=""></option>
-              <option value="graduate">Graduate</option>
-            </select>
-    {% endif %}
-    <br>
-    <br>
-    <input type="submit" value="Update">
-</form>
-
-{% block title %}YOUR POSTS{% endblock %}
-
-{% for post in posts %}
-
-    <div class="h4 m-0"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></div>
-    <p class="card-text">{{ post.content | safe }}</p>
-
-{% endfor %}
-
 
+    <div class="container">
+      <div class="profile">
+        <img class="rounded-circle" width="100" src="images/users/{{session['user'].image_url }}">
+        <h2>{{user['first_name']}} {{user['last_name']}}</h2>
+        <p>{{user['email']}}</p>
+        <p>{{user['phone_number']}}</p>
+        <p>{{user['user_role']}}</p>
+        <form action="{{ url_for('frontend.display_currentuser') }}" method="POST" enctype="multipart/formdata">
+{{ form.csrf_token }}
+<div class="form-input">
+<input type="file" id="image" name="image" placeholder="Upload new profile picture">
+</div>
+<div class="form-input">
+<label for="first_name">First Name:</label>
+<input type="text" id="first_name" name="first_name" value="{{user['first_name']}}">
+</div>
+<div class="form-input">
+<label for="last_name">Last Name:</label>
+<input type="text" id="last_name" name="last_name" value="{{user['last_name']}}">
+</div>
+<div class="form-input">
+<label for="phone_number">Phone Number:</label>
+<input type="text" id="phone_number" name="phone_number" value="{{user['phone_number']}}">
+</div>
+{% if user['user_role'] == 'student' %}
+<div class="form-input">
+<label for="user_role">User Role:</label>
+<select id="user_role" name="user_role">
+<option value=""></option>
+<option value="graduate">Graduate</option>
+</select>
+</div>
+{% endif %}
+<input class="form-submit" type="submit" value="Update">
+</form>
+</div>   <div class="posts" style="flex-grow: 1;">
+     <h2>YOUR POSTS</h2>
+     {% for post in posts %}
+     <div class="post">
+       <h3 class="post-title"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h3>
+       <p class="post-content">{{ post.content | safe }}</p>
+     </div>
+     {% endfor %}
+   </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
-- 
GitLab