From 06a534c2daeadf991a1f5fbda60988d25ad0c383 Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Sun, 8 Sep 2024 01:36:57 +0300
Subject: [PATCH] Adds profile edit page

---
 app/pages/profile.php          | 10 ++++-
 app/templates/profile-edit.php | 74 ++++++++++++++++++++++++++++++++++
 app/templates/profile.php      |  9 +++--
 public_html/static/all.css     | 14 +++++++
 4 files changed, 103 insertions(+), 4 deletions(-)
 create mode 100644 app/templates/profile-edit.php

diff --git a/app/pages/profile.php b/app/pages/profile.php
index 65c825d..fac476e 100644
--- a/app/pages/profile.php
+++ b/app/pages/profile.php
@@ -1,12 +1,20 @@
 <?php
 
+$action = $_REQUEST['action'] ?? '';
 require '../app/classes/user.php';
 
 $userObject = new User($dbWeb);
 
 $userDetails = $userObject->getUserDetails($user);
 
-include '../app/templates/profile.php';
+switch ($action) {
 
+    case 'edit':
+        include '../app/templates/profile-edit.php';
+        break;
+
+    default:
+        include '../app/templates/profile.php';
+}
 
 ?>
diff --git a/app/templates/profile-edit.php b/app/templates/profile-edit.php
new file mode 100644
index 0000000..b5c7a5d
--- /dev/null
+++ b/app/templates/profile-edit.php
@@ -0,0 +1,74 @@
+
+                <!-- user profile -->
+                <div class="card text-center w-50 mx-auto">
+
+                    <p class="h4 card-header">Profile of <?= $userDetails[0]['username'] ?></p>
+                    <div class="card-body">
+
+                        <div class="row">
+                            <p class="border rounded bg-light mb-4"><small>edit the profile fields</small></p>
+
+                            <div class="col-md-4">
+                                <div class="border" style="width: 200px; height: 200px;"><img src="" alt="avatar" /></div>
+                            </div>
+
+                            <div class="col-md-8">
+
+                                <div class="row mb-3">
+                                    <div class="col-md-4 text-end">
+                                        <label for="username" class="form-label"><small>username:</small></label>
+                                        <span class="text-danger" style="margin-right: -12px;">*</span>
+                                    </div>
+                                    <div class="col-md-8 text-start bg-light">
+                                        <input class="form-control" type="text" name="username" value="<?= $userDetails[0]['username'] ?>" required />
+                                    </div>
+                                </div>
+
+                                <div class="row mb-3">
+                                    <div class="col-md-4 text-end">
+                                        <label for="name" class="form-label"><small>name:</small></label>
+                                    </div>
+                                    <div class="col-md-8 text-start bg-light">
+                                        <input class="form-control" type="text" name="name" value="<?= $userDetails[0]['name'] ?>" />
+                                    </div>
+                                </div>
+
+                                <div class="row mb-3">
+                                    <div class="col-md-4 text-end">
+                                        <label for="email" class="form-label"><small>email:</small></label>
+                                    </div>
+                                    <div class="col-md-8 text-start bg-light">
+                                        <input class="form-control" type="text" name="email" value="<?= $userDetails[0]['email'] ?>" />
+                                    </div>
+                                </div>
+
+                                <div class="row mb-3">
+                                    <div class="col-md-4 text-end">
+                                        <label for="bio" class="form-label"><small>bio:</small></label>
+                                    </div>
+                                    <div class="col-md-8 text-start bg-light">
+                                        <textarea class="form-control" name="bio" rows="10"><?= $userDetails[0]['bio'] ?? '' ?></textarea>
+                                    </div>
+                                </div>
+
+                                <div class="row mb-3">
+                                    <div class="col-md-4 text-end">
+                                        <label for="rights" class="form-label"><small>rights:</small></label>
+                                    </div>
+                                    <div class="col-md-8 text-start bg-light">
+                                        <input class="form-control" type="text" name="rights" value="<?= $userDetails[0]['rights'] ?? '' ?>" />
+                                    </div>
+                                </div>
+
+                            </div>
+
+                                <p>
+                                    <a href="<?= $app_root ?>?page=profile" class="btn btn-primary">Cancel</a>
+                                    <a href="<?= $app_root ?>?page=profile&action=edit" class="btn btn-danger">Save</a>
+                                </p>
+
+                        </div>
+
+                    </div>
+                </div>
+                <!-- /user profile -->
diff --git a/app/templates/profile.php b/app/templates/profile.php
index 1f04def..e848511 100644
--- a/app/templates/profile.php
+++ b/app/templates/profile.php
@@ -8,7 +8,7 @@
                         <div class="row">
 
                             <div class="col-md-4">
-                                <div class="border" style="width:150px; height: 250px;"><img src="" alt="avatar" /></div>
+                                <div class="border" style="width:200px; height: 200px;"><img src="" alt="avatar" /></div>
                             </div>
 
                             <div class="col-md-8">
@@ -45,7 +45,7 @@
                                         <label class="form-label"><small>bio:</small></label>
                                     </div>
                                     <div class="col-md-8 text-start bg-light">
-                                        <?= $userDetails[0]['bio'] ?? '' ?>
+                                        <textarea class="scroll-box" rows="10"><?= $userDetails[0]['bio'] ?? '' ?></textarea>
                                     </div>
                                 </div>
 
@@ -58,9 +58,12 @@
                                     </div>
                                 </div>
 
-                                <p><a href="<?= $app_root ?>?page=profile&action=edit" class="btn btn-primary">edit</a></p>
                             </div>
 
+                                <p>
+                                    <a href="<?= $app_root ?>?page=profile&action=edit" class="btn btn-primary">Edit</a>
+                                </p>
+
                         </div>
 
                     </div>
diff --git a/public_html/static/all.css b/public_html/static/all.css
index 0819941..ed53298 100644
--- a/public_html/static/all.css
+++ b/public_html/static/all.css
@@ -157,3 +157,17 @@
 .sidebar-content a {
     text-decoration: none;
 }
+
+/* profile */
+.scroll-box {
+    width: 100%;
+    height: 250px;
+    padding: 10px;
+    border: 0;
+    background-color: #f8f9fa;
+    white-space: pre-wrap;
+    overflow-y: scroll;
+    resize: none;
+    font-family: inherit;
+    font-size: 14px;
+}