mirror of
https://github.com/dancojocaru2000/foxbank.git
synced 2025-02-22 23:39:36 +02:00
Updated state management and implemented new account functionality
This commit is contained in:
DariusTFox24
parent
b76cbe77c7
commit
e369315034
7 changed files with 2430 additions and 108 deletions
2244
client/package-lock.json
generated
2244
client/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,7 +13,7 @@
|
|||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
export let type="RON Account";
|
||||
export let name="RON Account";
|
||||
export let currency="RON";
|
||||
export let balance="5425";
|
||||
export let iban="RONFOX62188921";
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
dispatch("createPopup",{
|
||||
type: 'send_money',
|
||||
account: {
|
||||
type,
|
||||
type: name,
|
||||
currency,
|
||||
balance,
|
||||
iban,
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<CardBG class="flex-shrink flex flex-col items-stretch md:self-start mt-16 mb-6 px-6 pt-6 pb-0 max-h-full overflow-clip min-h-0">
|
||||
<div class="flex flex-col flex-shrink">
|
||||
<div class='font-sans mt-2 mx-2 border-b-1'>
|
||||
<h3 class="text-gray-50 inline mr-4">{type}</h3>
|
||||
<h3 class="text-gray-50 inline mr-4">{name}</h3>
|
||||
<span class="text-gray-100">IBAN: {iban}</span>
|
||||
<button on:click={copyIban} class="inline {copied ? "cursor-default" : ""}"> <Icon icon={copied ? "akar-icons:check" : "akar-icons:copy"} color="rgba(249, 250, 251, 1)"/></button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { whoami, createnotification } from "./api";
|
||||
import { onMount, setContext } from "svelte";
|
||||
import { writable, readable } from "svelte/store";
|
||||
import { whoami, createnotification, getaccountlist } from "./api";
|
||||
|
||||
import BottomBorder from "./BottomBorder.svelte";
|
||||
import CheckNotifications from "./CheckNotifications.svelte";
|
||||
|
|
@ -12,16 +13,59 @@
|
|||
import SendMoney from "./SendMoney.svelte";
|
||||
import TopBorder from "./TopBorder.svelte";
|
||||
|
||||
let loggedin = false;
|
||||
function toggleLoggedIn() {
|
||||
loggedin = !loggedin;
|
||||
const userToken = writable(sessionStorage.getItem("token"));
|
||||
userToken.subscribe(newToken => {
|
||||
sessionStorage.setItem("token", newToken);
|
||||
})
|
||||
|
||||
setContext("token", userToken);
|
||||
|
||||
const user = readable(null, set => {
|
||||
const unsubscribe = userToken.subscribe(token => {
|
||||
if(token == null) {
|
||||
set(null);
|
||||
}else{
|
||||
whoami(token)
|
||||
.then(result =>{
|
||||
if(result.status != "success") {
|
||||
$userToken = null;
|
||||
}else {
|
||||
set(result);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
}
|
||||
})
|
||||
|
||||
setContext("user", user);
|
||||
|
||||
const accounts = readable(null, set => {
|
||||
const unsubscribe = userToken.subscribe(token => {
|
||||
if(token == null) {
|
||||
set(null);
|
||||
}else{
|
||||
getaccountlist(token)
|
||||
.then(result =>{
|
||||
set(result);
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
}
|
||||
})
|
||||
|
||||
setContext("accounts", accounts);
|
||||
|
||||
let isCreatingAccount = false;
|
||||
let isCheckingNotifications = false;
|
||||
let isSendingMoney = false;
|
||||
let sendingAccount = "";
|
||||
let notifications = [];
|
||||
|
||||
function onCreatePopup(event) {
|
||||
const eventType = event.detail.type;
|
||||
|
|
@ -38,8 +82,7 @@
|
|||
|
||||
//add notification about created account
|
||||
createnotification(async function() {
|
||||
const token = sessionStorage.getItem("token");
|
||||
const result = await createnotification(token, body, date+time);
|
||||
const result = await createnotification($userToken, body, date+time);
|
||||
if(result.status == "success") {
|
||||
console.log("Succesfully created notification.");
|
||||
}else{
|
||||
|
|
@ -86,26 +129,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
onMount(async function() {
|
||||
const token = sessionStorage.getItem("token");
|
||||
if(token == null){
|
||||
loggedin = false;
|
||||
}else {
|
||||
const result = await whoami(token);
|
||||
if (result.status == "success") {
|
||||
loggedin = true;
|
||||
}else {
|
||||
loggedin = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
|
||||
|
||||
<TopBorder class="flex-shrink"></TopBorder>
|
||||
<div class="flex-grow max-h-full overflow-hidden">
|
||||
{#if loggedin}
|
||||
{#if $user}
|
||||
|
||||
{#if isCreatingAccount}
|
||||
<Overlay>
|
||||
|
|
@ -127,10 +157,10 @@
|
|||
</Overlay>
|
||||
{/if}
|
||||
|
||||
<MainPage on:createPopup={onCreatePopup} on:logOut={toggleLoggedIn}></MainPage>
|
||||
<MainPage on:createPopup={onCreatePopup} on:logOut={()=>$userToken=null}></MainPage>
|
||||
|
||||
{:else}
|
||||
<Login on:loginSuccess={toggleLoggedIn}></Login>
|
||||
<Login on:loginSuccess={(e)=> $userToken = e.detail.token}></Login>
|
||||
{/if}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,44 +3,41 @@
|
|||
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import InputField from "./InputField.svelte";
|
||||
import {createEventDispatcher} from '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 } from "./api";
|
||||
import { createaccount, getcurrencies, getaccounttypes } from "./api";
|
||||
import { getContext } from "svelte";
|
||||
|
||||
const token = getContext("token");
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let type = "";
|
||||
let currencies = [
|
||||
"RON",
|
||||
"USD",
|
||||
"EUR",
|
||||
"GPD",
|
||||
];
|
||||
let currency = currencies[0];
|
||||
let type = null;
|
||||
let name = "";
|
||||
let currency = null;
|
||||
let termsAccepted = false;
|
||||
$: placeholder = type==null ? "Checking Account" : `${type} Account`;
|
||||
|
||||
function create(){
|
||||
if(type == "" || type == null) {
|
||||
async function create(){
|
||||
if(name == "" || name == 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(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{
|
||||
createaccount(async function() {
|
||||
const token = sessionStorage.getItem("token");
|
||||
const result = await createaccount(token, type, currency);
|
||||
const result = await createaccount($token, name, currency, type);
|
||||
if(result.status == "success") {
|
||||
dispatch("createPopup",{type:"create_acc_success", account:{type:type, currency:currency, transactions:[]}});
|
||||
}else{
|
||||
dispatch("createPopup",{type:"create_acc_failed", reason:"Failed to create account. Error:"+result.status});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,6 +53,11 @@
|
|||
termsAccepted = !termsAccepted;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
getcurrencies().then(result => currency = result.currencies[0]);
|
||||
getaccounttypes().then(result => type = result.accountTypes[0]);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -71,16 +73,30 @@
|
|||
|
||||
<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>
|
||||
<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>
|
||||
<!-- <InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField> -->
|
||||
<select bind:value={currency}>
|
||||
{#each currencies as option}
|
||||
{#await getcurrencies() then result}
|
||||
{#each result.currencies as option}
|
||||
<option class="custom-option" value={option}>{option}</option>
|
||||
{/each}
|
||||
{/await}
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,9 @@
|
|||
async function checkLogin(){
|
||||
const result = await login(username, code);
|
||||
if(result.status == "success") {
|
||||
sessionStorage.setItem("token", result.token);
|
||||
dispatch("loginSuccess",null);
|
||||
dispatch("loginSuccess",{
|
||||
token: result.token,
|
||||
});
|
||||
}else{
|
||||
alert(result.code);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
<script>
|
||||
import Icon from '@iconify/svelte';
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import {createEventDispatcher, onMount} from 'svelte';
|
||||
import {createEventDispatcher, onMount, getContext} from 'svelte';
|
||||
import AccountCard from './AccountCard.svelte';
|
||||
import GreenButton from './GreenButton.svelte';
|
||||
import { fade, fly, slide } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { logout, whoami, getaccountlist } from './api';
|
||||
|
||||
const token = getContext("token");
|
||||
const user = getContext("user");
|
||||
const accountsStore = getContext("accounts");
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let fullname = "";
|
||||
let username = "";
|
||||
let email = "";
|
||||
let code = "";
|
||||
$: fullname = $user.user.fullname;
|
||||
$: username = $user.user.username;
|
||||
$: email = $user.user.email;
|
||||
let totalbalance = "2455.22";
|
||||
let maincurrency = "RON";
|
||||
let expandedAccount = null;
|
||||
|
|
@ -28,34 +30,45 @@
|
|||
|
||||
];
|
||||
|
||||
let accounts = [
|
||||
{type:"RON Account", currency:"RON", balance:"420.42", iban:"RONFOX62188921",
|
||||
$: accounts = $accountsStore ? $accountsStore.accounts.map(account => {
|
||||
return {
|
||||
name: account.customName ? account.customName : `${account.accountType} Account`,
|
||||
currency: account.currency,
|
||||
balance: "123.12",
|
||||
iban: account.iban.replace(/(.{4})/g, "$1 "),
|
||||
transactions: [
|
||||
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
]
|
||||
},
|
||||
{type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921",
|
||||
transactions: [
|
||||
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
]
|
||||
},
|
||||
];
|
||||
],
|
||||
}
|
||||
}) : [];
|
||||
// let accounts = [
|
||||
// {type:"RON Account", currency:"RON", balance:"420.42", iban:"RONFOX62188921",
|
||||
// transactions: [
|
||||
// {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
// {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
// {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
// {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// ]
|
||||
// },
|
||||
// {type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921",
|
||||
// transactions: [
|
||||
// {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
|
||||
// {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// {title:"Transaction Name#3", status:"CANCELLED", amount:"-469.09", time:"15:38 27/11/2021", type:"send"},
|
||||
// ]
|
||||
// },
|
||||
// ];
|
||||
|
||||
function dispatchLogout(){
|
||||
//todo: CHeck here
|
||||
if (confirm("Log out?")) {
|
||||
logout(sessionStorage.getItem("token"));
|
||||
sessionStorage.removeItem("token");
|
||||
logout($token);
|
||||
dispatch("logOut",null);
|
||||
}
|
||||
}
|
||||
|
|
@ -92,33 +105,17 @@
|
|||
});
|
||||
}
|
||||
|
||||
onMount( async function() {
|
||||
const token = sessionStorage.getItem("token");
|
||||
const result = await whoami(token);
|
||||
if(result.status == "success") {
|
||||
fullname = result.user.fullname;
|
||||
email = result.user.email;
|
||||
username = result.user.username;
|
||||
|
||||
//get the list of accounts
|
||||
const accresult = await getaccountlist(username, token);
|
||||
if(accresult == "success"){
|
||||
accounts = accresult.user.accounts;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<main class="h-full flex flex-col items-stretch md:flex-row">
|
||||
<div class="flex flex-col items-stretch max-h-full">
|
||||
{#if expandedAccount || expandedAccount === 0}
|
||||
<AccountCard type={accounts[expandedAccount].type} currency={accounts[expandedAccount].currency} balance={accounts[expandedAccount].balance} iban={accounts[expandedAccount].iban} transactions={accounts[expandedAccount].transactions} isExpanded={true} on:expanded={() => expanded(null)}></AccountCard>
|
||||
<AccountCard name={accounts[expandedAccount].name} currency={accounts[expandedAccount].currency} balance={accounts[expandedAccount].balance} iban={accounts[expandedAccount].iban} transactions={accounts[expandedAccount].transactions} isExpanded={true} on:expanded={() => expanded(null)}></AccountCard>
|
||||
{:else}
|
||||
{#if showAllAccounts}
|
||||
{#each accounts as account,i}
|
||||
<div in:slide={{delay:500*i, duration:250*(i==0 ? 1 : i) }}>
|
||||
<AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)} on:createPopup></AccountCard>
|
||||
<AccountCard name={account.name} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)} on:createPopup></AccountCard>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export async function logout(token) {
|
|||
|
||||
export async function getaccountlist(token) {
|
||||
try {
|
||||
const result = await fetch(new URL("/accounts", baseURL), {
|
||||
const result = await fetch(new URL("/accounts/", baseURL), {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
@ -76,6 +76,42 @@ export async function getaccountlist(token) {
|
|||
}
|
||||
}
|
||||
|
||||
export async function getcurrencies() {
|
||||
try {
|
||||
const result = await fetch(new URL("/accounts/meta/currencies", baseURL), {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
return (await result.json());
|
||||
} catch (error) {
|
||||
return {
|
||||
status: "error",
|
||||
code: "request/failure"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function getaccounttypes() {
|
||||
try {
|
||||
const result = await fetch(new URL("/accounts/meta/account_types", baseURL), {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
return (await result.json());
|
||||
} catch (error) {
|
||||
return {
|
||||
status: "error",
|
||||
code: "request/failure"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export async function getnotificationlist(token) {
|
||||
try {
|
||||
|
|
@ -115,12 +151,14 @@ export async function gettransactions(token, id) {
|
|||
}
|
||||
}
|
||||
|
||||
export async function createaccount(token, name, currency) {
|
||||
export async function createaccount(token, name, currency, type) {
|
||||
try {
|
||||
const result = await fetch(new URL("/account/create", baseURL), {
|
||||
const result = await fetch(new URL("/accounts/", baseURL), {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
name, currency,
|
||||
customName: name,
|
||||
currency: currency,
|
||||
accountType: type,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue