<script> import OrangeButton from "./OrangeButton.svelte"; import CardBG from "./CardBG.svelte"; import InputField from "./InputField.svelte"; import {createEventDispatcher, onMount} from 'svelte'; import Icon from "@iconify/svelte"; import Overlay from "./Overlay.svelte"; import { fade, fly, slide } from 'svelte/transition'; import { flip } from 'svelte/animate'; import { createaccount, getcurrencies, getaccounttypes } from "./api"; import { getContext } from "svelte"; const token = getContext("token"); const refreshAccounts = getContext("refreshAccounts"); const dispatch = createEventDispatcher(); let type = null; let name = ""; let currency = null; let termsAccepted = false; $: placeholder = type==null ? "Checking Account" : `${type} Account`; async function create(){ if(type == null){ alert("Type is not selected!"); }else if(currency == null){ alert("Currency is not selected!"); }else if (!termsAccepted){ alert("Terms of Service not accepted!"); }else{ const result = await createaccount($token, name, currency, type); if(result.status == "success") { dispatch("createPopup",{type:"create_acc_success"}); if($refreshAccounts){ $refreshAccounts(); } }else{ dispatch("createPopup",{type:"create_acc_failed", reason:"Failed to create account. Error:"+result.status}); } } } function cancelCreate(){ dispatch("createPopup",{type:"create_acc_cancelled"}); } function failCreate(){ dispatch("createPopup",{type:"create_acc_failed", reason:"Invalid arguments. [type: "+type+", currency: "+currency}); } function termsOfService() { termsAccepted = !termsAccepted; } onMount(() => { getcurrencies().then(result => currency = result.currencies[0]); getaccounttypes().then(result => type = result.accountTypes[0]); }) </script> <div class="h-full self-center" in:fade={{duration:300}} out:fade={{duration:300}}> <div class="h-full flex flex-col justify-center items-center md:items-start"> <CardBG padding={false} class="flex flex-col items-stretch"> <div class="m-3"> <div class="flex flex-row"> <h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1> <button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button> </div> <div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div> <div class="mx-1 flex-shrink"> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2> <InputField placeholder={placeholder} isPassword={false} bind:value={name}></InputField> </div> <div class="mx-1 flex-shrink"> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Type:</h2> <select bind:value={type}> {#await getaccounttypes() then result} {#each result.accountTypes as option} <option class="custom-option" value={option}>{option}</option> {/each} {/await} </select> </div> <div class="mx-1 flex-shrink"> <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2> <select bind:value={currency}> {#await getcurrencies() then result} {#each result.currencies as option} <option class="custom-option" value={option}>{option}</option> {/each} {/await} </select> </div> <div class="mx-1 flex-shrink max-w-2xl"> <h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2> <button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button> <h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3> </div> <div class="m-10"></div> </div> <div class="flex-shrink flex flex-row mb-4" style="background: linear-gradient(89.1deg, rgba(236, 98, 68, 0.95) 0.77%, rgba(236, 98, 68, 0) 99.12%);"> <div class="flex-1"></div> <OrangeButton class="flex-1 m-4" on:click={create}>Confirm</OrangeButton> </div> </CardBG> </div> </div> <style> select{ min-width: 120px; min-height: 32px; color: rgba(233, 231, 231, 0.842); background: linear-gradient(92.55deg, rgba(76, 172, 135, 0.95) -28.27%, rgba(249, 224, 127, 0.096) 115.79%); filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.25)); border-radius: 3px; } select option{ min-width: 120px; min-height: 32px; color: rgba(233, 231, 231, 0.842); background: linear-gradient(92.55deg, rgba(76, 172, 135, 0.95) -28.27%, rgba(249, 224, 127, 0.096) 115.79%); filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.25)); border-radius: 3px; } </style>