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