Joseph Nuthalapati 68db1b9ee0
ui: Replace use of jQuery with plain JavaScript
sunil:

- Add explicit dependency on libjs-jquery in janus even though another
dependency brings it in.

- Fix looking for elements before DOMContentLoaded is fired. Since most of the
scripts are added at the end of the page, it might work now, but doing this
properly after DOMContentLoaded allows us to relocate the scripts to the header
of the page and add 'defer' attribute on them.

- Fix issue with IPv6 method getting selected as 'dchp' in networks.js.

- Don't focus on the first element in the form after the page loads. This is bad
for accessibility.

- Fix issue with setting the readonly/required states of IPv4/IPv6 fields on
page load.

- Password fields can now be changed to text fields and vice versa without a
problem. Simplify.

- Fix incorrect repetition of code setting 'show' class in onInvalidEvent().

- Prefer exception getting raised instead of functionality silently failing when
expected elements are not found.

- Use 'const' instead of 'var' wherever possible.

- Prefer .closest() to get to ancestors instead of .parentNode;

- Don't CSS transitions when showing an element, 'transition' CSS property does
not work on 'display' property. Instead they have to implemented on 'height',
'opacity', etc.

- Minor styling changes. Consistent casing. Use arrow styled functions.

Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
2024-12-29 14:15:04 -08:00

279 lines
12 KiB
HTML

{% load i18n %}
{% load static %}
{% load plinth_extras %}
{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}
<!doctype html>
<html class="no-js" lang="en">
<!-- the "no-js" class will be removed if Javascript is turned on -->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine and Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile Viewport Fix http://j.mp/mobileviewport & http://davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- R2D2, you know better than to trust a strange computer! -->
<meta name="robots" content="noindex, nofollow, noarchive" />
<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noodp, noimageindex, notranslate" />
<meta name="msnbot" content="noindex, nofollow, noarchive, noodp" />
<meta name="slurp" content="noindex, nofollow, noarchive, noodp, noydir" />
<meta name="application-name" content="{{ box_name }}" />
<meta name="description"
content="{% blocktrans trimmed %}
FreedomBox is a personal server designed for privacy and
data ownership. It is free software that lets you install
and manage server apps with ease.
{% endblocktrans %}" />
{% block title %}
<title>
{% if title %} {{ title }} {% else %} {{ box_name }} {% endif %}
</title>
{% endblock %}
<!-- Favicon. Works with IE >= 11 and other GUI browsers -->
<link rel="icon" type="image/png"
href="{% static 'theme/img/freedombox-logo-32px.png' %}"/>
<!-- The is the icon for iOS's Web Clip. Size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
<link rel="apple-touch-icon" sizes="57x57" href="{% static 'theme/img/apple-touch-icon-57px-precomposed.png' %}"/>
<link rel="apple-touch-icon" sizes="72x72" href="{% static 'theme/img/apple-touch-icon-72px-precomposed.png' %}"/>
<link rel="apple-touch-icon" sizes="114x114" href="{% static 'theme/img/apple-touch-icon-114px-precomposed.png' %}"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="{% static '/javascript/bootstrap5/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static '/javascript/fork-awesome/css/fork-awesome.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/css/main.css' %}"/>
{% if user_css %}
<link rel="stylesheet" href="{% static user_css %}"/>
{% endif %}
<!-- Local link to system Bootstrap JS -->
<script type="text/javascript" src="{% static '/javascript/popper.js/umd/popper.js' %}" defer></script>
<script type="text/javascript" src="{% static 'theme/js/fix.js' %}" defer></script>
<script type="text/javascript" src="{% static '/javascript/bootstrap5/js/bootstrap.bundle.min.js' %}" defer></script>
<script type="text/javascript" src="{% static 'theme/js/main.js' %}" defer></script>
{% if refresh_page_sec is not None %}
<noscript>
<meta http-equiv="refresh" content="{{ refresh_page_sec }}" />
</noscript>
{% endif %}
{% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
{% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
</head>
<body class="{%block body_class %}{%endblock%}"
{% if refresh_page_sec is not None %}
data-refresh-page-sec="{{ refresh_page_sec }}"
{% endif %}>
<div id="wrapper">
<div class="main-header fixed-top">
<div class="container">
<nav class="navbar navbar-expand-md">
{% block mainmenu_left %}
{% url 'index' as index_url %}
<a href="{{ index_url }}" class="navbar-brand
{% if index_url == active_section_url %}active{% endif %}"
title="{{ box_name }}">
<i class="fa fa-freedombox fa-2x fa-inverse" aria-hidden="true"></i>
</a>
{% endblock %}
{% block notifications_dropdown %}
<ul class="navbar-nav">
{% include "notifications-dropdown.html" %}
</ul>
{% endblock %}
{% block mainmenu_toggler %}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
{% endblock %}
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav flex-grow-1">
{% block mainmenu_left_collapse %}
{% if user.is_authenticated and user_is_admin %}
<li class="nav-item">
{% url 'index' as index_url %}
<a href="{{ index_url }}" title='{% trans " Home" %}'
class="nav-link {% if index_url == active_section_url %}
active{% endif %}">
{% trans "Home" %}
</a>
</li>
<li class="nav-item">
{% url 'apps' as apps_url %}
<a href="{{ apps_url }}" title='{% trans " Apps" %}'
class="nav-link {% if apps_url == active_section_url %}
active{% endif %}">
<span class="fa fa-th nav-icon"></span>
{% trans "Apps" %}
</a>
</li>
<li class="nav-item">
{% url 'system' as system_url %}
<a href="{{ system_url }}" title='{% trans " System" %}'
class="nav-link {% if system_url == active_section_url %}
active{% endif %}">
<span class="fa fa-cog nav-icon"></span>
{% trans "System" %}
</a>
</li>
{% endif %}
{% endblock %}
</ul>
<ul class="navbar-nav">
{% block mainmenu_right %}
{% if user.is_authenticated %}
{% include "notifications-dropdown.html" %}
{% include "help-menu.html" %}
<li id="id_user_menu" class="nav-item dropdown">
<a href="{% url 'users:edit' request.user.username %}"
class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
role="button" aria-expanded="false" aria-haspopup="true"
id="id_user_menu_link">
<i class="fa fa-user nav-icon"></i>
{{ request.user.username }}
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="id_user_menu_link">
<li>
<a id="id_user_edit_menu" class="dropdown-item"
href="{% url 'users:edit' request.user.username %}"
title="{% trans "Edit"%}">
{% trans "Edit" %}
</a>
</li>
<li>
<a id="id_change_password_menu" class="dropdown-item"
href="{% url 'users:change_password' request.user.username %}"
title="{% trans "Change password" %}">
{% trans "Change password" %}
</a>
</li>
<li class="dropdown-divider d-none d-md-block"></li>
{% if user_is_admin %}
<li>
<a class="dropdown-item" href="{% url 'power:restart' %}"
title="{% trans "Restart"%}">
{% trans "Restart" %}
</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'power:shutdown' %}"
title="{% trans "Shut down" %}">
{% trans "Shut down" %}
</a>
</li>
<li class="dropdown-divider d-none d-md-block"></li>
{% endif %}
<li>
<form class="form form-logout" method="post"
action="{% url 'users:logout' %}">
{% csrf_token %}
<input type="submit" class="dropdown-item no-running-status"
value="{% trans "Log out" %}"/>
</form>
</li>
</ul>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link"
href="{% url 'language-selection' %}?next={{ request.path|iriencode }}"
title="{% trans "Select language" %}">
<span class="fa fa-globe-w nav-icon"></span>
<span class="nav-text d-inline-block d-md-none">
{% trans "Select language" %}
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'help:about' %}"
title="{% trans "About" %}">
<span class="fa fa-question-circle nav-icon"></span>
<span class="nav-text d-inline-block d-md-none">
{% trans "About" %}
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}"
title="{% trans "Log in" %}">
<i class="fa fa-user nav-icon"></i>
{% trans "Log in" %}</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<form id="logout-nojs" class="form form-inline form-logout nav-item"
method="post" action="{% url 'users:logout' %}">
{% csrf_token %}
<input type="submit" class="nav-link no-running-status btn btn-link"
value="{% trans "Log out" %}"/>
</form>
{% endif %}
{% endblock %}
</ul>
</div>
</nav>
{% include "notifications.html" %}
</div>
</div>
{% block container %}
<div class="container content-container">
{% block content_row %}
{% include 'messages.html' %}
{% block breadcrumbs %}
{% include 'breadcrumbs.html' %}
{% endblock %}
{% block content %}
{# main content goes here #}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
<footer>
<div class="container">
{% block footer_block %}
{% endblock %}
</div>
<div class="d-none">
<a href="{% static 'jslicense.html' %}" data-jslicense="1">
{% trans "JavaScript license information" %}</a>
</div>
</footer><!--/.footer-->
</div><!--/#container-->
{% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
{% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}
</body>
</html>