mirror of https://github.com/hrfee/jfa-go.git
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.
This commit is contained in:
parent
1bf1e994fe
commit
687edf2b0b
GPG Key ID:
BBC65952848FB1A2
20
css/base.css
20
css/base.css
|
|
@ -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 {
|
||||
font-size: 2rem;
|
||||
|
|
@ -256,6 +272,10 @@ sup.\~critical, .text-critical {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-lp {
|
||||
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 & Password:</b> Manually set the username & 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 "<path to jellyfin>/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…
Reference in New Issue
