2020-07-29 21:11:28 +00:00
|
|
|
<!DOCTYPE html>
|
2021-12-31 17:28:08 +00:00
|
|
|
<html lang="en" class="light">
|
2020-07-29 21:11:28 +00:00
|
|
|
<head>
|
2022-01-08 16:42:36 +00:00
|
|
|
<link rel="stylesheet" type="text/css" href="css/{{ .cssVersion }}bundle.css">
|
2021-01-27 21:38:35 +00:00
|
|
|
{{ template "header.html" . }}
|
2021-01-27 21:37:43 +00:00
|
|
|
<title>{{ .lang.Strings.pageTitle }}</title>
|
2020-07-29 21:11:28 +00:00
|
|
|
</head>
|
2021-01-27 21:37:43 +00:00
|
|
|
<body class="max-w-full overflow-x-hidden section">
|
|
|
|
|
<div id="notification-box"></div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
|
|
|
|
|
<div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
|
|
|
|
|
<div class="flex flex-row gap-2">
|
|
|
|
|
<span class="dropdown" tabindex="0" id="lang-dropdown">
|
|
|
|
|
<span class="button ~urge dropdown-button">
|
|
|
|
|
<i class="ri-global-line"></i>
|
|
|
|
|
<span class="ml-2 chev"></span>
|
|
|
|
|
</span>
|
|
|
|
|
<div class="dropdown-display">
|
|
|
|
|
<div class="card ~neutral @low" id="lang-list">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card sectioned ~neutral @low flex flex-col gap-4 justify-between items-center">
|
|
|
|
|
<img class="w-[105%] max-w-none" src="banner.svg" alt="jfa-go" />
|
|
|
|
|
<span class="heading welcome">{{ .lang.StartPage.welcome }}</span>
|
|
|
|
|
<p class="content text-center">{{ .lang.StartPage.pressStart }}</p>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-01-27 21:37:43 +00:00
|
|
|
<span class="support">{{ .lang.StartPage.httpsNotice }}</span>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.StartPage.start }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.Language.title }}</span>
|
|
|
|
|
<p class="content" id="language-description"></p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Language.defaultAdminLang }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="ui-language-admin">
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Language.defaultFormLang }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="ui-language-form">
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Language.defaultEmailLang }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="email-language">
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
|
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.General.title }}</span>
|
|
|
|
|
<div class="flex flex-row gap-2 justify-between">
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<div class="flex flex-row gap-2 justify-between">
|
|
|
|
|
<label class="label flex flex-col gap-2 grow">
|
|
|
|
|
<span>{{ .lang.General.listenAddress }}</span>
|
|
|
|
|
<input type="url" class="input ~neutral @low" id="ui-host" value="0.0.0.0">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.port }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="ui-port" value="8056">
|
|
|
|
|
</label>
|
2023-10-19 16:19:52 +00:00
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="advanced-tls"><span>{{ .lang.General.useHTTPS }}</span></div>
|
|
|
|
|
<p class="support">{{ .lang.General.useHTTPSNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.General.pathToCertificate }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="advanced-tls_cert">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.General.pathToKeyFile }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="advanced-tls_key">
|
|
|
|
|
</label>
|
|
|
|
|
<span class="heading">{{ .lang.Updates.title }}</span>
|
|
|
|
|
<p class="content" id="updates-description"></p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="updates-enabled" checked><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Updates.updateChannel }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="updates-channel">
|
|
|
|
|
<option value="stable">{{ .lang.Updates.stable }}</option>
|
|
|
|
|
<option value="unstable">{{ .lang.Updates.unstable }}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.General.httpsPort }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="advanced-tls_port" value="8057">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.General.urlBase }} ({{ .lang.Strings.optional }})</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="ui-url_base" placeholder="/mysubfolder">
|
|
|
|
|
<p class="support">{{ .lang.General.urlBaseNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.General.externalURL }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="ui-jfa_url" placeholder="https://jellyf.in/mysubfolder">
|
|
|
|
|
<p class="support">{{ .lang.General.externalURLNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.theme }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="ui-theme">
|
|
|
|
|
<option value="Jellyfin (Dark)">{{ .lang.General.darkTheme }}</option>
|
|
|
|
|
<option value="Default (Light)">{{ .lang.General.lightTheme }}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="heading">{{ .lang.Proxy.title }}</span>
|
|
|
|
|
<p class="content" id="proxy-description">{{ .lang.Proxy.description }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="advanced-proxy"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Proxy.protocol }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="advanced-proxy_protocol">
|
|
|
|
|
<option value="http">HTTP</option>
|
|
|
|
|
<option value="socks">SOCKS5</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Proxy.address }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="advanced-proxy_address">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.username }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="advanced-proxy_user">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.password }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="advanced-proxy_password">
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
|
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.Login.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.Login.description }}</p>
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="radio" name="ui-jellyfin_login" value="true" checked><span>{{ .lang.Login.authorizeWithJellyfin }}</span></div>
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="pl-4 flex flex-col gap-2">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="ui-admin_only" checked><span>{{ .lang.Login.adminOnly }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="ui-allow_all"><span>{{ .lang.Login.allowAll }}</span></div>
|
|
|
|
|
<p class="support" id="description-ui-allow_all">{{ .lang.Login.allowAllDescription }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="radio" name="ui-jellyfin_login" value="false"><span>{{ .lang.Login.authorizeManual }}</span></div>
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<p class="support">{{ .lang.Login.authorizeManualUserPageNotice }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class ="flex flex-col gap-2" id="login-manual">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.username }}</span>
|
|
|
|
|
<input type="text" id="ui-username" class="input ~neutral @low" placeholder="{{ .lang.Strings.username }}">
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<label class="label flex flex-col gap-2">
|
2021-01-27 21:37:43 +00:00
|
|
|
<span>{{ .lang.Strings.password }}</span>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<input type="password" id="ui-password" class="input ~neutral @low" placeholder="{{ .lang.Strings.password }}">
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.emailAddress }} ({{ .lang.Strings.optional }})</span>
|
|
|
|
|
<input type="email" id="ui-email" class="input ~neutral @low" placeholder="email@address">
|
|
|
|
|
<span class="support">{{ .lang.Login.emailNotice }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.JellyfinEmby.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.JellyfinEmby.description }}</p>
|
|
|
|
|
<div class="flex flex-row gap-2 justify-between">
|
|
|
|
|
<div class="flex flex-col gap-2 grow">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.serverType }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="jellyfin-type">
|
|
|
|
|
<option value="jellyfin">Jellyfin</option>
|
|
|
|
|
<option value="emby">Emby</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="support">{{ .lang.JellyfinEmby.embyNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.JellyfinEmby.replaceJellyfin }} ({{ .lang.Strings.optional }})</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="jellyfin-substitute_jellyfin_strings">
|
|
|
|
|
<p class="support">{{ .lang.JellyfinEmby.replaceJellyfinNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.username }}</span>
|
|
|
|
|
<input type="text" id="jellyfin-username" class="input ~neutral @low" placeholder="{{ .lang.Strings.username }}">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.password }}</span>
|
|
|
|
|
<input type="password" id="jellyfin-password" class="input ~neutral @low" placeholder="{{ .lang.Strings.password }}">
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex flex-col gap-2 grow ">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.serverAddress }} ({{ .lang.JellyfinEmby.internal }})</span>
|
|
|
|
|
<input type="url" class="input ~neutral @low" id="jellyfin-server" placeholder="http://jellyf.in:80">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.serverAddress }} ({{ .lang.JellyfinEmby.external }})</span>
|
|
|
|
|
<input type="url" class="input ~neutral @low" id="jellyfin-public_server" placeholder="https://jellyf.in">
|
|
|
|
|
<p class="support">{{ .lang.JellyfinEmby.addressExternalNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
|
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
|
|
|
|
<div class="flex flex-row gap-2">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low" id="jellyfin-test-connection">{{ .lang.JellyfinEmby.testConnection }}</span>
|
|
|
|
|
<span class="button ~urge @low next" disabled>{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.Ombi.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.Ombi.description }}</p>
|
|
|
|
|
<aside class="aside ~warning" id="ombi-stability-warning">{{ .lang.Ombi.stabilityWarning }}</aside>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="ombi-enabled"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.serverAddress }}</span>
|
|
|
|
|
<input type="url" class="input ~neutral @low" id="ombi-server" placeholder="ombi.jellyf.in">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.apiKey }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="ombi-api_key">
|
|
|
|
|
<p class="support">{{ .lang.Ombi.apiKeyNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="heading">{{ .lang.Jellyseerr.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.Jellyseerr.description }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="jellyseerr-enabled"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.serverAddress }}</span>
|
|
|
|
|
<input type="url" class="input ~neutral @low" id="jellyseerr-server" placeholder="https://jellyseerr.jellyf.in:5055">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.apiKey }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="jellyseerr-api_key">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="jellyseerr-import_existing" checked><span>{{ .lang.Jellyseerr.importExisting }}</span></div>
|
|
|
|
|
<p class="support">{{ .lang.Jellyseerr.importExistingDescription }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
<div>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.UserPage.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.UserPage.description }}</p>
|
|
|
|
|
<p class="content">{{ .lang.UserPage.customizeMessages }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="userpage-enabled"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
<p class="support">{{ .lang.UserPage.requiredSettings }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2023-06-26 20:29:49 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
|
|
|
|
<div>
|
|
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.Messages.title }}</span>
|
|
|
|
|
<p class="content" id="messages-description"></p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="messages-enabled" checked><span>{{ .lang.Strings.enabled }}</span></div>
|
2021-06-23 14:44:48 +00:00
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Email.dateFormat }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="email-date_format" value="%d/%m/%y">
|
|
|
|
|
<p class="support" id="email-dateformat-notice"></p>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="radio" class="mr-2" name="email-24h" value="true" checked><span>{{ .lang.Strings.time24h }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="radio" class="mr-2" name="email-24h" value="false"><span>{{ .lang.Strings.time12h }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="email-sect" class="flex flex-row gap-2 justify-between">
|
|
|
|
|
<div class="flex flex-col gap-2">
|
|
|
|
|
<span class="heading">{{ .lang.Email.title }}</span>
|
|
|
|
|
<p class="content" id="email-description"></p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
2021-06-23 14:44:48 +00:00
|
|
|
<span>{{ .lang.Email.method }}</span>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="select ~neutral @low">
|
2021-06-23 14:44:48 +00:00
|
|
|
<select id="email-method">
|
|
|
|
|
<option value="">{{ .lang.Strings.disabled }}</option>
|
|
|
|
|
<option value="smtp">SMTP</option>
|
|
|
|
|
<option value="mailgun">Mailgun</option>
|
2021-01-27 21:37:43 +00:00
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="email-no_username"><span>{{ .lang.Email.useEmailAsUsername }}</span></div>
|
|
|
|
|
<p class="support">{{ .lang.Email.useEmailAsUsernameNotice }}</p>
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Email.fromAddress }}</span>
|
|
|
|
|
<input type="email" class="input ~neutral @low" id="email-address" placeholder="mail@jellyf.in">
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Email.senderName }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="email-from" value="Jellyfin">
|
2021-01-27 21:37:43 +00:00
|
|
|
</label>
|
2020-07-29 21:11:28 +00:00
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div id="email-smtp" class="flex flex-col gap-2 min-w-[40%]">
|
|
|
|
|
<p class="text-2xl font-semibold">SMTP</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Email.encryption }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="smtp-encryption">
|
|
|
|
|
<option value="starttls">STARTTLS ({{ .lang.Strings.port }} 587)</option>
|
|
|
|
|
<option value="ssl_tls">SSL/TLS ({{ .lang.Strings.port }} 465)</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.serverAddress }}</span>
|
|
|
|
|
<input type="url" class="input ~neutral @low" id="smtp-server" placeholder="smtp.jellyf.in">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.port }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="smtp-port" placeholder="587">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.username }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="smtp-username">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.password }}</span>
|
|
|
|
|
<input type="password" class="input ~neutral @low" id="smtp-password">
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="email-mailgun" class="flex flex-col gap-2 min-w-[40%]">
|
|
|
|
|
<p class="text-2xl font-semibold">Mailgun</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Email.mailgunApiURL }}</span>
|
|
|
|
|
<input type="url" class="input ~neutral @low" id="mailgun-api_url" placeholder="https://api.eu.mailgun.net/v3/mail.jellyf.in/messages">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.apiKey }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="mailgun-api_key">
|
|
|
|
|
</label>
|
2020-07-29 21:11:28 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
<div>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused related-to-email">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.Notifications.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.Notifications.description }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="notifications-enabled"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<span class="heading">{{ .lang.WelcomeEmails.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.WelcomeEmails.description }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="welcome_email-enabled"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.emailSubject }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="welcome_email-subject" placeholder="{{ .emailLang.WelcomeEmail.title }}">
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
<div>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused related-to-email">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.InviteEmails.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.InviteEmails.description }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="invite_emails-enabled"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.emailSubject }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="invite_emails-subject" placeholder="{{ .emailLang.InviteEmail.title }}">
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
<div>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div id="password-resets" class="card sectioned ~neutral @low unfocused related-to-email">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.PasswordResets.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.PasswordResets.description }}</p>
|
|
|
|
|
<p class="content" id="password_resets-more-info">{{ .lang.PasswordResets.moreInfo }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="password_resets-enabled"><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.PasswordResets.pathToJellyfin }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="password_resets-watch_directory" placeholder="/config/jellyfin">
|
|
|
|
|
<p class="support">{{ .lang.PasswordResets.pathToJellyfinNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="password_resets-link_reset"><span>{{ .lang.PasswordResets.resetLinks }}</span></div>
|
|
|
|
|
<p class="support">{{ .lang.PasswordResets.resetLinksNotice }} {{ .lang.PasswordResets.resetLinksRequiredForUserPage }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="password_resets-set_password"><span>{{ .lang.PasswordResets.setPassword }}</span></div>
|
|
|
|
|
<p class="support">{{ .lang.PasswordResets.setPasswordNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.PasswordResets.resetLinksLanguage }}</span>
|
|
|
|
|
<div class="select ~neutral @low">
|
|
|
|
|
<select id="password_resets-language">
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.Strings.emailSubject }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="password_resets-subject" placeholder="{{ .emailLang.PasswordReset.title }}">
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
<div>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.PasswordValidation.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.PasswordValidation.description }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<div class="switch"><input type="checkbox" id="password_validation-enabled" checked><span>{{ .lang.Strings.enabled }}</span></div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.PasswordValidation.length }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="password_validation-min_length" value="8">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.PasswordValidation.uppercase }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="password_validation-upper" value="1">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.PasswordValidation.lowercase }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="password_validation-lower" value="0">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.PasswordValidation.numbers }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="password_validation-number" value="0">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.PasswordValidation.special }}</span>
|
|
|
|
|
<input type="number" class="input ~neutral @low" id="password_validation-special" value="0">
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
<div>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-between">
|
|
|
|
|
<span class="heading">{{ .lang.HelpMessages.title }}</span>
|
|
|
|
|
<p class="content">{{ .lang.HelpMessages.description }}</p>
|
|
|
|
|
<p class="content">{{ .lang.HelpMessages.markdownMessageNotice }}</p>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.HelpMessages.contactMessage }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="ui-contact_message">
|
|
|
|
|
<p class="support">{{ .lang.HelpMessages.contactMessageNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.HelpMessages.helpMessage }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="ui-help_message">
|
|
|
|
|
<p class="support">{{ .lang.HelpMessages.helpMessageNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label flex flex-col gap-2">
|
|
|
|
|
<span>{{ .lang.HelpMessages.successMessage }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="ui-success_message">
|
|
|
|
|
<p class="support">{{ .lang.HelpMessages.successMessageNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="label related-to-email">
|
|
|
|
|
<span>{{ .lang.HelpMessages.emailMessage }}</span>
|
|
|
|
|
<input type="text" class="input ~neutral @low" id="email-message">
|
|
|
|
|
<p class="support">{{ .lang.HelpMessages.emailMessageNotice }}</p>
|
|
|
|
|
</label>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-between items-center">
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
<div>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
|
2021-01-27 21:37:43 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<div class="card sectioned ~neutral @low unfocused">
|
|
|
|
|
<section class="section flex flex-col gap-2 justify-center items-center">
|
2021-01-27 21:37:43 +00:00
|
|
|
<span class="heading">{{ .lang.EndPage.finished }}</span>
|
setup: flex-ify, light/dark, keep page position on reload
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more
flex-[row/col] gap-2's. UI should be more consistent in general, and
with the admin UI.
The page you were on is actually read from the URL on reload, however
does not keep settings (implemented just for ease of UI editing,
really).
`missing-colors.js` preprocessor script now applies dark prefixes for
<section>s, but like with cards, does not apply a default ~neutral to
those without, so that <section class=""> looks different to <section
class="~neutral">.
Light/dark selector added to setup too, and the actual mode given to the
browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and
controls are now colored according to the theme.
2024-08-21 15:13:17 +00:00
|
|
|
<p class="content">{{ .lang.EndPage.restartMessage }}</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="section w-full ~neutral footer flex flex-row justify-center items-center gap-2">
|
|
|
|
|
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
|
2021-12-30 00:49:43 +00:00
|
|
|
<span class="button ~urge @low" id="restart">{{ .lang.Strings.submit }}</span>
|
|
|
|
|
<span class="button ~urge @low unfocused" id="refresh">{{ .lang.EndPage.refreshPage }}</span>
|
2020-07-29 21:11:28 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-01-27 21:37:43 +00:00
|
|
|
<script>
|
|
|
|
|
window.langFile = JSON.parse({{ .language }});
|
|
|
|
|
window.messages = JSON.parse({{ .messages }});
|
|
|
|
|
</script>
|
|
|
|
|
<script src="js/setup.js" type="module"></script>
|
2020-07-29 21:11:28 +00:00
|
|
|
</body>
|
2021-01-27 21:37:43 +00:00
|
|
|
</html>
|
