From ccc79e75d9e2606647890ad1de44f949377ca67e Mon Sep 17 00:00:00 2001 From: ed Date: Mon, 29 May 2023 12:46:35 +0200 Subject: [PATCH] front style update --- .env.development | 2 +- package-lock.json | 171 ++++++++++++++++++++++++++++++++- package.json | 4 +- src/app.html | 2 + src/components/Modal.svelte | 67 +++++++++++++ src/lib/api.js | 43 +++++++++ src/lib/utils.js | 8 ++ src/routes/+layout.svelte | 6 ++ src/routes/+page.svelte | 17 ++-- src/routes/login/+page.svelte | 27 +++++- src/routes/signup/+page.svelte | 56 +++++++++++ src/styles/color.scss | 11 +++ src/styles/fonts.scss | 3 + src/styles/forms.scss | 34 +++++++ src/styles/layout.scss | 46 +++++++++ src/styles/master.scss | 6 ++ src/styles/responsive.scss | 38 ++++++++ src/styles/variables.scss | 4 + svelte.config.js | 9 +- 19 files changed, 542 insertions(+), 12 deletions(-) create mode 100644 src/components/Modal.svelte create mode 100644 src/lib/api.js create mode 100644 src/lib/utils.js create mode 100644 src/routes/+layout.svelte create mode 100644 src/routes/signup/+page.svelte create mode 100644 src/styles/color.scss create mode 100644 src/styles/fonts.scss create mode 100644 src/styles/forms.scss create mode 100644 src/styles/layout.scss create mode 100644 src/styles/master.scss create mode 100644 src/styles/responsive.scss create mode 100644 src/styles/variables.scss diff --git a/.env.development b/.env.development index daf6c1c..41073e5 100644 --- a/.env.development +++ b/.env.development @@ -1 +1 @@ -VITE_API_URL=http://localhost:8069 +VITE_API_URL=http://127.0.0.1:8069 diff --git a/package-lock.json b/package-lock.json index d51bfe9..26fb350 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "name": "brz9front", "version": "0.0.1", "dependencies": { - "dotenv": "^16.0.3" + "dotenv": "^16.0.3", + "normalize.css": "^8.0.1" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", @@ -19,6 +20,7 @@ "eslint-plugin-svelte": "^2.26.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.8.1", + "sass": "^1.62.1", "svelte": "^3.54.0", "vite": "^4.3.0" } @@ -832,6 +834,19 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -844,6 +859,15 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -854,6 +878,18 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/builtin-modules": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", @@ -903,6 +939,45 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1301,6 +1376,18 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -1457,6 +1544,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -1508,6 +1601,18 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-builtin-module": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz", @@ -1562,6 +1667,15 @@ "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==", "dev": true }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-path-inside": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", @@ -1752,6 +1866,20 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -2007,6 +2135,18 @@ } ] }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -2109,6 +2249,23 @@ "node": ">=6" } }, + "node_modules/sass": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz", + "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/set-cookie-parser": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz", @@ -2278,6 +2435,18 @@ "globrex": "^0.1.2" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/totalist": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", diff --git a/package.json b/package.json index 0e26fd4..7d5ee05 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "eslint-plugin-svelte": "^2.26.0", "prettier": "^2.8.0", "prettier-plugin-svelte": "^2.8.1", + "sass": "^1.62.1", "svelte": "^3.54.0", "vite": "^4.3.0" }, "type": "module", "dependencies": { - "dotenv": "^16.0.3" + "dotenv": "^16.0.3", + "normalize.css": "^8.0.1" } } diff --git a/src/app.html b/src/app.html index effe0d0..5d03a6d 100644 --- a/src/app.html +++ b/src/app.html @@ -3,6 +3,8 @@ + + %sveltekit.head% diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte new file mode 100644 index 0000000..fadeada --- /dev/null +++ b/src/components/Modal.svelte @@ -0,0 +1,67 @@ + + +
+
+
+ +
+
+

{modalMessage}

+
+
+ + \ No newline at end of file diff --git a/src/lib/api.js b/src/lib/api.js new file mode 100644 index 0000000..f8101fa --- /dev/null +++ b/src/lib/api.js @@ -0,0 +1,43 @@ +export async function signup(email, password) { + const apiUrl = import.meta.env.VITE_API_URL; + + const response = await fetch(apiUrl + '/signup', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ email, password }) + }); + + const data = await response.json(); + + if (!response.ok || data.error) { + throw new Error(data.error || `Signup failed with status ${response.status}`); + } + + return data; +} + +export async function login(email, password) { + const apiUrl = import.meta.env.VITE_API_URL; + + const response = await fetch(apiUrl + '/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + email: email, + password: password + }) + }); + + const data = await response.json(); + if (!response.ok || data.error) { + throw new Error(data.error || `Login failed with status ${response.status}`); + } + + // Here you could do something with the login response, like storing a user token + + return data; +} \ No newline at end of file diff --git a/src/lib/utils.js b/src/lib/utils.js new file mode 100644 index 0000000..f04ef72 --- /dev/null +++ b/src/lib/utils.js @@ -0,0 +1,8 @@ +export function isValidEmail(email) { + return /\S+@\S+\.\S+/.test(email); +} + +export function isValidPassword(password) { + return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$?@!_%-])[A-Za-z\d$?@!_%-]{8,}$/.test(password); +} + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..525134f --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 52301d4..b41ac54 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,9 +1,13 @@ + + Home + + - - +

Welcome to SvelteKit

Visit kit.svelte.dev to read the documentation

@@ -58,4 +61,6 @@ {/each} -

Just to check, the current API endpoint is : {apiUrl}

\ No newline at end of file +

Just to check, the current API endpoint is : {apiUrl}

+ +
\ No newline at end of file diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 1218419..941493b 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -2,4 +2,29 @@ Login -

Login page

\ No newline at end of file + + +
+ +
+ + + + +
+ +
\ No newline at end of file diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte new file mode 100644 index 0000000..d46c6e5 --- /dev/null +++ b/src/routes/signup/+page.svelte @@ -0,0 +1,56 @@ + + Sign Up + + + +
+ +
+ + + +
+ +{#if showModal} + +{/if} + +
\ No newline at end of file diff --git a/src/styles/color.scss b/src/styles/color.scss new file mode 100644 index 0000000..56da075 --- /dev/null +++ b/src/styles/color.scss @@ -0,0 +1,11 @@ +html { + background-color: $bg-color; + color: $fg-color; +} + +a { + color: $fg-color; + &:hover { + color: $red; + } +} diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss new file mode 100644 index 0000000..5912d5d --- /dev/null +++ b/src/styles/fonts.scss @@ -0,0 +1,3 @@ +html { + font-family: Inter; +} \ No newline at end of file diff --git a/src/styles/forms.scss b/src/styles/forms.scss new file mode 100644 index 0000000..0eac2a7 --- /dev/null +++ b/src/styles/forms.scss @@ -0,0 +1,34 @@ +.btn-fly { + background-color: $fg-color; + color: $bg-color; + border: none; + border-radius: 0; + font-size: 1.2rem; + font-weight: 600; + padding: 15px; + box-shadow: 15px 15px 0px 0px black; + cursor: pointer; + + &:hover { + box-shadow: 17px 17px 0px 0px black; + } +} + +input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select { + padding: 12px 0px; + margin: 8px 0; + box-sizing: border-box; + border: none; + border-bottom: 5px solid $fg-color; + background-color: $bg-color; + color: $fg-color; + font-size: 1.2rem; + font-weight: 400; + &:focus { + outline: none; + border-bottom: 5px solid $red; + } + &.valid { + border-bottom: 5px solid $fg-color; + } +} \ No newline at end of file diff --git a/src/styles/layout.scss b/src/styles/layout.scss new file mode 100644 index 0000000..059d475 --- /dev/null +++ b/src/styles/layout.scss @@ -0,0 +1,46 @@ +.container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.row { + width: 100%; + display: flex; + justify-content: space-between; +} + +.column { + flex: 1; + padding: 1em; +} + +.column.half { + flex: 0.5; +} + +.column.third { + flex: 0.333; +} + +.column.quarter { + flex: 0.25; +} + +.centered-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; // this makes the container take up the full viewport height +} + +.colonel { + margin: 50px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + *{ + margin-top: 50px; + } +} \ No newline at end of file diff --git a/src/styles/master.scss b/src/styles/master.scss new file mode 100644 index 0000000..93023d6 --- /dev/null +++ b/src/styles/master.scss @@ -0,0 +1,6 @@ +@import 'variables'; +@import 'color'; +@import 'fonts'; +@import 'layout'; +@import 'responsive'; +@import 'forms'; diff --git a/src/styles/responsive.scss b/src/styles/responsive.scss new file mode 100644 index 0000000..0b6765a --- /dev/null +++ b/src/styles/responsive.scss @@ -0,0 +1,38 @@ +@mixin respond-to($breakpoint) { + @if $breakpoint == small { + @media (max-width: 600px) { + @content; + } + } + + @if $breakpoint == medium { + @media (max-width: 900px) { + @content; + } + } + + @if $breakpoint == large { + @media (min-width: 900px) { + @content; + } + } + } + + +main { + @include respond-to(small) { + padding-left: 5vw; + padding-right: 5vw; + } + + @include respond-to(medium) { + padding-left: 10vw; + padding-right: 10vw; + } + + @include respond-to(large) { + padding-left: 20vw; + padding-right: 20vw; + } + +} \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000..abd0557 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,4 @@ +$bg-color : #1C3137; +$fg-color : #F2DFD0; +$red: #C62F00; +$green: #0A9C25; \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js index 8fa4db4..d836358 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,7 +1,12 @@ import adapter from '@sveltejs/adapter-node'; +import { vitePreprocess } from '@sveltejs/kit/vite'; export default { kit: { - adapter: adapter() - } + adapter: adapter(), + alias: { + $components: 'src/components', + } + }, + preprocess: [vitePreprocess()], }; \ No newline at end of file