Initial setup page content

Rewritten with a17t. Content right now is just a copy of the original
setup.html, but settings for new features will be added later.Currently
all cards are shown, only the current one will show in future.
pull/61/head
Harvey Tindall 4 years ago
parent 1bf1e994fe
commit 687edf2b0b
No known key found for this signature in database
GPG Key ID: BBC65952848FB1A2

@ -39,6 +39,22 @@
} }
} }
.banner {
margin: calc(-1 * var(--spacing-4,1rem));
}
.banner.header {
margin-bottom: var(--spacing-4,1rem);
}
.banner.footer {
margin-top: var(--spacing-4,1rem);
padding: var(--spacing-4,1rem);
}
div.card:contains(section.banner.footer) {
padding-bottom: 0px;
}
.tab-button { .tab-button {
font-size: 2rem; font-size: 2rem;
@ -256,6 +272,10 @@ sup.\~critical, .text-critical {
justify-content: center; justify-content: center;
} }
.middle {
align-items: center;
}
.no-lp { .no-lp {
padding-left: 0px; padding-left: 0px;
} }

@ -0,0 +1,347 @@
<!DOCTYPE html>
<html lang="en" class="{{ .cssClass }}">
<head>
<link rel="stylesheet" type="text/css" href="../build/data/web/css/bundle.css">
{{ template "header.html" . }}
<title>{{ .strings.pageTitle }}</title>
</head>
<body class="max-w-full overflow-x-hidden section">
<div id="notification-box"></div>
<span class="dropdown" tabindex="0" id="lang-dropdown">
<span class="button ~urge dropdown-button">
<i class="ri-global-line"></i>
<span class="ml-1 chev"></span>
</span>
<div class="dropdown-display">
<div class="card ~neutral !low" id="lang-list">
</div>
</div>
</span>
<div class="page-container">
<div class="card ~neutral !low mb-1">
<div class="row">
<img class="banner header" src="../images/banner.svg" alt="jfa-go" />
</div>
<div class="row col flex center">
<span class="heading">Welcome!</span>
</div>
<div class="row col flex center">
<p class="content">You'll need to do a few things to set up jfa-go. Press continue to get started.</p>
</div>
<section class="section ~neutral banner footer flex-expand middle">
<span class="support">Make sure you're accessing this page via HTTPS or a Private Network.</span>
<span class="button ~urge !normal">Continue</span>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Language</span>
<p class="content">Community translations are available for most parts of jfa-go. You can choose the default languages below, but users can still change it for themselves. If you want to help out, sign up <a href="https://weblate.hrfee.pw">here</a> to start contributing!</p>
<label class="label">
<span class="mt-half">Default admin language</span>
<div class="select ~neutral !normal mt-half mb-1">
<select id="ui-language-admin">
</select>
</div>
</label>
<label class="label">
<span class="mt-half">Default account creation language</span>
<div class="select ~neutral !normal mt-half mb-1">
<select id="ui-language-form">
</select>
</div>
</label>
<label class="label">
<span class="mt-half">Default email language</span>
<div class="select ~neutral !normal mt-half mb-1">
<select id="email-language">
</select>
</div>
</label>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<span class="button ~urge !normal next">Continue</span>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Login</span>
<p class="content">To access the admin page, you need to login with a method below:</p>
<div class="pl-1">
<label class="row switch pb-1">
<input type="radio" name="login-method" checked><span><b>Authorize through Jellyfin:</b> Login details are shared with Jellyfin, allowing for multiple users.</span>
</label>
<label class="row switch pl-1 pb-1">
<input type="checkbox" id="login-jellyfin"><span>Admin users only (recommended)</span>
</label>
<label class="row switch pb-1">
<input type="radio" name="login-method"><span><b>Username &amp; Password:</b> Manually set the username &amp; password.</span>
</label>
</div>
<div id="login-manual">
<label class="label">
<span class="mt-half">Username</span>
<input type="text" id="login-password" class="input ~neutral !normal mt-half mb-1" placeholder="Username">
</label>
<label class="label">
<span>Password</span>
<input type="password" id="login-username" class="input ~neutral !normal mt-half mb-1" placeholder="Password">
</label>
<label class="label">
<span>Email address (optional)</span>
<input type="email" class="input ~neutral !normal mt-half" placeholder="email@address">
<span class="support mb-1">Your email address can be used to receive activity notifications.</span>
</label>
</div>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<span class="button ~urge !normal next">Continue</span>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Jellyfin/Emby</span>
<p class="content">jfa-go needs admin access because API tokens don't allow user creation. You should create a separate account and check "Allow this user to manage the server". You can disable everything else. Once done, enter the credentials here.</p>
<label class="label">
<span>Server Type</span>
<div class="select ~neutral !normal mt-half">
<select id="jellyfin-type">
<option value="jellyfin">Jellyfin</option>
<option value="emby">Emby (experimental)</option>
</select>
</div>
<p class="support mb-1">Emby support is limited and does not support password resets.</p>
</label>
<label class="label">
<span class="mt-half">Server Address (internal)</span>
<input type="url" class="input ~neutral !normal mt-half mb-1" id="jellyfin-server" placeholder="http://jellyf.in:80">
</label>
<label class="label">
<span class="mt-half">Server Address (public)</span>
<input type="url" class="input ~neutral !normal mt-half" id="jellyfin-public-server" placeholder="https://jellyf.in">
<p class="support mb-1">Leave blank to use the same address.</p>
</label>
<label class="label">
<span class="mt-half">Username</span>
<input type="text" id="jellyfin-username" class="input ~neutral !normal mt-half mb-1" placeholder="Username">
</label>
<label class="label">
<span>Password</span>
<input type="password" id="jellyfin-password" class="input ~neutral !normal mt-half mb-1" placeholder="Password">
</label>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<div>
<span class="button ~urge !normal">Test Connection</span>
<span class="button ~urge !normal next" disabled>Continue</span>
</div>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Email</span>
<p class="content">jfa-go can send password reset PINs and various notifications. You can connect to an SMTP server, or use the <a href="https://www.mailgun.com/">Mailgun</a> API.</p>
<div class="row">
<div class="col">
<label class="label">
<span>Server Type</span>
<div class="select ~neutral !normal mt-half mb-1">
<select id="email-method">
<option value="">Disabled</option>
<option value="smtp">SMTP</option>
<option value="mailgun">Mailgun</option>
</select>
</div>
</label>
<label class="label">
<span class="mt-half">From Address</span>
<input type="email" class="input ~neutral !normal mt-half mb-1" id="email-address" placeholder="mail@jellyf.in">
</label>
<label class="label">
<span class="mt-half">Sender Name</span>
<input type="text" class="input ~neutral !normal mt-half mb-1" id="email-from" value="Jellyfin">
</label>
<label class="label">
<span class="mt-half">Date Format</span>
<input type="text" class="input ~neutral !normal mt-half" id="email-date_format" value="%d/%m/%y">
<p class="support mb-1">Date follows the <a href="https://strftime.org/">strftime</a> format.</p>
</label>
<div>
<label class="row switch pb-1">
<input type="radio" name="email-24h" value="true" checked><span>24h Time</span>
</label>
<label class="row switch pb-1">
<input type="radio" name="email-24h" value="false"><span>12h Time</span>
</label>
</div>
<label class="label">
<span class="mt-half">Message</span>
<input type="text" class="input ~neutral !normal mt-half" id="email-message" value="Need help? Contact me.">
<p class="support mb-1">A short message displayed at the bottom of emails.</p>
</label>
</div>
<div class="col">
<div id="email-smtp">
<label class="label">
<span>Encryption</span>
<div class="select ~neutral !normal mt-half mb-1">
<select id="smtp-encryption">
<option value="starttls">STARTTLS (Usually port 587)</option>
<option value="ssl_tls">SSL/TLS (Usually port 465)</option>
</select>
</div>
</label>
<label class="label">
<span class="mt-half">Server Address</span>
<input type="url" class="input ~neutral !normal mt-half mb-1" id="smtp-server" placeholder="smtp.jellyf.in">
</label>
<label class="label">
<span class="mt-half">Port</span>
<input type="number" class="input ~neutral !normal mt-half mb-1" id="smtp-port" placeholder="587">
</label>
<label class="label">
<span class="mt-half">Username</span>
<input type="text" class="input ~neutral !normal mt-half mb-1" id="smtp-username">
</label>
<label class="label">
<span class="mt-half">Password</span>
<input type="password" class="input ~neutral !normal mt-half mb-1" id="smtp-password">
</label>
</div>
<div id="email-mailgun">
<label class="label">
<span class="mt-half">API URL</span>
<input type="url" class="input ~neutral !normal mt-half mb-1" id="mailgun-api_url" placeholder="https://api.eu.mailgun.net/v3/mail.jellyf.in/messages">
</label>
<label class="label">
<span class="mt-half">API Key</span>
<input type="text" class="input ~neutral !normal mt-half mb-1" id="mailgun-api_key">
</label>
</div>
</div>
</div>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<div>
<span class="button ~urge !normal next">Continue</span>
</div>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Notifications</span>
<p class="content">If enabled, you can choose (per invite) to receive an email when an invite expires, or a user is created. If you didn't choose Jellyfin Authentication, make sure you provided an email address.</p>
<label class="row switch pb-1">
<input type="checkbox" id="notifications-enabled"><span>Enabled</span>
</label>
<span class="heading">Password Resets</span>
<p class="content">When a user tries to reset their password, Jellyfin creates a file named "passwordreset-*.json" which contains a PIN. jfa-go reads the file and sends the PIN to the user.</p>
<label class="row switch pb-1">
<input type="checkbox" id="password_resets-enabled"><span>Enabled</span>
</label>
<label class="label">
<span class="mt-half">Path to Jellyfin configuration directory</span>
<input type="text" class="input ~neutral !normal mt-half" id="password_resets-watch_directory" placeholder="/path/to/jellyfin">
<p class="support mb-1">If you don't know where this is, Try resetting your password in Jellyfin. A popup with the "&lt;path to jellyfin&gt;/passwordreset-*.json" will appear.</p>
</label>
<label class="label">
<span class="mt-half">Email subject</span>
<input type="text" class="input ~neutral !normal mt-half mb-1" id="password_resets-subject" value="Password Reset - Jellyfin">
</label>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<div>
<span class="button ~urge !normal next">Continue</span>
</div>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Invite Emails</span>
<p class="content">If enabled, you can send invites directly to a user's email address. Because you might be using a reverse proxy, you need to provide the URL invites are accessed from. Write your URL Base and append "/invite".</p>
<label class="row switch pb-1">
<input type="checkbox" id="invite_emails-enabled"><span>Enabled</span>
</label>
<label class="label">
<span class="mt-half">URL</span>
<input type="url" class="input ~neutral !normal mt-half mb-1" id="invite_emails-url_base" placeholder="https://accounts.jellyf.in/invite">
</label>
<label class="label">
<span class="mt-half">Email subject</span>
<input type="text" class="input ~neutral !normal mt-half mb-1" id="invite_emails-subject" value="Invite - Jellyfin">
</label>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<div>
<span class="button ~urge !normal next">Continue</span>
</div>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Password Validation</span>
<p class="content">If enabled, a set of password requirements will show on the create account page, such as minimum length, uppercase/lowercase characters, etc.</p>
<label class="row switch pb-1">
<input type="checkbox" id="password_validation-enabled" checked><span>Enabled</span>
</label>
<label class="label">
<span class="mt-half">Length</span>
<input type="number" class="input ~neutral !normal mt-half mb-1" id="password_validation-min_length" value="8">
</label>
<label class="label">
<span class="mt-half">Uppercase characters</span>
<input type="number" class="input ~neutral !normal mt-half mb-1" id="password_validation-upper" value="1">
</label>
<label class="label">
<span class="mt-half">Lowercase characters</span>
<input type="number" class="input ~neutral !normal mt-half mb-1" id="password_validation-lower" value="0">
</label>
<label class="label">
<span class="mt-half">Numbers</span>
<input type="number" class="input ~neutral !normal mt-half mb-1" id="password_validation-number" value="0">
</label>
<label class="label">
<span class="mt-half">Special (%, *, etc.)</span>
<input type="number" class="input ~neutral !normal mt-half mb-1" id="password_validation-special" value="0">
</label>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<div>
<span class="button ~urge !normal next">Continue</span>
</div>
</section>
</div>
<div class="card ~neutral !low mb-1">
<span class="heading">Help Messages</span>
<p class="content">These messages will display in the account creation page and in emails.</p>
<label class="label">
<span class="mt-half">Contact Message</span>
<input type="text" class="input ~neutral !normal mt-half" id="ui-contact_message" value="Need help? Contact me.">
<p class="support mb-1">Displays at the bottom of all pages except admin.</p>
</label>
<label class="label">
<span class="mt-half">Help Message</span>
<input type="text" class="input ~neutral !normal mt-half" id="ui-help_message" value="Enter your details to create an account.">
<p class="support mb-1">Displays on the account creation page.</p>
</label>
<label class="label">
<span class="mt-half">Success Message</span>
<input type="text" class="input ~neutral !normal mt-half" id="ui-success_message" value="Your account has been created. Click below to continue to Jellyfin.">
<p class="support mb-1">Displays when a user creates their account.</p>
</label>
<section class="section ~neutral banner footer flex-expand middle">
<span class="button ~neutral !normal back">Back</span>
<div>
<span class="button ~urge !normal next">Continue</span>
</div>
</section>
</div>
<div class="card ~neutral !low mb-1">
<div class="row col flex center">
<span class="heading">Finished!</span>
</div>
<div class="row col flex center">
<p class="content">There are more settings you can configure on the admin page. Click below to restart, then refresh the page.</p>
</div>
<div class="row col flex center">
<span class="button ~urge !normal" id="restart">Submit</span>
</div>
</div>
</div>
{{ template "form-base" . }}
</body>
</html>
Loading…
Cancel
Save