<!DOCTYPE html> <html lang="en" class="light"> <head> <link rel="stylesheet" type="text/css" href="{{ .urlBase }}/css/{{ .cssVersion }}bundle.css"> <script> window.URLBase = "{{ .urlBase }}"; window.notificationsEnabled = {{ .notifications }}; window.ombiEnabled = {{ .ombiEnabled }}; window.langFile = JSON.parse({{ .language }}); window.pwrEnabled = {{ .pwrEnabled }}; window.linkResetEnabled = {{ .linkResetEnabled }}; window.language = "{{ .langName }}"; window.telegramEnabled = {{ .telegramEnabled }}; window.telegramRequired = {{ .telegramRequired }}; window.telegramUsername = {{ .telegramUsername }}; window.telegramURL = {{ .telegramURL }}; window.emailEnabled = {{ .emailEnabled }}; window.emailRequired = {{ .emailRequired }}; window.discordEnabled = {{ .discordEnabled }}; window.discordRequired = {{ .discordRequired }}; window.discordServerName = "{{ .discordServerName }}"; window.discordInviteLink = {{ .discordInviteLink }}; window.discordSendPINMessage = "{{ .discordSendPINMessage }}"; window.matrixEnabled = {{ .matrixEnabled }}; window.matrixRequired = {{ .matrixRequired }}; window.matrixUserID = "{{ .matrixUser }}"; window.validationStrings = JSON.parse({{ .validationStrings }}); window.referralsEnabled = {{ .referralsEnabled }}; </script> {{ template "header.html" . }} <title>{{ .strings.myAccount }}</title> </head> <body class="max-w-full overflow-x-hidden section"> <div id="modal-email" class="modal"> <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3"> <div class="content"> <span class="heading mb-4 my-2"></span> <label class="label supra row m-1" for="modal-email-input">{{ .strings.emailAddress }}</label> <div class="row"> <input type="email" class="col sm field ~neutral @low input" id="modal-email-input" placeholder="{{ .strings.emailAddress }}"> </div> <button class="button ~urge @low supra full-width center lg my-2 modal-submit">{{ .strings.submit }}</button> </div> <div class="confirmation-required unfocused"> <span class="heading mb-4">{{ .strings.confirmationRequired }} <span class="modal-close">×</span></span> <p class="content mb-4">{{ .strings.confirmationRequiredMessage }}</p> </div> </div> </div> {{ if .pwrEnabled }} <div id="modal-pwr" class="modal"> <div class="card content relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low"> <span class="heading">{{ .strings.resetPassword }}</span> <p class="content my-2"> {{ if .linkResetEnabled }} {{ .strings.resetPasswordThroughLinkStart }} <ul class="content"> {{ if .resetPasswordUsername }}<li>{{ .strings.resetPasswordUsername }}</li>{{ end }} {{ if .resetPasswordEmail }}<li>{{ .strings.resetPasswordEmail }}</li>{{ end }} {{ if .resetPasswordContactMethod }}<li>{{ .strings.resetPasswordContactMethod }}</li>{{ end }} </ul> {{ .strings.resetPasswordThroughLinkEnd }} {{ else }} {{ .strings.resetPasswordThroughJellyfin }} {{ end }} </p> <div class="row"> <input type="text" class="col sm field ~neutral @low input" id="pwr-address" placeholder="username | example@example.com | user#1234 | @user:host | @username"> </div> {{ if .linkResetEnabled }} <span class="button ~info @low full-width center mt-4" id="pwr-submit"> {{ .strings.submit }} </span> {{ else }} <a class="button ~info @low full-width center mt-4" href="{{ .jfLink }}" target="_blank">{{ .strings.continue }}</a> {{ end }} </div> </div> {{ end }} {{ template "login-modal.html" . }} {{ template "account-linking.html" . }} <div id="notification-box"></div> <div class="top-2 left-2 absolute"> <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"> <label class="switch pb-4"> <input type="radio" name="lang-time" id="lang-12h"> <span>{{ .strings.time12h }}</span> </label> <label class="switch pb-4"> <input type="radio" name="lang-time" id="lang-24h"> <span>{{ .strings.time24h }}</span> </label> <div id="lang-list"></div> </div> </div> </span> <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span> <span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span> </div> <div class="top-2 right-2 absolute"> <a class="button ~info unfocused" href="/" id="admin-back-button"><i class="ri-arrow-left-fill mr-2"></i>{{ .strings.admin }}</a> </div> <div class="page-container m-2 lg:my-20 lg:mx-64 unfocused"> <div class="card @low dark:~d_neutral mb-4" id="card-user"> <span class="heading mb-2"></span> </div> <div class="columns-1 sm:columns-2 gap-4" id="user-cardlist"> {{ if index . "PageMessageEnabled" }} {{ if .PageMessageEnabled }} <div class="card @low dark:~d_neutral content break-words" id="card-message"> {{ .PageMessageContent }} </div> {{ end }} {{ end }} <div class="card @low dark:~d_neutral flex-col" id="card-contact"> <span class="heading mb-2">{{ .strings.contactMethods }}</span> <div class="content flex justify-between flex-col h-100"></div> </div> <div> <div class="card @low dark:~d_neutral content" id="card-password"> <span class="heading row mb-2">{{ .strings.changePassword }}</span> <div class=""> <div class="my-2"> <span class="label supra row">{{ .strings.passwordRequirementsHeader }}</span> <ul> {{ range $key, $value := .requirements }} <li class="" id="requirement-{{ $key }}" min="{{ $value }}"> <span class="badge lg ~positive requirement-valid"></span> <span class="content requirement-content"></span> </li> {{ end }} </ul> </div> <div class="my-2"> <label class="label supra" for="user-old-password">{{ .strings.oldPassword }}</label> <input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-old-password" aria-label="{{ .strings.oldPassword }}"> <label class="label supra" for="user-new-password">{{ .strings.newPassword }}</label> <input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-new-password" aria-label="{{ .strings.newPassword }}"> <label class="label supra" for="user-reenter-password">{{ .strings.reEnterPassword }}</label> <input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-reenter-new-password" aria-label="{{ .strings.reEnterPassword }}"> <span class="button ~info @low full-width center mt-4" id="user-password-submit"> {{ .strings.changePassword }} </span> </div> </div> </div> </div> <div> <div class="card @low dark:~d_neutral unfocused" id="card-status"> <span class="heading mb-2">{{ .strings.expiry }}</span> <aside class="aside ~warning user-expiry my-4"></aside> <div class="user-expiry-countdown"></div> </div> </div> {{ if .referralsEnabled }} <div> <div class="card @low dark:~d_neutral unfocused" id="card-referrals"> <span class="heading mb-2">{{ .strings.referrals }}</span> <aside class="aside ~neutral my-4 col user-referrals-description"></aside> <div class="flex flex-row justify-between gap-2"> <div class="user-referrals-info"></div> <div class="grid my-2"> <button type="button" class="user-referrals-button button ~info dark:~d_info @low" title="Copy">{{ .strings.copyReferral }}<i class="ri-file-copy-line ml-2"></i></button> </div> </div> </div> </div> {{ end }} </div> </div> <script src="{{ .urlBase }}/js/user.js" type="module"></script> </body> </html>