mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-21 17:32:41 +00:00
38
src/routes/config/settings/ConfirmChallenge.svelte
Normal file
38
src/routes/config/settings/ConfirmChallenge.svelte
Normal file
@@ -0,0 +1,38 @@
|
||||
<script lang="ts">
|
||||
import {serialPort} from "$lib/serial/connection"
|
||||
import {createEventDispatcher} from "svelte"
|
||||
|
||||
export let challenge: string
|
||||
|
||||
let challengeInput = ""
|
||||
$: challengeString = `${challenge} ${$serialPort!.device}`
|
||||
$: isValid = challengeInput === challengeString
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<h3>Type the following to confim the action</h3>
|
||||
|
||||
<p>{challengeString}</p>
|
||||
<input type="text" bind:value={challengeInput} placeholder={challengeString} />
|
||||
|
||||
<button disabled={!isValid} on:click={() => dispatch("confirm")}>Confirm {challenge}</button>
|
||||
|
||||
<style lang="scss">
|
||||
input[type="text"] {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid currentcolor;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user