diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml new file mode 100644 index 0000000..bf07d0a --- /dev/null +++ b/.github/workflows/firebase-hosting-merge.yml @@ -0,0 +1,26 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Firebase Hosting on push +'on': + push: + branches: + - master +jobs: + build_and_deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - name: Install npm dependencies + working-directory: ./client + run: npm install + - name: Build Svelte app + working-directory: ./client + run: npm run build + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + entryPoint: ./client + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_FOXBANK_69 }}' + channelId: live + projectId: foxbank-69 diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml new file mode 100644 index 0000000..6cb48b4 --- /dev/null +++ b/.github/workflows/firebase-hosting-pull-request.yml @@ -0,0 +1,30 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Firebase Hosting on PR +'on': + pull_request: + branches: + - master + - Frontend + push: + branches: + - Frontend +jobs: + build_and_preview: + if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - name: Install npm dependencies + working-directory: ./client + run: npm install + - name: Build Svelte app + working-directory: ./client + run: npm run build + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + entryPoint: ./client + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_FOXBANK_69 }}' + projectId: foxbank-69 diff --git a/client/.firebaserc b/client/.firebaserc new file mode 100644 index 0000000..d0af882 --- /dev/null +++ b/client/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "foxbank-69" + } +} diff --git a/client/.vscode/extensions.json b/client/.vscode/extensions.json index 29c5e50..190f3b0 100644 --- a/client/.vscode/extensions.json +++ b/client/.vscode/extensions.json @@ -1,6 +1,7 @@ { "recommendations": [ "svelte.svelte-vscode", - "bradlc.vscode-tailwindcss" + "bradlc.vscode-tailwindcss", + "fivethree.vscode-svelte-snippets" ] } \ No newline at end of file diff --git a/client/firebase.json b/client/firebase.json new file mode 100644 index 0000000..e782939 --- /dev/null +++ b/client/firebase.json @@ -0,0 +1,10 @@ +{ + "hosting": { + "public": "public", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ] + } +} diff --git a/client/package-lock.json b/client/package-lock.json index 7e1d17c..e626018 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -27,6 +27,15 @@ "js-tokens": "^4.0.0" } }, + "@iconify/svelte": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0.tgz", + "integrity": "sha512-p2e42XCAGohnRRhnB/GouMXJtnlUQlbaqC3FEg7+aDOhqA0zGvNJzbvIW1TQJZpW5Leij5UcGP5ImQ5SZ8vJmQ==", + "dev": true, + "requires": { + "cross-fetch": "^3.1.4" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -389,6 +398,15 @@ "yaml": "^1.10.0" } }, + "cross-fetch": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz", + "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==", + "dev": true, + "requires": { + "node-fetch": "2.6.1" + } + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -894,6 +912,12 @@ "lodash": "^4.17.21" } }, + "node-fetch": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", + "dev": true + }, "node-releases": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", diff --git a/client/package.json b/client/package.json index fd7455b..677abca 100644 --- a/client/package.json +++ b/client/package.json @@ -8,6 +8,7 @@ "start": "sirv public --no-clear" }, "devDependencies": { + "@iconify/svelte": "^2.1.0", "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.0", "rollup": "^2.3.4", diff --git a/client/public/404.html b/client/public/404.html new file mode 100644 index 0000000..1de0367 --- /dev/null +++ b/client/public/404.html @@ -0,0 +1,135 @@ + + + + + + + Page Not Found + + + + +
+
+
+
+
+

404 Page not Found

+

It appears that you’ve wandered too far from the forest, press the magic button below to get back.

+ + +
+

Take me back!

+
+ +
+
+
+
+
+ + + + diff --git a/client/public/favicon.png b/client/public/favicon.png index 7e6f5eb..3b0dbc9 100644 Binary files a/client/public/favicon.png and b/client/public/favicon.png differ diff --git a/client/public/img/Banner.jpg b/client/public/img/Banner.jpg new file mode 100644 index 0000000..fc38ea4 Binary files /dev/null and b/client/public/img/Banner.jpg differ diff --git a/client/public/index.html b/client/public/index.html index a9c8fd6..4d3662b 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -4,7 +4,7 @@ - Svelte app + FOXBANK diff --git a/client/src/AccountCard.svelte b/client/src/AccountCard.svelte new file mode 100644 index 0000000..937c728 --- /dev/null +++ b/client/src/AccountCard.svelte @@ -0,0 +1,211 @@ + + + + + +
+
+

{type}

+ IBAN: {iban} + +
+ +
+
+ +
+
+ +
+ +

Balance: {balance}{currency}

+ +
+ +
+ + {#if isExpanded } + {#each transactions as transaction,i (i)} +
+ + +
+

{transaction.title}:

+ {transaction.amount} + {currency} +
+
+

at {transaction.time}

+ + {#if transaction.status == "PROCESSED"} + + + + {:else if transaction.status == "PENDING"} + + + + {:else if transaction.status == "CANCELLED"} + + + + {:else} + + + + {/if} + {transaction.status} + +
+ +
+ {/each} + + {:else if transactions.length > 0} + +
+

{transactions[0].title}:

+ {transactions[0].amount} + {currency} +
+
+

at {transactions[0].time}

+ + {#if transactions[0].status == "PROCESSED"} + + + + {:else if transactions[0].status == "PENDING"} + + + + {:else if transactions[0].status == "CANCELLED"} + + + + {:else} + + + + {/if} + {transactions[0].status} + +
+ + {:else} + +
+

No transactions made on this account.

+
+ + + {/if} + + + +
+ +
+ +
+ + + + send money + + +
+ +
+ +
+ {#if transactions.length > 1} + {#if isExpanded == false } + + {:else} + + {/if} + {/if} +
+ + + + + \ No newline at end of file diff --git a/client/src/App.svelte b/client/src/App.svelte index 42570ba..0f9a314 100644 --- a/client/src/App.svelte +++ b/client/src/App.svelte @@ -1,18 +1,145 @@ -
-

Hello {name}!

-

Visit the Svelte tutorial to learn how to build Svelte apps.

- - +
+ + +
+ {#if loggedin} + + {#if isCreatingAccount} + +
+ +
+ + {:else if isCheckingNotifications} + +
+ +
+ + {:else if isSendingMoney} + +
+ +
+ + {/if} + + + + {:else} + + {/if} + + +
+ +
+ + + + \ No newline at end of file diff --git a/client/src/CardBG.svelte b/client/src/CardBG.svelte new file mode 100644 index 0000000..3206098 --- /dev/null +++ b/client/src/CardBG.svelte @@ -0,0 +1,23 @@ + + +
+ +
+ + \ No newline at end of file diff --git a/client/src/CheckNotifications.svelte b/client/src/CheckNotifications.svelte new file mode 100644 index 0000000..3fd21e8 --- /dev/null +++ b/client/src/CheckNotifications.svelte @@ -0,0 +1,88 @@ + + +
+
+ +
+

Inbox

+ +
+
+ +
+ {#each notifications as notification,i (i)} +
+ + +
+ {notification.text} +
+ +
+
+ at {notification.time} +
+
+ + +
+ {/each} +
+ +
+ + +
+ +
+ + \ No newline at end of file diff --git a/client/src/CreateAccount.svelte b/client/src/CreateAccount.svelte new file mode 100644 index 0000000..f955190 --- /dev/null +++ b/client/src/CreateAccount.svelte @@ -0,0 +1,87 @@ + + + +
+
+ +
+
+

Open a new account

+ +
+
+ +
+

Account name:

+ +
+ +
+

Currency:

+ +
+ +
+

Terms of Service:

+ +

I have read and accepted the terms and conditions for creating a new account at FOXBANK.

+
+ + +
+
+ +
+
+ Confirm +
+ + +
+ +
diff --git a/client/src/DetailField.svelte b/client/src/DetailField.svelte new file mode 100644 index 0000000..ca5fb4e --- /dev/null +++ b/client/src/DetailField.svelte @@ -0,0 +1,23 @@ + + +
+ +
+ + diff --git a/client/src/GreenButton.svelte b/client/src/GreenButton.svelte new file mode 100644 index 0000000..80fb41e --- /dev/null +++ b/client/src/GreenButton.svelte @@ -0,0 +1,22 @@ + + +
+ + + +
+ + \ No newline at end of file diff --git a/client/src/InputField.svelte b/client/src/InputField.svelte new file mode 100644 index 0000000..de1978d --- /dev/null +++ b/client/src/InputField.svelte @@ -0,0 +1,22 @@ + + +
+ +
+ + diff --git a/client/src/Login.svelte b/client/src/Login.svelte new file mode 100644 index 0000000..e0184b8 --- /dev/null +++ b/client/src/Login.svelte @@ -0,0 +1,56 @@ + + +
+
+ +

Welcome,

+
+ +
+ +
+ +
+ +
+ Login +
+ +
+ +
+ +
+ Help! + Can't login? +
+ + +
+ +
\ No newline at end of file diff --git a/client/src/MainPage.svelte b/client/src/MainPage.svelte new file mode 100644 index 0000000..e8c1eb0 --- /dev/null +++ b/client/src/MainPage.svelte @@ -0,0 +1,161 @@ + + +
+
+ {#if expandedAccount || expandedAccount === 0} + expanded(null)}> + {:else} + {#if showAllAccounts} + {#each accounts as account,i} +
+ expanded(i)} on:createPopup> +
+ {/each} + {/if} + {/if} + +
+ {#if showAllAccounts} +
+ +
+ {/if} +
+ +
+ +
+ +
+ +
+

{fullname}

+ +
+ +
+

Total balance: {totalbalance}{maincurrency}

+

➜ from {accounts.length} accounts

+
+ +
+ +
+ +
+
+
+
+ Help! + Feedback +
+ + +
+ +
+ diff --git a/client/src/OrangeButton.svelte b/client/src/OrangeButton.svelte new file mode 100644 index 0000000..3fe1471 --- /dev/null +++ b/client/src/OrangeButton.svelte @@ -0,0 +1,22 @@ + + +
+ + + +
+ + \ No newline at end of file diff --git a/client/src/Overlay.svelte b/client/src/Overlay.svelte new file mode 100644 index 0000000..b3f3c16 --- /dev/null +++ b/client/src/Overlay.svelte @@ -0,0 +1,36 @@ + + +
+
+ +
+
+ + \ No newline at end of file diff --git a/client/src/SendMoney.svelte b/client/src/SendMoney.svelte new file mode 100644 index 0000000..c912bad --- /dev/null +++ b/client/src/SendMoney.svelte @@ -0,0 +1,92 @@ + + + +
+ +
+
+

Send money

+ from + {account.type} + +
+
+ +
+

Receiver's full name:

+ +
+ +
+

IBAN:

+ +
+ +
+

Amount:

+ + {account.currency} + +
+ +
+

Description:

+ +
+
+ + +
+ +
+
+ Confirm +
+ + +
+ diff --git a/client/src/TextareaField.svelte b/client/src/TextareaField.svelte new file mode 100644 index 0000000..c034ad8 --- /dev/null +++ b/client/src/TextareaField.svelte @@ -0,0 +1,48 @@ + + +
+ +
+ + + diff --git a/client/src/TopBorder.svelte b/client/src/TopBorder.svelte new file mode 100644 index 0000000..bd2f701 --- /dev/null +++ b/client/src/TopBorder.svelte @@ -0,0 +1,17 @@ + + +
+

FOXBANK

+
+ + \ No newline at end of file diff --git a/client/src/api.js b/client/src/api.js new file mode 100644 index 0000000..ab6b606 --- /dev/null +++ b/client/src/api.js @@ -0,0 +1,57 @@ +const baseURL = "https://foxbank-api.extras.dcdevelop.xyz"; + +export async function login(username, code) { + try { + const result = await fetch(new URL("/login/", baseURL), { + method: "POST", + body: JSON.stringify({ + username, code, + }), + headers: { + "Content-Type": "application/json" + }, + }); + + return (await result.json()); + } catch (error) { + return { + status: "error", + code: "request/failure" + } + } +} + + +export async function whoami(token) { + try { + const result = await fetch(new URL("/login/whoami", baseURL), { + method: "GET", + headers: { + "Authorization": "Bearer " + token, + }, + }); + + return (await result.json()); + } catch (error) { + return { + status: "error", + code: "request/failure" + } + } +} + +export async function logout(token) { + try { + await fetch(new URL("/login/logout", baseURL), { + method: "POST", + headers: { + "Authorization": "Bearer " + token, + }, + }); + } catch (error) { + return { + status: "error", + code: "request/failure" + } + } +} \ No newline at end of file diff --git a/client/src/main.js b/client/src/main.js index d6cacbb..d80e9a3 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -2,9 +2,6 @@ import App from './App.svelte'; const app = new App({ target: document.body, - props: { - name: 'world' - } }); export default app; \ No newline at end of file diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 1a87969..19f0028 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -8,7 +8,27 @@ module.exports = { }, darkMode: false, // or 'media' or 'class' theme: { - extend: {}, + extend: { + backgroundImage:{ + "banner":"url('/img/Banner.jpg')" + }, + + fontFamily:{ + "title":['Geo', 'sans-serif'], + "welcome":['Rochester', 'cursive'], + "sans":['Roboto', 'sans-serif'] + }, + + colors: { + 'regal-blue': '#243c5a', + 'lime-c': '#6DE25ACC', + 'red-c': '#FB6666', + }, + + minWidth: { + 'transaction': '420px', + }, + }, }, variants: { extend: {},