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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2244
      client/package-lock.json
  2. 6
      client/src/AccountCard.svelte
  3. 80
      client/src/App.svelte
  4. 72
      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();
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>

80
client/src/App.svelte
Unescape View File

@ -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}

72
client/src/CreateAccount.svelte
Unescape View File

@ -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);
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});
}
})
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}
<option class="custom-option" value={option}>{option}</option>
{/each}
{#await getcurrencies() then result}
{#each result.currencies as option}
<option class="custom-option" value={option}>{option}</option>
{/each}
{/await}
</select>
</div>

5
client/src/Login.svelte
Unescape View File

@ -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);
}

85
client/src/MainPage.svelte
Unescape View File

@ -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}

46
client/src/api.js
Unescape View File

@ -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",

Write Preview
Loading…
Cancel
Save