add password showing option

This commit is contained in:
HorizonCode 2024-01-11 15:55:56 +01:00
parent 4bd130aad9
commit 67cf564b01

View File

@ -1,16 +1,17 @@
<script lang="ts"> <script lang="ts">
import { Input, Button, Spinner, Checkbox } from "flowbite-svelte"; import { Input, Button, Spinner, Checkbox } from "flowbite-svelte";
import { performLogin } from "../util/loginUtil";
import type { User } from "../types/user"; import type { User } from "../types/user";
import type { Error } from "../types/error"; import type { Error } from "../types/error";
import { currentPage, currentUser, startup } from "../storage/localStore"; import { currentPage, currentUser, startup } from "../storage/localStore";
import toast from "svelte-french-toast"; import toast from "svelte-french-toast";
import { Page } from "../consts/pages"; import { Page } from "../consts/pages";
import { EyeSlashSolid, EyeSolid } from "flowbite-svelte-icons";
let loading = false; let loading = false;
let username = ""; let username = "";
let password = ""; let password = "";
let saveCredentials = false; let saveCredentials = false;
let showPassword = false;
const processLogin = async () => { const processLogin = async () => {
loading = true; loading = true;
@ -122,12 +123,25 @@
bind:value={username} bind:value={username}
/> />
<Input <Input
type="password" type={showPassword ? "text" : "password"}
placeholder="Password" placeholder="Password"
size="md" size="md"
disabled={loading} disabled={loading}
bind:value={password} bind:value={password}
/> >
<Button
slot="right"
color="none"
class="!outline-none !ring-0 !p-0 !m-0 !bg-transparent !border-none"
on:click={() => (showPassword = !showPassword)}
>
{#if showPassword}
<EyeSolid class="outline-none border-none" />
{:else}
<EyeSlashSolid class="outline-none border-none" />
{/if}
</Button>
</Input>
<Checkbox bind:checked={saveCredentials}>Save credentials</Checkbox> <Checkbox bind:checked={saveCredentials}>Save credentials</Checkbox>
<div class="flex flex-col justify-center items-center gap-5 mt-1"> <div class="flex flex-col justify-center items-center gap-5 mt-1">
<Button <Button