mirror of
https://github.com/dancojocaru2000/foxbank.git
synced 2025-02-23 06:09:34 +02:00
Create Account Page, Notification Page (wip)
This commit is contained in:
DariusTFox
parent
edc60e44a8
commit
0bfc0d473d
6 changed files with 181 additions and 7 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import BottomBorder from "./BottomBorder.svelte";
|
||||
import CheckNotifications from "./CheckNotifications.svelte";
|
||||
import CreateAccount from "./CreateAccount.svelte";
|
||||
|
||||
import Login from "./Login.svelte";
|
||||
|
|
@ -68,9 +69,9 @@ import TopBorder from "./TopBorder.svelte";
|
|||
|
||||
<main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
|
||||
{#if isCreatingAccount}
|
||||
<CreateAccount> </CreateAccount>
|
||||
<CreateAccount on:createPopup={onCreatePopup}> </CreateAccount>
|
||||
{:else if isCheckingNotifications}
|
||||
<!-- else if content here -->
|
||||
<CheckNotifications on:createPopup={onCreatePopup} notifications={notifications}></CheckNotifications>
|
||||
{:else if isSendingMoney}
|
||||
<!-- else if content here -->
|
||||
{/if}
|
||||
|
|
|
|||
88
client/src/CheckNotifications.svelte
Normal file
88
client/src/CheckNotifications.svelte
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<script>
|
||||
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import {createEventDispatcher} from 'svelte';
|
||||
import Icon from "@iconify/svelte";
|
||||
import { fade, fly, slide } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
import DetailField from "./DetailField.svelte";
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let notifications = [{time: "15:38 27/11/2021", text: "A notification's text."}];
|
||||
|
||||
function cancelCheckNotifications(){
|
||||
dispatch("createPopup",{type:"check_notifications_cancelled"});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="h-full self-center">
|
||||
<div class="h-full flex flex-col justify-center items-center md:items-start">
|
||||
<CardBG class="flex flex-col items-stretch">
|
||||
<div class="flex flex-row">
|
||||
<h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Inbox</h1>
|
||||
<button class="ml-auto mr-6" on:click={cancelCheckNotifications}> <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 mb-3"></div>
|
||||
|
||||
<div class="flex flex-col flex-grow pl-8 pr-10 relative scroller overflow-auto overflow-x-hidden max-h-medium">
|
||||
{#each notifications as notification,i (i)}
|
||||
<div in:slide={{delay:100*i}} out:slide={{delay:50*(notifications.length-i)}}>
|
||||
|
||||
<DetailField class="my-3 py-1 flex-shrink min-w-transaction max-w-4xl">
|
||||
<div class='font-sans text-gray-50 text-2xl mt-2 mx-4 border-b-1'>
|
||||
{notification.text}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class='inline font-sans ml-auto mr-4 text-xl text-gray-100 mt-2 mx-6 border-b-1'>
|
||||
<span> at {notification.time} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DetailField>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="m-2"></div>
|
||||
|
||||
</CardBG>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 2px rgba(141, 140, 140, 0.281);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(238, 236, 236, 0.897);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(182, 182, 182, 0.918);
|
||||
}
|
||||
|
||||
.scroller {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(238, 236, 236, 0.897) rgba(141, 140, 140, 0.281);
|
||||
}
|
||||
|
||||
.max-h-medium {
|
||||
max-height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,7 @@ import Icon from "@iconify/svelte";
|
|||
function create(){
|
||||
if(type == "" || type == null) {
|
||||
alert("Account Name field can not be empty!");
|
||||
console.debug(`account name: ${type}`)
|
||||
}else if(!currencies.includes(currency)){
|
||||
alert("Currency is not supported!");
|
||||
}else if (!termsAccepted){
|
||||
|
|
@ -46,18 +47,18 @@ import Icon from "@iconify/svelte";
|
|||
<CardBG class="flex flex-col items-stretch">
|
||||
<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="16" height="16" /> </button>
|
||||
<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="New Account" isPassword={false} value={type}></InputField>
|
||||
<InputField placeholder="New Account" isPassword={false} bind:value={type}></InputField>
|
||||
</div>
|
||||
|
||||
<div class="mx-1 flex-shrink">
|
||||
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2>
|
||||
<InputField placeholder="RON" isPassword={false} value={currency}></InputField>
|
||||
<InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField>
|
||||
</div>
|
||||
|
||||
<div class="mx-1 flex-shrink max-w-2xl">
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
<CardBG class="flex flex-col items-stretch">
|
||||
<h1 class='font-welcome text-7xl text-gray-50 m-6 border-b-2'>Welcome,</h1>
|
||||
<div class="m-3 flex-shrink">
|
||||
<InputField placeholder="Username" isPassword={false} value={username}></InputField>
|
||||
<InputField placeholder="Username" isPassword={false} bind:value={username}></InputField>
|
||||
</div>
|
||||
|
||||
<div class="m-3 flex-shrink">
|
||||
<InputField placeholder="Code" isPassword={true} value={code}></InputField>
|
||||
<InputField placeholder="Code" isPassword={true} bind:value={code}></InputField>
|
||||
</div>
|
||||
|
||||
<div class="m-3 flex-shrink">
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
{time: "15:38 27/11/2021", text: "A notification's text but longer aaaaaaaaaaaa asddagagfabsdhubaiufbau bdauhsbabsdbayub badysabdyba ybbdbasbd bbdabsdb aybdbaysbdya bybdabs bdabsdbadbua."},
|
||||
{time: "15:38 27/11/2021", text: "A notification's text but way longer absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd."},
|
||||
{time: "15:38 27/11/2021", text: "A notification's text."},
|
||||
{time: "15:38 27/11/2021", text: "A notification's text."},
|
||||
{time: "15:38 27/11/2021", text: "A notification's text."},
|
||||
{time: "15:38 27/11/2021", text: "A notification's text."},
|
||||
{time: "15:38 27/11/2021", text: "A notification's text."},
|
||||
];
|
||||
|
||||
let accounts = [
|
||||
|
|
|
|||
80
client/src/SendMoney.svelte
Normal file
80
client/src/SendMoney.svelte
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<script>
|
||||
import OrangeButton from "./OrangeButton.svelte";
|
||||
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import InputField from "./InputField.svelte";
|
||||
import {createEventDispatcher} from 'svelte';
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let type = "";
|
||||
let currencies = ["RON", "EUR"];
|
||||
let currency = currencies[0];
|
||||
let termsAccepted = false;
|
||||
|
||||
function create(){
|
||||
if(type == "" || type == null) {
|
||||
alert("Account Name field can not be empty!");
|
||||
console.debug(`account name: ${type}`)
|
||||
}else if(!currencies.includes(currency)){
|
||||
alert("Currency is not supported!");
|
||||
}else if (!termsAccepted){
|
||||
alert("Terms of Service not accepted!");
|
||||
}else{
|
||||
//TODO Create account with provided details on the server
|
||||
dispatch("createPopup",{type:"create_acc_success"});
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="h-full self-center">
|
||||
<div class="h-full flex flex-col justify-center items-center md:items-start">
|
||||
<CardBG class="flex flex-col items-stretch">
|
||||
<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="New Account" isPassword={false} bind:value={type}></InputField>
|
||||
</div>
|
||||
|
||||
<div class="mx-1 flex-shrink">
|
||||
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2>
|
||||
<InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField>
|
||||
</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 class="mx-1 flex-shrink">
|
||||
<OrangeButton on:click={create}>Confirm</OrangeButton>
|
||||
</div>
|
||||
|
||||
</CardBG>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue