1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-11-13 22:00:10 +00:00
jfa-go/html/setup.html
Harvey Tindall 11eb907ced
html/css: fix overlap of top button row on some pages
row with language, light/dark, logout etc. was overlapping with content
on small screens on some pages, as I forgot to bring over changes made
to the admin page. Also improved some other CSS, and factored out the
language menu into html/lang-select.html.
2024-10-11 17:08:14 +01:00

577 lines
39 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="light">
<head>
<link rel="stylesheet" type="text/css" href="css/{{ .cssVersion }}bundle.css">
{{ template "header.html" . }}
<title>{{ .lang.Strings.pageTitle }}</title>
</head>
<body class="max-w-full overflow-x-hidden section">
<div id="notification-box"></div>
<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">
{{ template "lang-select.html" . }}
</div>
<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">
<span class="support">{{ .lang.StartPage.httpsNotice }}</span>
<span class="button ~urge @low next">{{ .lang.StartPage.start }}</span>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<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.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>
</div>
<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>
</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>
<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.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>
</label>
<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>
</label>
<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 }}">
</label>
<label class="label flex flex-col gap-2">
<span>{{ .lang.Strings.password }}</span>
<input type="password" id="ui-password" class="input ~neutral @low" placeholder="{{ .lang.Strings.password }}">
</label>
<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>
</label>
</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>
<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">
<span class="button ~urge @low" id="jellyfin-test-connection">{{ .lang.JellyfinEmby.testConnection }}</span>
<span class="button ~urge @low next" disabled>{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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>
</label>
<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">
<span>{{ .lang.Email.method }}</span>
<div class="select ~neutral @low">
<select id="email-method">
<option value="">{{ .lang.Strings.disabled }}</option>
<option value="smtp">SMTP</option>
<option value="mailgun">Mailgun</option>
</select>
</div>
</label>
<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>
</label>
<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">
</label>
<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">
</label>
</div>
<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>
</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>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<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">
<span class="button ~neutral @low back">{{ .lang.Strings.back }}</span>
<div>
<span class="button ~urge @low next">{{ .lang.Strings.next }}</span>
</div>
</section>
</div>
<div class="card sectioned ~neutral @low unfocused">
<section class="section flex flex-col gap-2 justify-center items-center">
<span class="heading">{{ .lang.EndPage.finished }}</span>
<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>
<span class="button ~urge @low" id="restart">{{ .lang.Strings.submit }}</span>
<span class="button ~urge @low unfocused" id="refresh">{{ .lang.EndPage.refreshPage }}</span>
</div>
</div>
</div>
<script>
window.langFile = JSON.parse({{ .language }});
window.messages = JSON.parse({{ .messages }});
</script>
<script src="js/setup.js" type="module"></script>
</body>
</html>