From 0e27defbdc5709381682c55efade31a33476186d Mon Sep 17 00:00:00 2001 From: DariusTFox Date: Wed, 8 Dec 2021 13:54:31 +0200 Subject: [PATCH 1/3] Partial API frontend implementation --- client/src/App.svelte | 21 ++++-- client/src/CreateAccount.svelte | 12 ++- client/src/MainPage.svelte | 8 +- client/src/api.js | 125 ++++++++++++++++++++++++++++++++ 4 files changed, 156 insertions(+), 10 deletions(-) diff --git a/client/src/App.svelte b/client/src/App.svelte index 0f9a314..5c629fe 100644 --- a/client/src/App.svelte +++ b/client/src/App.svelte @@ -1,6 +1,6 @@
- {#if loggedin} + {#if $user} {#if isCreatingAccount} @@ -127,10 +157,10 @@ {/if} - + $userToken=null}> {:else} - + $userToken = e.detail.token}> {/if} diff --git a/client/src/CreateAccount.svelte b/client/src/CreateAccount.svelte index d8c7955..c715c48 100644 --- a/client/src/CreateAccount.svelte +++ b/client/src/CreateAccount.svelte @@ -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]); + }) + @@ -71,16 +73,30 @@

Account name:

- + +
+ +
+

Type:

+

Currency:

-
diff --git a/client/src/Login.svelte b/client/src/Login.svelte index e0184b8..a4780a3 100644 --- a/client/src/Login.svelte +++ b/client/src/Login.svelte @@ -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); } diff --git a/client/src/MainPage.svelte b/client/src/MainPage.svelte index b18f5bd..2214e33 100644 --- a/client/src/MainPage.svelte +++ b/client/src/MainPage.svelte @@ -1,20 +1,22 @@
{#if expandedAccount || expandedAccount === 0} - expanded(null)}> + expanded(null)}> {:else} {#if showAllAccounts} {#each accounts as account,i}
- expanded(i)} on:createPopup> + expanded(i)} on:createPopup>
{/each} {/if} diff --git a/client/src/api.js b/client/src/api.js index facf8d9..ccae9f4 100644 --- a/client/src/api.js +++ b/client/src/api.js @@ -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",