161 lines
6.6 KiB
Plaintext
161 lines
6.6 KiB
Plaintext
% my $lang = $self->languages;
|
|
% $lang =~ s/-(.*)/_\U$1/;
|
|
<!DOCTYPE html>
|
|
<html lang="<%= $lang %>">
|
|
<head>
|
|
<title><%= config('instance_name') %></title>
|
|
<meta charset="utf-8">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<link rel="icon" type="image/png" href="<%= url_for('/img/favicon.png') %>">
|
|
<link rel="icon" sizes="128x128" href="<%= url_for('/img/lufi128.png') %>">
|
|
<link rel="icon" sizes="196x196" href="<%= url_for('/img/lufi196.png') %>">
|
|
<link rel="apple-touch-icon" href="<%= url_for('/img/lufi60.png') %>">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="<%= url_for('/img/lufi76.png') %>">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="<%= url_for('/img/lufi120.png') %>">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="<%= url_for('/img/lufi152.png') %>">
|
|
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="<%= url_for('/img/lufi128.png') %>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preload" href="/css/lufi.css" as="style">
|
|
<link rel="stylesheet" href="/css/lufi.css">
|
|
</head>
|
|
<body>
|
|
<header role="banner">
|
|
<nav id="main-menu" role="navigation">
|
|
<a href="<%= url_for('/') %>" class="instance-name"><img class="logo" src="<%= url_for('/img/lufi.svg') %>" alt="Lufi logo"><%= config('instance_name') %></a>
|
|
<ul>
|
|
<li><a href="<%= $self->config('report') %>" class="menu-item"><%= l('Report file') %></a></li>
|
|
|
|
% if ((!defined(config('ldap')) && !defined(config('htpasswd')) && !defined(config('auth_headers'))) || is_user_authenticated()) {
|
|
<li<%== ' class="active"' if (current_route eq 'index') %>><a href="<%= url_for('/') %>" class="menu-item"><%= l('Upload files') %></a></li>
|
|
<li<%== ' class="active"' if (current_route eq 'files') %>><a href="<%= url_for('/files') %>" class="menu-item"><%= l('My files') %></a></li>
|
|
% if ((defined config('ldap') || defined config('auth_headers')) && defined config('invitations')) {
|
|
<li<%== ' class="active"' if (current_route eq 'invite') %>><a href="<%= url_for('/invite') %>" class="menu-item"><%= l('Invite a guest') %></a></li>
|
|
<li<%== ' class="active"' if (current_route eq 'invite/list') %>><a href="<%= url_for('/invite/list') %>" class="menu-item"><%= l('My invitations') %></a></li>
|
|
% }
|
|
% } else {
|
|
<li><a href="<%= url_for('/login') %>" class="menu-item"><%= l('Signin') %></a></li>
|
|
% }
|
|
|
|
<li>
|
|
<label for="menu-language" class="hidden"><%= l('Language') %></label>
|
|
<select class="menu-item" id="menu-language" aria-label="<%= l('Language') %>">
|
|
<option value="" disabled selected><%= l('Language') %></option>
|
|
% for my $i (@{$self->available_langs}) {
|
|
<option value="<%= $i %>"><%= iso639_native_name($i) %></option>
|
|
% }
|
|
</select>
|
|
</li>
|
|
|
|
<li<%== ' class="active"' if (current_route eq 'about') %>><a href="<%= url_for('/about') %>" class="menu-item"><%= l('About') %></a></li>
|
|
|
|
% if ((defined(config('ldap')) || defined(config('htpasswd')) || defined(config('auth_headers'))) && is_user_authenticated()) {
|
|
<li>
|
|
<form action="<%= url_for('/logout') %>" method="POST">
|
|
%= csrf_field
|
|
<button class="menu-item reset" type="submit"><%= l('Logout') %></button>
|
|
</form>
|
|
</li>
|
|
% }
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main role="main">
|
|
<%= content %>
|
|
|
|
% if (defined(config('piwik_img'))) {
|
|
<img src="<%== config('piwik_img') %>" class="no_border" alt="" />
|
|
% }
|
|
</main>
|
|
|
|
<div class="toast-container"></div>
|
|
|
|
<template id="toast">
|
|
<div class="toast">
|
|
<div class="message"></div>
|
|
<div class="progress-container">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
const langUrl = '<%= url_for('lang') %>';
|
|
const prefix = '<%= substr(config('prefix'), 1) %>';
|
|
|
|
const entityMap = {
|
|
"&": "&",
|
|
"<": "<",
|
|
">": ">",
|
|
'"': """,
|
|
"'": "'",
|
|
"/": "/",
|
|
};
|
|
|
|
const escapeHtml = (string) => String(string).replace(/[&<>"'\/]/g, (s) => entityMap[s]);
|
|
|
|
const formatDate = (unixTimestamp) => {
|
|
return new Date(unixTimestamp * 1000).toLocaleString(
|
|
window.navigator.language,
|
|
{
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
weekday: "long",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}
|
|
);
|
|
};
|
|
|
|
const addToast = (text, type) => {
|
|
const toastDOM = document.querySelector("template#toast").content.cloneNode(true).children[0];
|
|
toastDOM.classList.add(type)
|
|
|
|
toastDOM.querySelector(".message").innerText = escapeHtml(text);
|
|
|
|
document.querySelector(".toast-container").appendChild(toastDOM);
|
|
setTimeout(() => {
|
|
toastDOM.remove();
|
|
}, 3500)
|
|
|
|
toastDOM.onclick = () => {
|
|
toastDOM.remove();
|
|
}
|
|
};
|
|
|
|
const notify = (title, body) => {
|
|
if (!"Notification" in window || typeof Notification === "undefined") {
|
|
console.log(
|
|
`This browser does not support desktop notification, cannot send following message: ${title} ${body}`
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (Notification.permission !== "granted") {
|
|
Notification.requestPermission();
|
|
} else {
|
|
new Notification(title, {
|
|
body,
|
|
icon: "/img/lufi196.png",
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
if (!"Notification" in window || typeof Notification === "undefined") {
|
|
return;
|
|
}
|
|
|
|
if (Notification.permission !== "granted") {
|
|
Notification.requestPermission();
|
|
}
|
|
|
|
document.getElementById("menu-language").onchange = (event) => window.location = langUrl + event.target.value;
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|