Cleaning Up files
This commit is contained in:
Samuel Andert
@ -1,6 +1,5 @@
|
||||
// src/lib/components/Recipies/machines/authMachine.ts
|
||||
import { createMachine } from 'xstate';
|
||||
import { formMachine } from './formMachine';
|
||||
|
||||
export const recipeMachine = createMachine(
|
||||
{
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
<script>
|
||||
export let services;
|
||||
export let store;
|
||||
|
||||
let isStoreLoaded = false;
|
||||
|
||||
$: if (services && services.helloEarthAlert) {
|
||||
// services.helloEarthAlert.alertMe();
|
||||
}
|
||||
$: if (services.core) {
|
||||
// services.core.testAlert();
|
||||
}
|
||||
|
||||
$: if ($store) isStoreLoaded = true;
|
||||
</script>
|
||||
|
||||
{#if isStoreLoaded}
|
||||
<div class="container p-12">
|
||||
<h1 class="h1">
|
||||
{#if $store.title}{$store.title}{/if}
|
||||
</h1>
|
||||
<h2 class="py-6 h2">
|
||||
{#if $store.description}{$store.description}{/if}
|
||||
</h2>
|
||||
<h3 class="mt-4 h3">Wallet Address</h3>
|
||||
{#if $store.pkpWallet}
|
||||
<p>{$store.pkpWallet.address}</p>
|
||||
{/if}
|
||||
|
||||
<h4 class="mt-4 h4">store: hello (init default)</h4>
|
||||
{#if $store.hello}{$store.hello}{/if}
|
||||
<h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
|
||||
{#if $store.hello2}{$store.hello2}{/if}
|
||||
|
||||
<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
|
||||
{#if $store.todos}
|
||||
<dl class="list-dl">
|
||||
{#each $store.todos as todo}
|
||||
<div>
|
||||
<span class="flex-auto">
|
||||
<dd>{todo.text}</dd>
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</dl>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="container">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
{/if}
|
||||
@ -1,69 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { superForm } from 'sveltekit-superforms/client';
|
||||
import { UserSchema } from '$lib/types/UserSchema';
|
||||
import currentStep from './Recipies.svelte';
|
||||
|
||||
const initialFormData = { name: '', email: '' };
|
||||
|
||||
const { form, errors, validate, constraints } = superForm(initialFormData, {
|
||||
validators: UserSchema,
|
||||
warnings: {
|
||||
noValidationAndConstraints: false
|
||||
},
|
||||
validationMethod: 'oninput',
|
||||
clearOnSubmit: 'errors-and-message'
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
const validationResult = await validate();
|
||||
|
||||
if (validationResult.valid) {
|
||||
console.log(form);
|
||||
currentStep.update((val) => val + 1); // move to the next step
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
|
||||
<div class="mb-4">
|
||||
{#if $errors.name}
|
||||
<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
|
||||
{:else}
|
||||
<label for="name" class="block mb-2 font-semibold text-white">Name</label>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
bind:value={$form.name}
|
||||
aria-invalid={$errors.name ? 'true' : undefined}
|
||||
{...constraints.name}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{#if $errors.email}
|
||||
<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
|
||||
{:else}
|
||||
<label for="email" class="block mb-2 font-semibold text-white">Email</label>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
bind:value={$form.email}
|
||||
aria-invalid={$errors.email ? 'true' : undefined}
|
||||
{...constraints.email}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
disabled={$errors.name || $errors.email}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
@ -1,50 +0,0 @@
|
||||
<!-- src/lib/components/machines/SignIn.svelte -->
|
||||
<script lang="ts">
|
||||
import { useMachine } from '@xstate/svelte';
|
||||
import { SignInMachine } from './signInMachine';
|
||||
import { superForm } from 'sveltekit-superforms/client';
|
||||
import { HelloUserSchema } from '$lib/types/HelloUserSchema';
|
||||
|
||||
const { state, send } = useMachine(SignInMachine);
|
||||
|
||||
const initialFormData = {
|
||||
email: '',
|
||||
name: ''
|
||||
};
|
||||
|
||||
const { form, errors, validate, constraints } = superForm(initialFormData, {
|
||||
validators: HelloUserSchema,
|
||||
warnings: {
|
||||
noValidationAndConstraints: false
|
||||
},
|
||||
validationMethod: 'oninput',
|
||||
clearOnSubmit: 'errors-and-message'
|
||||
});
|
||||
|
||||
async function handleNext(field) {
|
||||
const validationResult = await validate(field);
|
||||
if (validationResult.valid) {
|
||||
send({ type: 'NEXT', value: form[field] });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $state.matches('notSignedIn')}
|
||||
<button on:click={() => send('START')}>Start Sign In</button>
|
||||
{:else if $state.matches('email')}
|
||||
<div>
|
||||
<label for="email">Email:</label>
|
||||
<input id="email" type="email" bind:value={form.email} {...constraints.email} />
|
||||
{#if errors.email}<span>{$errors.email}</span>{/if}
|
||||
<button on:click={() => handleNext('email')}>Next</button>
|
||||
</div>
|
||||
{:else if $state.matches('name')}
|
||||
<div>
|
||||
<label for="name">Name:</label>
|
||||
<input id="name" type="text" bind:value={form.name} {...constraints.name} />
|
||||
{#if errors.name}<span>{$errors.name}</span>{/if}
|
||||
<button on:click={() => handleNext('name')}>Next</button>
|
||||
</div>
|
||||
{:else if $state.matches('signedIn')}
|
||||
<!-- <Composite id="account" component="Account" /> -->account signed in
|
||||
{/if}
|
||||
@ -1,35 +0,0 @@
|
||||
// src/lib/components/machines/SignInMachine.ts
|
||||
import { createMachine, assign } from 'xstate';
|
||||
|
||||
export const SignInMachine = createMachine({
|
||||
id: 'signIn',
|
||||
initial: 'notSignedIn',
|
||||
context: {
|
||||
email: '',
|
||||
name: ''
|
||||
},
|
||||
states: {
|
||||
notSignedIn: {
|
||||
on: { START: 'email' }
|
||||
},
|
||||
email: {
|
||||
on: {
|
||||
NEXT: {
|
||||
target: 'name',
|
||||
actions: assign({ email: (_, event) => event.value })
|
||||
}
|
||||
}
|
||||
},
|
||||
name: {
|
||||
on: {
|
||||
NEXT: {
|
||||
target: 'signedIn',
|
||||
actions: assign({ name: (_, event) => event.value })
|
||||
}
|
||||
}
|
||||
},
|
||||
signedIn: {
|
||||
type: 'final'
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -70,6 +70,7 @@
|
||||
</script>
|
||||
|
||||
<div class="w-full p-6 border-2 border-red-500">
|
||||
My ID is: {$me.id} <br />
|
||||
My state is: {$me.state}
|
||||
{#if $successMessage}
|
||||
<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
export let me;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-screen border-2 border-green-500">
|
||||
<div class="flex flex-col w-full h-full border-2 border-green-500">
|
||||
<section class="p-8 h-96">
|
||||
<p>My ID is: {$me.id}</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user