Login in Svelte

example.svelte

<script>
	// Aqui usamos const porque os valores CERTOS nao mudam
	const emailCerto = "fabio@fabio"
	const senhaCerta = "fabio123" 
	
	// Aqui usamos let porque os valores que a pessoa ESTA ESCREVENDO vao mudar
	let email = ''
	let senha = ''
	
	// Aqui estamos guardando o estado do nosso formulario
	// Ele comeca deslogado
	let logado = false
	// E sem ter errrado 
	let errado = false
	
	const onLogin = () => { 
		// Se o email for o certo E (&&) a senha for o certo
		// o === pergunta se um valor é igual ao outro
		if (email === emailCerto && senha === senhaCerta) {
			// Quando acerta, logamos ele
			logado = true
			// E dizemos que ele nao esta mais errado, caso tenha errado antes
			errado = false
		} else {
			// Senão (caso o email OU a senha nao forem iguals aos certos)
			// Então ele esta errado
			errado = true
			// E nao esta mais logado
			logado = false
		}
	}
</script>
<div style="background-color: gray">
	<!-- bind:value={VARIAVEL} a VARIAVEL usada no bind sempre tem que ser LET, porque vai ser alterada -->
	<input bind:value={email} type=email style="border-color: blue; margin-left:200px; margin-top: 10px;">
	 <input bind:value={senha} type=password style="border-color: blue; margin-left:200px; ">
	 <button on:click={onLogin} style="background-color: blue; margin-left:265px; color: white">
		 LOGIN
	</button>

</div>

{#if logado}
	<p>Voce esta logado</p>
{:else}
	<p>Loga ai, parceiro</p>
{/if}

{#if errado}
	<p style="color: red;">Voce nao colocou o email e senha certos</p>
{/if}