Gani Georgiev
70 lines
1.9 KiB
Svelte
70 lines
1.9 KiB
Svelte
<script>
|
|
import { createEventDispatcher, tick } from "svelte";
|
|
import CommonHelper from "@/utils/CommonHelper";
|
|
import Toggler from "@/components/base/Toggler.svelte";
|
|
import CopyIcon from "@/components/base/CopyIcon.svelte";
|
|
import tooltip from "@/actions/tooltip";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
let classes = "btn-sm btn-hint btn-transparent";
|
|
export { classes as class };
|
|
|
|
export let length = 32;
|
|
|
|
let secret = "";
|
|
let secretElem;
|
|
let togglerActive = false;
|
|
|
|
async function generate() {
|
|
secret = CommonHelper.randomSecret(length);
|
|
|
|
dispatch("generate", secret);
|
|
|
|
await tick();
|
|
|
|
if (secretElem) {
|
|
let range = document.createRange();
|
|
range.selectNode(secretElem);
|
|
window.getSelection().removeAllRanges();
|
|
window.getSelection().addRange(range);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
tabindex="-1"
|
|
type="button"
|
|
aria-label="Generate"
|
|
class="btn btn-circle {classes}"
|
|
use:tooltip={togglerActive ? "" : "Generate"}
|
|
>
|
|
<i class="ri-sparkling-line" aria-hidden="true" />
|
|
<Toggler
|
|
class="dropdown dropdown-upside dropdown-center dropdown-nowrap"
|
|
bind:active={togglerActive}
|
|
on:show={generate}
|
|
>
|
|
<div class="flex flex-gap-5 p-5">
|
|
<span bind:this={secretElem} class="secret">{secret}</span>
|
|
<CopyIcon value={secret} />
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<i
|
|
class="ri-refresh-line txt-sm link-hint"
|
|
use:tooltip={"Refresh"}
|
|
aria-label="Refresh"
|
|
on:click={generate}
|
|
/>
|
|
</div>
|
|
</Toggler>
|
|
</button>
|
|
|
|
<style>
|
|
.secret {
|
|
font-family: monospace;
|
|
font-weight: normal;
|
|
user-select: all;
|
|
}
|
|
</style>
|