<!-- Admin status bar -->
<div
- class="d-flex align-items-center mb-4 p-3 bg-success bg-opacity-25 border border-success rounded"
+ class="d-flex align-items-center mb-4 p-3 alert alert-success border border-success rounded-4"
>
<span class="text-success me-3">🔓 {$t('settings.admin.authorized')} </span>
<button class="btn btn-outline-secondary btn-sm ms-2" onclick={resetAdminState}>
</div>
{#if registrationAllowedTemporary && registrationUntil}
- <div class="alert alert-success" transition:slide>
+ <div class="alert alert-success rounded-4" transition:slide>
{@html $t('settings.admin.registration_allowed_until', {
date_and_time: new Date(registrationUntil).toLocaleString($tolgee.getLanguage(), {
year: 'numeric',
{/if}
{#if deleteUserId === user.id}
- <div class="mt-2" transition:slide>
- <div class="alert alert-danger">
- <p class="mb-2">
- <strong>{$t('settings.admin.confirm_delete')}</strong><br />
- {$t('settings.admin.delete_warning', { username: user.username })}
- </p>
- <div class="d-flex gap-2">
- <button
- class="btn btn-secondary btn-sm"
- onclick={() => (deleteUserId = null)}
- >
- {$t('settings.admin.cancel')}
- </button>
- <button
- class="btn btn-danger btn-sm"
- onclick={() => deleteUser(user.id, user.username)}
- disabled={isDeletingUser}
- >
- {#if isDeletingUser}
- <span class="spinner-border spinner-border-sm me-1"></span>
- {/if}
- {$t('settings.admin.delete')}
- </button>
+ <div transition:slide>
+ <div class="pt-2">
+ <div class="alert alert-danger mb-0">
+ <p class="mb-2">
+ <strong>{$t('settings.admin.confirm_delete')}</strong><br />
+ {$t('settings.admin.delete_warning')}
+ </p>
+ <div class="d-flex gap-2">
+ <button
+ class="btn btn-secondary btn-sm"
+ onclick={() => (deleteUserId = null)}
+ >
+ {$t('settings.admin.cancel')}
+ </button>
+ <button
+ class="btn btn-danger btn-sm"
+ onclick={() => deleteUser(user.id, user.username)}
+ disabled={isDeletingUser}
+ >
+ {#if isDeletingUser}
+ <span class="spinner-border spinner-border-sm me-1"></span>
+ {/if}
+ {$t('settings.admin.delete')}
+ </button>
+ </div>
</div>
</div>
</div>
</div>
</div>
{/if}
+
+ <div class="mt-4 d-flex justify-content-center">
+ <button class="btn btn-outline-primary" onclick={loadUsers} disabled={isLoadingUsers}>
+ {#if isLoadingUsers}
+ <span class="spinner-border spinner-border-sm me-2"></span>
+ {/if}
+ {$t('settings.admin.refresh_users')}
+ </button>
+ </div>
</div>
</div>
</button>
{#if confirmDeleteOldData}
- <div class="mt-3" transition:slide>
- <div class="alert alert-danger">
- <p class="mb-2">
- <strong>{$t('settings.admin.confirm_delete_old_data')}</strong><br />
- {@html $t('settings.admin.delete_old_data_warning')}
- </p>
- <div class="d-flex gap-2">
- <button
- class="btn btn-secondary btn-sm"
- onclick={toggleDeleteOldDataConfirmation}
- >
- {$t('settings.admin.cancel')}
- </button>
- <button
- class="btn btn-danger btn-sm"
- onclick={deleteOldData}
- disabled={isDeletingOldData}
- >
- {#if isDeletingOldData}
- <span class="spinner-border spinner-border-sm me-1"></span>
- {/if}
- {$t('settings.admin.delete')}
- </button>
+ <div transition:slide class="">
+ <div class="pt-3">
+ <div class="alert alert-danger mb-0">
+ <p class="mb-2">
+ <strong>{$t('settings.admin.confirm_delete_old_data')}</strong><br />
+ {@html $t('settings.admin.delete_old_data_warning')}
+ </p>
+ <div class="d-flex gap-2">
+ <button
+ class="btn btn-secondary btn-sm"
+ onclick={toggleDeleteOldDataConfirmation}
+ >
+ {$t('settings.admin.cancel')}
+ </button>
+ <button
+ class="btn btn-danger btn-sm"
+ onclick={deleteOldData}
+ disabled={isDeletingOldData}
+ >
+ {#if isDeletingOldData}
+ <span class="spinner-border spinner-border-sm me-1"></span>
+ {/if}
+ {$t('settings.admin.delete')}
+ </button>
+ </div>
</div>
</div>
</div>
{/if}
</div>
</div>
-
- <!-- Reload Button moved to bottom -->
- <div class="mt-4 d-flex justify-content-center">
- <button class="btn btn-outline-primary" onclick={loadUsers} disabled={isLoadingUsers}>
- {#if isLoadingUsers}
- <span class="spinner-border spinner-border-sm me-2"></span>
- {/if}
- {$t('settings.admin.refresh_users')}
- </button>
- </div>
</div>
{/if}
<script>
import * as bootstrap from 'bootstrap';
- import Fa from 'svelte-fa';
+ import Fa, { FaLayers } from 'svelte-fa';
import { goto } from '$app/navigation';
import { onDestroy, onMount } from 'svelte';
import {
faSun,
faMoon,
faCircleUp,
- faBars
+ faBars,
+ faCircle
} from '@fortawesome/free-solid-svg-icons';
import Tag from '$lib/Tag.svelte';
import SelectTimezone from '$lib/SelectTimezone.svelte';
>
<Fa icon={faSliders} />
{#if updateAvailable}
- <Fa
- icon={faCircleUp}
- size="1.2x"
- class="position-absolute top-0 start-100 translate-middle text-info"
- />
+ <FaLayers class="position-absolute top-0 start-100 translate-middle">
+ <Fa icon={faCircle} size="1.2x" color="white" />
+ <Fa icon={faCircleUp} size="1.2x" class="text-info" />
+ </FaLayers>
{/if}
</button>
<button class="btn btn-outline-secondary" onclick={() => logout(null)}
>
💡 {$t('settings.about')}
{#if updateAvailable}
- <Fa icon={faCircleUp} size="1.2x" class="text-info" />
+ <FaLayers>
+ <Fa icon={faCircle} size="1.2x" color="white" />
+ <Fa icon={faCircleUp} size="1.2x" class="text-info" />
+ </FaLayers>
{/if}
</button>
</nav>
<label class="form-check-label" for="language_manual">
{$t('settings.set_language_manually')}
{#if !$tempSettings.useBrowserLanguage}
- <select
- transition:slide
- class="form-select"
- bind:value={$tempSettings.language}
- disabled={$tempSettings.useBrowserLanguage}
- >
- {#each $tolgee.getInitialOptions().availableLanguages as lang}
- <option value={lang}>{loadFlagEmoji(lang)} {lang}</option>
- {/each}
- </select>
+ <div transition:slide>
+ <select
+ class="form-select"
+ bind:value={$tempSettings.language}
+ disabled={$tempSettings.useBrowserLanguage}
+ >
+ {#each $tolgee.getInitialOptions().availableLanguages as lang}
+ <option value={lang}>{loadFlagEmoji(lang)} {lang}</option>
+ {/each}
+ </select>
+ </div>
{/if}
</label>
</div>
<div class="form-text">
{$t('settings.language.reload_info')}
</div>
+ <div class="alert alert-info rounded-4 mt-2" role="alert">
+ {$t('settings.language.help_translate')}
+ <a
+ href="https://github.com/PhiTux/DailyTxT/blob/main/TRANSLATION.md"
+ target="_blank">GitHub</a
+ >
+ </div>
</div>
<div id="timezone">
{#if $tempSettings.useBrowserTimezone !== $settings.useBrowserTimezone || ($tempSettings.timezone !== undefined && $tempSettings.timezone?.value !== $settings.timezone?.value)}
<br />
<SelectTimezone />
{#if !$tempSettings.useBrowserTimezone}
- <span transition:fade>
- {$t('settings.timezone.selected')} <code>{$tempSettings.timezone}</code>
- </span>
+ <div transition:slide>
+ <span>
+ {$t('settings.timezone.selected')} <code>{$tempSettings.timezone}</code>
+ </span>
+ </div>
{/if}
</div>
>{$t('settings.password.confirm_new_password')}</label
>
</div>
- <button class="btn btn-primary" onclick={changePassword}>
+ <button
+ class="btn btn-primary"
+ disabled={!currentPassword || !newPassword || !confirmNewPassword}
+ onclick={changePassword}
+ >
{#if isChangingPassword}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="spinner-border" role="status">
<br />
{#if updateAvailable}
- <p class="alert alert-info d-flex align-items-center mt-2 mb-2 p-2">
+ <p class="alert alert-info rounded-4 d-flex align-items-center mt-2 mb-2 p-2">
<Fa icon={faCircleUp} size="2x" class="text-info me-2" />
{$t('settings.about.update_available')}
</p>
git.99rst.org / DailyTxT.git / commitdiff