From b4ab74d0f01b16aa13e20d3f8ef7683d24c2b1bc Mon Sep 17 00:00:00 2001
From: Jan Pavlicek <469355@mail.muni.cz>
Date: Mon, 18 Sep 2023 13:26:10 +0200
Subject: [PATCH] gui features

---
 perun/proxygui/gui/gui.py                     |  3 +-
 .../static/images/circle-check-regular.svg    |  2 +-
 perun/proxygui/gui/static/proxygui.css        |  9 ++++
 .../proxygui/gui/templates/ConfirmLogout.html | 24 ---------
 perun/proxygui/gui/templates/Logout.html      | 24 +++------
 perun/proxygui/gui/templates/Post-logout.html | 19 +++++--
 .../proxygui/gui/templates/logout-state.html  | 50 +++++++------------
 7 files changed, 54 insertions(+), 77 deletions(-)
 delete mode 100644 perun/proxygui/gui/templates/ConfirmLogout.html

diff --git a/perun/proxygui/gui/gui.py b/perun/proxygui/gui/gui.py
index 1ea9f487..92e5850a 100644
--- a/perun/proxygui/gui/gui.py
+++ b/perun/proxygui/gui/gui.py
@@ -66,7 +66,7 @@ def construct_gui_blueprint(cfg):
         # session_services = [rp_names.get(c_id, {}).get(lang, c_id) for c_id in session_active_client_ids]
         # device_services = [rp_names.get(c_id, {}).get(lang, c_id) for c_id in device_active_client_ids]
 
-        logged_out_service = None
+        logged_out_service = "logged out"
         session_services = [
             {
                 "id": 1,
@@ -105,6 +105,7 @@ def construct_gui_blueprint(cfg):
             session_services=session_services,
             device_services=device_services,
             bootstrap_color=COLOR,
+            init_logged_out_service={ "logback_url": "https://google.com", "labels": {"cs": "CZECH SERVICE", "en": "EN_SERVICEasdasddadsadasdasdasdad"}}
         )
 
     @gui.route("/logout_state")
diff --git a/perun/proxygui/gui/static/images/circle-check-regular.svg b/perun/proxygui/gui/static/images/circle-check-regular.svg
index 34e70ee0..18422c64 100644
--- a/perun/proxygui/gui/static/images/circle-check-regular.svg
+++ b/perun/proxygui/gui/static/images/circle-check-regular.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#34ad00}</style><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="2.25em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#34ad00}</style><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>
\ No newline at end of file
diff --git a/perun/proxygui/gui/static/proxygui.css b/perun/proxygui/gui/static/proxygui.css
index 288b0eee..1f796c71 100644
--- a/perun/proxygui/gui/static/proxygui.css
+++ b/perun/proxygui/gui/static/proxygui.css
@@ -6,6 +6,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 1em;
 }
 
 .my-flex-row {
@@ -25,4 +26,12 @@
 
 .margin-top-1em {
     margin-top: 1em;
+}
+
+.margin-bot-1em {
+    margin-bottom: 1em;
+}
+
+.services-box {
+    text-align: start;
 }
\ No newline at end of file
diff --git a/perun/proxygui/gui/templates/ConfirmLogout.html b/perun/proxygui/gui/templates/ConfirmLogout.html
deleted file mode 100644
index 57d751b6..00000000
--- a/perun/proxygui/gui/templates/ConfirmLogout.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{% extends 'base.html' %}
-
-{% block contentwrapper %}
-    <div
-        class="window {% if cfg.css_framework == 'MUNI' %}framework_muni{% else %}framework_bootstrap5 bg-light{% endif %}">
-        <div
-            class="wrap{% if not cfg.css_framework == 'MUNI' %} d-flex flex-column gap-2{% endif %}">
-            <br>
-            <h4>{{ _("Do you really want to log out from") }}
-                {{ logged_out_service }}?
-            </h4>
-            <p class="{% if cfg.css_framework == 'MUNI' %}btn-wrap{% else %}d-flex flex-row justify-content-center gap-3{% endif %}">
-                <button  onclick=""
-                        class="btn btn-primary btn-s">
-                    <span class="no-uppercase">{{ _('Yes') }}</span>
-                </button>
-                <button onclick=""
-                        class="btn btn-primary btn-s">
-                    <span class="no-uppercase">{{ _('No') }}</span>
-                </button>
-            </p>
-        </div>
-    </div>
-{% endblock %}
diff --git a/perun/proxygui/gui/templates/Logout.html b/perun/proxygui/gui/templates/Logout.html
index 6df6c218..d4a108ce 100644
--- a/perun/proxygui/gui/templates/Logout.html
+++ b/perun/proxygui/gui/templates/Logout.html
@@ -6,25 +6,17 @@
         <div
             class="wrap{% if not cfg.css_framework == 'MUNI' %} d-flex flex-column gap-2{% endif %}">
             {% if logged_out_service is not none %}
-                {% if cfg.css_framework == 'MUNI' %}
-                    <h2 class="margin-top-1em">{{ _("Logout Successful") }}</h2>
-                {% else %}
-                    <h1 class="margin-top-1em">{{ _("Logout Successful") }}</h1>
-                {% endif %}
-                <h4>{{ _("You have successfully logged out from ") }}
+                <h1 class="h1 margin-top-1em">{{ _("Logout Successful") }}</h1>
+                <h2 class="h3">{{ _("You have successfully logged out from ") }}
                     {{ logged_out_service }}.
-                </h4>
+                </h2>
             {% else %}
-                {% if cfg.css_framework == 'MUNI' %}
-                    <h2 class="margin-top-1em">{{ _("Logout Page") }}</h2>
-                {% else %}
-                    <h1 class="margin-top-1em">{{ _("Logout Page") }}</h1>
-                {% endif %}
+                <h1 class="margin-top-1em">{{ _("Logout Page") }}</h1>
             {% endif %}
             <hr>
             <div class="my-flex-column">
-                <div style="text-align: start">
-                    <h4>{{ _("Would you like to log out from the services below?") }}</h4>
+                <div class="services-box">
+                    <h2 class="h4">{{ _("Would you like to log out from the services below?") }}</h2>
                     <p class="{% if cfg.css_framework == 'MUNI' %}btn-wrap{% else %}d-flex flex-row gap-3 ms-3{% endif %}">
                         <a href="{{ url_for('gui.logout_state', from_devices=False) }}"
                            class="btn btn-primary btn-s">
@@ -40,13 +32,13 @@
                             <span class="no-uppercase">{{ _('No') }}</span>
                         </a>
                     </p>
-                    <h4>{{ _("You can log out from the following services:") }}</h4>
+                    <h2 class="h5">{{ _("You can log out from the following services:") }}</h2>
                     <ul>
                         {% for service in session_services %}
                             <li>{{ service.rp_names.get(lang) }} </li>
                         {% endfor %}
                     </ul>
-                    <h4>{{ _("You can log out from these services on your other devices:") }}</h4>
+                    <h2 class="h5">{{ _("You can log out from these services on your other devices:") }}</h2>
                     <ul>
                         {% for service in device_services %}
                             <li>{{ service.rp_names.get(lang) }} </li>
diff --git a/perun/proxygui/gui/templates/Post-logout.html b/perun/proxygui/gui/templates/Post-logout.html
index b8ae1d38..d7e8904c 100644
--- a/perun/proxygui/gui/templates/Post-logout.html
+++ b/perun/proxygui/gui/templates/Post-logout.html
@@ -3,13 +3,24 @@
 {% block contentwrapper %}
     <div
         class="window {% if cfg.css_framework == 'MUNI' %}framework_muni{% else %}framework_bootstrap5 bg-light{% endif %}">
-        <br>
         <div class="my-flex-column">
             <div class="my-flex-row">
-                <img src="/static/images/circle-check-regular.svg">
-                <h2 class="margin-left-24">{{ _("Logout successful") }}</h2>
+                <h1 class="nowrap margin-top-1em">
+                    <img src="{{ url_for("static", filename="images/circle-check-regular.svg") }}">
+                    {{ _("Logout successful") }}
+                </h1>
             </div>
         </div>
-        <br>
+        {% if init_logged_out_service.logback_url is not none %}
+            <div class="my-flex-column margin-bot-1em">
+                    <h2 class="h4">{{ _("Would you like to log back to") }} {{ init_logged_out_service.labels.get(lang) }}?</h2>
+                    <p class="{% if cfg.css_framework == 'MUNI' %}btn-wrap{% else %}d-flex flex-row gap-3{% endif %}">
+                        <a href="{{ init_logged_out_service.logback_url }}"
+                          class="btn btn-primary btn-s">
+                            <span class="no-uppercase">{{ _('Log back') }}</span>
+                        </a>
+                    </p>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}
diff --git a/perun/proxygui/gui/templates/logout-state.html b/perun/proxygui/gui/templates/logout-state.html
index 521b4d98..b7ce08d7 100644
--- a/perun/proxygui/gui/templates/logout-state.html
+++ b/perun/proxygui/gui/templates/logout-state.html
@@ -5,38 +5,30 @@
         class="window {% if cfg.css_framework == 'MUNI' %}framework_muni{% else %}framework_bootstrap5 bg-light{% endif %}">
         <div
             class="wrap{% if not cfg.css_framework == 'MUNI' %} d-flex flex-column gap-2{% endif %}">
-            {% if cfg.css_framework == 'MUNI' %}
-                <h2 class="margin-top-1em">{{ _("Performing log out") }}</h2>
-            {% else %}
-                <h1 class="margin-top-1em">{{ _("Performing log out") }}</h1>
-            {% endif %}
-            <hr>
+            <h1 class="margin-top-1em">{{ _("Performing log out") }}</h1>
             <p class="{% if cfg.css_framework == 'MUNI' %}btn-wrap{% else %}d-flex flex-row justify-content-center{% endif %}">
                 <a href="{{ url_for('gui.post_logout') }}"
                    class="btn btn-primary btn-s">
                     <span class="no-uppercase">{{ _('Continue') }}</span>
                 </a>
             </p>
+            <hr>
             <div class="my-flex-column">
-                <div style="text-align: start">
+                <div class="services-box">
                     {% if session_services|length != 0 %}
-                        <h4 class="margin-top-1em">{{ _("Performing logout from following services: ") }}</h4>
+                        <h2 class="h4 margin-top-1em">{{ _("Performing logout from following services: ") }}</h2>
                         {% for service in session_services %}
                             <div id="{{ service.id }}"
                                  class="process my-flex-row">
                                 {% if not service.iframe_src %}
-                                    <img
-                                        src="/static/images/circle-exclamation-solid.svg">
+                                    <img src="{{ url_for("static", filename="images/circle-exclamation-solid.svg") }}">
                                 {% elif service.front_channel %}
-                                    <img src="/static/images/questionmark.svg">
-                                    <iframe src="{{ service.iframe_src }}"
-                                            hidden></iframe>
+                                    <img src="{{ url_for("static", filename="images/questionmark.svg") }}">
+                                    <iframe src="{{ service.iframe_src }}" hidden></iframe>
                                 {% else %}
-                                    <img src="/static/images/spinner.svg"
-                                         class="spinner">
-                                    <iframe id="iframe_{{ service.id }}"
-                                            src="{{ service.iframe_src }}"
-                                            hidden></iframe>
+                                    <img src="{{ url_for("static", filename="images/spinner.svg") }}"
+                                        class="spinner">
+                                    <iframe id="iframe_{{ service.id }}" src="{{ service.iframe_src }}" hidden></iframe>
                                 {% endif %}
                                 <div
                                     class="margin-left-12">{{ service.rp_names.get(lang) }}</div>
@@ -44,23 +36,19 @@
                         {% endfor %}
                     {% endif %}
                     {% if device_services|length != 0 %}
-                        <h4 class="margin-top-1em">{{ _("Performing logout from following services on your other devices:") }}</h4>
+                        <h2 class="h4 margin-top-1em">{{ _("Performing logout from following services on your other devices:") }}</h2>
                         {% for service in device_services %}
                             <div id="{{ service.id }}"
                                  class="process my-flex-row">
                                 {% if not service.iframe_src %}
-                                    <img
-                                        src="/static/images/circle-exclamation-solid.svg">
-                                {% elif service.front_channel %}
-                                    <img src="/static/images/questionmark.svg">
-                                    <iframe src="{{ service.iframe_src }}"
-                                            hidden></iframe>
+                                    <img src="{{ url_for("static", filename="images/circle-exclamation-solid.svg") }}">
+                                {% elif service.logout_type == "FRONTCHANNEL_LOGOUT" %}
+                                    <img src="{{ url_for("static", filename="images/questionmark.svg") }}">
+                                    <iframe src="{{ service.iframe_src }}" hidden></iframe>
                                 {% else %}
-                                    <img src="/static/images/spinner.svg"
-                                         class="spinner">
-                                    <iframe id="iframe_{{ service.id }}"
-                                            src="{{ service.iframe_src }}"
-                                            hidden></iframe>
+                                    <img src="{{ url_for("static", filename="images/spinner.svg") }}"
+                                        class="spinner">
+                                    <iframe id="iframe_{{ service.id }}" src="{{ service.iframe_src }}" hidden></iframe>
                                 {% endif %}
                                 <div
                                     class="margin-left-12">{{ service.rp_names.get(lang) }}</div>
@@ -71,4 +59,4 @@
             </div>
         </div>
     </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
-- 
GitLab