kbruen
/
foxbank
mirror of https://github.com/dancojocaru2000/foxbank.git
1
0
Fork 0
Code Releases Activity
Browse Source

Updated state management and implemented new account functionality

pull/6/head
DariusTFox24 3 years ago
parent
b76cbe77c7
commit
e369315034
7 changed files with 2430 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2244
      client/package-lock.json
  2. 6
      client/src/AccountCard.svelte
  3. 78
      client/src/App.svelte
  4. 58
      client/src/CreateAccount.svelte
  5. 5
      client/src/Login.svelte
  6. 85
      client/src/MainPage.svelte
  7. 46
      client/src/api.js

2244
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
client/src/AccountCard.svelte
Unescape View File

@ -13,7 +13,7 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let type="RON Account"; export let name="RON Account";
export let currency="RON"; export let currency="RON";
export let balance="5425"; export let balance="5425";
export let iban="RONFOX62188921"; export let iban="RONFOX62188921";
@ -42,7 +42,7 @@
dispatch("createPopup",{ dispatch("createPopup",{
type: 'send_money', type: 'send_money',
account: { account: {
type, type: name,
currency, currency,
balance, balance,
iban, 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"> <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="flex flex-col flex-shrink">
<div class='font-sans mt-2 mx-2 border-b-1'> <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> <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> <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> </div>

78
client/src/App.svelte
Unescape View File

@ -1,6 +1,7 @@
<script> <script>
import { onMount } from "svelte"; import { onMount, setContext } from "svelte";
import { whoami, createnotification } from "./api"; import { writable, readable } from "svelte/store";
import { whoami, createnotification, getaccountlist } from "./api";
import BottomBorder from "./BottomBorder.svelte"; import BottomBorder from "./BottomBorder.svelte";
import CheckNotifications from "./CheckNotifications.svelte"; import CheckNotifications from "./CheckNotifications.svelte";
@ -12,16 +13,59 @@
import SendMoney from "./SendMoney.svelte"; import SendMoney from "./SendMoney.svelte";
import TopBorder from "./TopBorder.svelte"; import TopBorder from "./TopBorder.svelte";
let loggedin = false; const userToken = writable(sessionStorage.getItem("token"));
function toggleLoggedIn() { userToken.subscribe(newToken => {
loggedin = !loggedin; 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 isCreatingAccount = false;
let isCheckingNotifications = false; let isCheckingNotifications = false;
let isSendingMoney = false; let isSendingMoney = false;
let sendingAccount = ""; let sendingAccount = "";
let notifications = [];
function onCreatePopup(event) { function onCreatePopup(event) {
const eventType = event.detail.type; const eventType = event.detail.type;
@ -38,8 +82,7 @@
//add notification about created account //add notification about created account
createnotification(async function() { createnotification(async function() {
const token = sessionStorage.getItem("token"); const result = await createnotification($userToken, body, date+time);
const result = await createnotification(token, body, date+time);
if(result.status == "success") { if(result.status == "success") {
console.log("Succesfully created notification."); console.log("Succesfully created notification.");
}else{ }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> </script>
<main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans"> <main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
<TopBorder class="flex-shrink"></TopBorder> <TopBorder class="flex-shrink"></TopBorder>
<div class="flex-grow max-h-full overflow-hidden"> <div class="flex-grow max-h-full overflow-hidden">
{#if loggedin} {#if $user}
{#if isCreatingAccount} {#if isCreatingAccount}
<Overlay> <Overlay>
@ -127,10 +157,10 @@
</Overlay> </Overlay>
{/if} {/if}
<MainPage on:createPopup={onCreatePopup} on:logOut={toggleLoggedIn}></MainPage> <MainPage on:createPopup={onCreatePopup} on:logOut={()=>$userToken=null}></MainPage>
{:else} {:else}
<Login on:loginSuccess={toggleLoggedIn}></Login> <Login on:loginSuccess={(e)=> $userToken = e.detail.token}></Login>
{/if} {/if}

58
client/src/CreateAccount.svelte
Unescape View File

@ -3,44 +3,41 @@
import CardBG from "./CardBG.svelte"; import CardBG from "./CardBG.svelte";
import InputField from "./InputField.svelte"; import InputField from "./InputField.svelte";
import {createEventDispatcher} from 'svelte'; import {createEventDispatcher, onMount} from 'svelte';
import Icon from "@iconify/svelte"; import Icon from "@iconify/svelte";
import Overlay from "./Overlay.svelte"; import Overlay from "./Overlay.svelte";
import { fade, fly, slide } from 'svelte/transition'; import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate'; 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(); const dispatch = createEventDispatcher();
let type = ""; let type = null;
let currencies = [ let name = "";
"RON", let currency = null;
"USD",
"EUR",
"GPD",
];
let currency = currencies[0];
let termsAccepted = false; let termsAccepted = false;
$: placeholder = type==null ? "Checking Account" : `${type} Account`;
function create(){ async function create(){
if(type == "" || type == null) { if(name == "" || name == null) {
alert("Account Name field can not be empty!"); alert("Account Name field can not be empty!");
console.debug(`account name: ${type}`) console.debug(`account name: ${type}`)
}else if(!currencies.includes(currency)){ }else if(type == null){
alert("Currency is not supported!"); alert("Type is not selected!");
}else if(currency == null){
alert("Currency is not selected!");
}else if (!termsAccepted){ }else if (!termsAccepted){
alert("Terms of Service not accepted!"); alert("Terms of Service not accepted!");
}else{ }else{
createaccount(async function() { const result = await createaccount($token, name, currency, type);
const token = sessionStorage.getItem("token");
const result = await createaccount(token, type, currency);
if(result.status == "success") { if(result.status == "success") {
dispatch("createPopup",{type:"create_acc_success", account:{type:type, currency:currency, transactions:[]}}); dispatch("createPopup",{type:"create_acc_success", account:{type:type, currency:currency, transactions:[]}});
}else{ }else{
dispatch("createPopup",{type:"create_acc_failed", reason:"Failed to create account. Error:"+result.status}); dispatch("createPopup",{type:"create_acc_failed", reason:"Failed to create account. Error:"+result.status});
} }
})
} }
} }
@ -56,6 +53,11 @@
termsAccepted = !termsAccepted; termsAccepted = !termsAccepted;
} }
onMount(() => {
getcurrencies().then(result => currency = result.currencies[0]);
getaccounttypes().then(result => type = result.accountTypes[0]);
})
</script> </script>
@ -71,16 +73,30 @@
<div class="mx-1 flex-shrink"> <div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2> <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>
<div class="mx-1 flex-shrink"> <div class="mx-1 flex-shrink">
<h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2> <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}> <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> <option class="custom-option" value={option}>{option}</option>
{/each} {/each}
{/await}
</select> </select>
</div> </div>

5
client/src/Login.svelte
Unescape View File

@ -15,8 +15,9 @@
async function checkLogin(){ async function checkLogin(){
const result = await login(username, code); const result = await login(username, code);
if(result.status == "success") { if(result.status == "success") {
sessionStorage.setItem("token", result.token); dispatch("loginSuccess",{
dispatch("loginSuccess",null); token: result.token,
});
}else{ }else{
alert(result.code); alert(result.code);
} }

85
client/src/MainPage.svelte
Unescape View File

@ -1,20 +1,22 @@
<script> <script>
import Icon from '@iconify/svelte'; import Icon from '@iconify/svelte';
import CardBG from "./CardBG.svelte"; import CardBG from "./CardBG.svelte";
import {createEventDispatcher, onMount} from 'svelte'; import {createEventDispatcher, onMount, getContext} from 'svelte';
import AccountCard from './AccountCard.svelte'; import AccountCard from './AccountCard.svelte';
import GreenButton from './GreenButton.svelte'; import GreenButton from './GreenButton.svelte';
import { fade, fly, slide } from 'svelte/transition'; import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import { logout, whoami, getaccountlist } from './api'; import { logout, whoami, getaccountlist } from './api';
const token = getContext("token");
const user = getContext("user");
const accountsStore = getContext("accounts");
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let fullname = ""; $: fullname = $user.user.fullname;
let username = ""; $: username = $user.user.username;
let email = ""; $: email = $user.user.email;
let code = "";
let totalbalance = "2455.22"; let totalbalance = "2455.22";
let maincurrency = "RON"; let maincurrency = "RON";
let expandedAccount = null; let expandedAccount = null;
@ -28,34 +30,45 @@
]; ];
let accounts = [ $: accounts = $accountsStore ? $accountsStore.accounts.map(account => {
{type:"RON Account", currency:"RON", balance:"420.42", iban:"RONFOX62188921", return {
name: account.customName ? account.customName : `${account.accountType} Account`,
currency: account.currency,
balance: "123.12",
iban: account.iban.replace(/(.{4})/g, "$1 "),
transactions: [ transactions: [
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.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#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"}, // let accounts = [
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"}, // {type:"RON Account", currency:"RON", balance:"420.42", iban:"RONFOX62188921",
{title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"}, // transactions: [
{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", // {title:"Transaction Name#1", status:"PROCESSED", amount:"-45.09", time:"15:38 27/11/2021", type:"send"},
transactions: [ // {title:"Transaction Name#2", status:"PENDING", amount:"+25.00", time:"15:38 27/11/2021", type:"received"},
{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#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"}, // {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(){ function dispatchLogout(){
//todo: CHeck here //todo: CHeck here
if (confirm("Log out?")) { if (confirm("Log out?")) {
logout(sessionStorage.getItem("token")); logout($token);
sessionStorage.removeItem("token");
dispatch("logOut",null); 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> </script>
<main class="h-full flex flex-col items-stretch md:flex-row"> <main class="h-full flex flex-col items-stretch md:flex-row">
<div class="flex flex-col items-stretch max-h-full"> <div class="flex flex-col items-stretch max-h-full">
{#if expandedAccount || expandedAccount === 0} {#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} {:else}
{#if showAllAccounts} {#if showAllAccounts}
{#each accounts as account,i} {#each accounts as account,i}
<div in:slide={{delay:500*i, duration:250*(i==0 ? 1 : 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> </div>
{/each} {/each}
{/if} {/if}

46
client/src/api.js
Unescape View File

@ -59,7 +59,7 @@ export async function logout(token) {
export async function getaccountlist(token) { export async function getaccountlist(token) {
try { try {
const result = await fetch(new URL("/accounts", baseURL), { const result = await fetch(new URL("/accounts/", baseURL), {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "application/json", "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) { export async function getnotificationlist(token) {
try { 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 { try {
const result = await fetch(new URL("/account/create", baseURL), { const result = await fetch(new URL("/accounts/", baseURL), {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
name, currency, customName: name,
currency: currency,
accountType: type,
}), }),
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",

Write Preview
Loading…
Cancel
Save