Merge pull request #44 from Simple2B/kostia/fix/user_profile_ui

Kostia/feature/user_profile_change

app/templates/user/delete_profile_modal.html

@@ -0,0 +1,20 @@
+<!-- prettier-ignore-->
+<div id="delete_profile_modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+  <div class="relative w-full max-w-2xl max-h-full">
+    <!-- Modal content -->
+    <form action="{{ url_for('user.profile_delete') }}" method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      {{ form_hidden_tag() }}
+      <!-- Modal header -->
+      <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
+        <h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Delete profile </h3>
+        <button id="modalAddCloseButton" data-modal-hide="delete_profile_modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
+      </div>
+      <!-- Modal body -->
+
+      <!-- Modal footer -->
+      <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
+        <button name="submit" type="submit" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">Confirm Deletion</button>
+      </div>
+    </form>
+  </div>
+</div>

app/templates/user/profile.html

@@ -1,5 +1,6 @@
 <!-- prettier-ignore -->
 {% extends 'base.html' %}
+{% include 'user/delete_profile_modal.html' %}
 {% block content %}
 <!-- component -->
 <section>
@@ -7,8 +8,20 @@
     <div>
       <!-- prettier-ignore -->
       <div class="w-full lg:max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow-xl dark:bg-gray-800">
+        {% if current_user.is_activated %}
           <!-- prettier-ignore -->
           <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Edit your profile</h2>
+        {% endif %}
+        {% if not current_user.is_activated %}
+          <!-- prettier-ignore -->
+          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Create your profile</h2>
+        {% endif %}
+
+          <div>
+              <!-- prettier-ignore -->
+              <label class='block mb-2 text-sm font-medium text-gray-900 dark:text-white'>Account</label>
+              <input type="text" class='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500' autocomplete="off" onCopy="return false" readonly value="{{current_user.wallet_id}}">
+          </div>
 
           <!-- prettier-ignore -->
           <form class="mt-8 space-y-6 from" role="form" action="{{ url_for('user.profile') }}" method="post" enctype="multipart/form-data">
@@ -19,13 +32,23 @@
               {{form.name(autocomplete="off", class='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500')}}
             </div>
             <!-- prettier-ignore -->
-             <div class="mb-3">
              {{form.avatar_img.label(class='block mb-2 text-sm font-medium text-gray-900 dark:text-white')}}
+             <div class="flex items-center mb-3">
+              <div>
+              {% if current_user.avatar_img %}
+                <img class=" w-14 h-14 rounded-full mr-3" src="data:image/jpeg;base64,{{ current_user.avatar_img }}" alt="user avatar">
+              {% else %}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 56 56" stroke-width="1.5" stroke="currentColor" class="w-14 h-14"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
+              {% endif %}
+              </div>
+              <div>
+              
               {{form.avatar_img(type='file', class='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', id="avatar_img",
-              value=current_user.avatar_img if current_user.avatar_img else "")}}
+              value=current_user.avatar_img if current_user.avatar_img else "")}}</div>
             </div>
             <button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save changes</button>
           </form>
+          <button type="button" data-modal-target="delete_profile_modal" data-modal-toggle="delete_profile_modal" class="text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">Delete you profile</button>
         </div>
     </div>
   </div>

app/templates/user/users.html

@@ -1,114 +0,0 @@
-<!-- prettier-ignore -->
-{% extends 'base.html' %}
-{% block content %}
-<div class="w-full relative overflow-x-auto shadow-md sm:rounded-lg mt-5 mr-64">
-  <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-    <thead
-      class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
-    >
-      <tr>
-        <th scope="col" class="px-6 py-3">#</th> <th scope="col" class="px-6 py-3">Name</th> <th scope="col" class="px-6 py-3">Active</th> <th scope="col" class="px-6 py-3">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for user in users %}
-      <tr
-        class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
-      >
-      <td class="w-4 p-4">
-        <div class="flex items-center">
-              {{ loop.index + page.skip }}
-            </div>
-        </td>
-        <td
-          scope="row"
-          class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white"
-        >
-          <div class="pl-3">
-            <div class="text-base font-semibold">{{ user.username }}</div>
-          </div>
-        </td>
-        <td class="p-4 text-base font-normal text-gray-900 whitespace-nowrap dark:text-white">
-          <div class="flex items-center">
-            <!-- prettier-ignore -->
-      {% if user.activated %}<div class="flex items-center"><div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div>  Active</div></div>{% else %}<div class="flex items-center"><div class="h-2.5 w-2.5 rounded-full bg-red-500 mr-2"></div>  Offline</div>{% endif %}
-        </td>
-        <td class="p-4 space-x-2 whitespace-nowrap">
-          <button type="button" data-target="{{user.json}}"  class="user-edit-button inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
-            Edit user
-          </button>
-          <button data-user-id={{ user.id }} type="button" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900 delete-user-btn">
-            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
-             Delete user
-          </button>
-        </td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
-
-{% if page.pages > 1 %}
-<div class="container content-center mt-3 flex bg-white dark:bg-gray-800">
-  <nav aria-label="Page navigation example" class="mx-auto">
-    <ul class="inline-flex items-center -space-x-px">
-      <li>
-        <!-- prettier-ignore -->
-        <a href="{{ url_for('user.get_all') }}?page=1&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <span class="sr-only">First</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /> </svg>
-        </a>
-      </li>
-      <li>
-        <!-- prettier-ignore -->
-        <a href="{{ url_for('user.get_all') }}?page={{page.page-1 if page.page > 1 else 1}}&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <span class="sr-only">Previous</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> </svg>
-        </a>
-      </li>
-
-      <!-- prettier-ignore -->
-      {% for p in page.pages_for_links %}
-      <li>
-        <!-- prettier-ignore -->
-        {% if p == page.page %}
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('user.get_all') }}?page={{p}}&q={{page.query}}" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{{p}}</a>
-        {% else %}
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('user.get_all') }}?page={{p}}&q={{page.query}}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{p}}</a>
-        {% endif %}
-      </li>
-      {% endfor %}
-
-      <li>
-        <!-- prettier-ignore -->
-        <a href="{{ url_for('user.get_all') }}?page={{page.page+1 if page.page < page.pages else page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <!-- prettier-ignore -->
-          <span class="sr-only">Next</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
-        </a>
-      </li>
-      <li>
-        <!-- prettier-ignore -->
-        <a href="{{ url_for('user.get_all') }}?page={{page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <!-- prettier-ignore -->
-          <span class="sr-only">Last</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</div>
-</div>
-{% endif %}
-</div>
-{% include 'user/add.html' %}
-<!-- prettier-ignore -->
-{% endblock %}
-<!-- prettier-ignore -->
-{% block scripts %}
-{% endblock %}
-
-

app/views/home.py

@@ -10,7 +10,9 @@ bp = Blueprint("home", __name__, url_prefix="/home")
 
 @bp.route("/", methods=["GET"])
 def get_all():
-    books: m.Book = m.Book.query.order_by(m.Book.id).limit(5)
+    books: m.Book = (
+        m.Book.query.filter_by(is_deleted=False).order_by(m.Book.id).limit(5)
+    )
     interpretations = (
         db.session.query(
             m.Interpretation,

app/views/user.py

@@ -1,7 +1,7 @@
 import base64
 
 from flask import Blueprint, render_template, request, flash, redirect, url_for, jsonify
-from flask_login import login_required, current_user
+from flask_login import login_required, current_user, logout_user
 from app.controllers import create_pagination
 from sqlalchemy import not_
 
@@ -98,20 +98,18 @@ def create():
         return redirect(url_for("user.get_all"))
 
 
-@bp.route("/delete/<id>", methods=["DELETE"])
+@bp.route("/profile_delete", methods=["POST"])
 @login_required
-def delete(id):
+def profile_delete():
-    u = m.User.query.filter_by(id=id).first()
+    user: m.User = db.session.get(m.User, current_user.id)
-    if not u:
+    for book in user.books:
-        log(log.INFO, "There is no user with id: [%s]", id)
+        book.is_deleted = True
-        flash("There is no such user", "danger")
+    user.is_deleted = True
-        return "no user", 404
+    log(log.INFO, "User deleted. User: [%s]", user)
-
+    user.save()
-    db.session.delete(u)
+    logout_user()
-    db.session.commit()
-    log(log.INFO, "User deleted. User: [%s]", u)
     flash("User deleted!", "success")
-    return "ok", 200
+    return redirect(url_for("home.get_all"))
 
 
 @bp.route("/search", methods=["GET"])

tests/test_users.py

@@ -7,46 +7,12 @@ from app import models as m, db
 from tests.utils import login
 
 
-def test_list(populate: FlaskClient):
-    login(populate)
-    DEFAULT_PAGE_SIZE = app.config["DEFAULT_PAGE_SIZE"]
-    response = populate.get("/user/")
-    assert response
-    assert response.status_code == 200
-    html = response.data.decode()
-    users = m.User.query.order_by(m.User.id).limit(11).all()
-    assert len(users) == 11
-    for user in users[:DEFAULT_PAGE_SIZE]:
-        assert user.username in html
-    assert users[10].username not in html
-
-    populate.application.config["PAGE_LINKS_NUMBER"] = 6
-    response = populate.get("/user/?page=6")
-    assert response
-    assert response.status_code == 200
-    html = response.data.decode()
-    assert "/user/?page=6" in html
-    assert "/user/?page=3" in html
-    assert "/user/?page=8" in html
-    assert "/user/?page=10" not in html
-    assert "/user/?page=2" not in html
-
-
 def test_create_admin(runner: FlaskCliRunner):
     res: Result = runner.invoke(args=["create-admin"])
     assert "admin created" in res.output
     assert m.User.query.filter_by(username=app.config["ADMIN_USERNAME"]).first()
 
 
-def test_delete_user(populate: FlaskClient):
-    login(populate)
-    users = m.User.query.all()
-    uc = len(users)
-    response = populate.delete("/user/delete/1")
-    assert m.User.query.count() < uc
-    assert response.status_code == 200
-
-
 def test_search_user(populate: FlaskClient, runner: FlaskCliRunner):
     _, current_user = login(populate)
     MAX_SEARCH_RESULTS = populate.application.config["MAX_SEARCH_RESULTS"]
@@ -151,3 +117,19 @@ def test_profile(client):
         follow_redirects=True,
     )
     assert b"This field is required." in res2.data
+    book = m.Book(
+        label="Book label",
+        about="Book about",
+        user_id=user.id,
+    )
+    book.save()
+    assert book
+
+    # delete_profile
+    res = client.post(
+        "/user/profile_delete",
+        follow_redirects=True,
+    )
+    assert res
+    assert user.is_deleted
+    assert user.books[0].is_deleted