diff --git a/README.md b/README.md index 5c91169..0e52582 100644 --- a/README.md +++ b/README.md @@ -36,3 +36,71 @@ npm run build You can preview the production build with `npm run preview`. > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. + +//////////////// + +Right now, my signup page is set up like that: + + + Sign Up + + + +
+ +
+ + + +
+ +{#if showModal} + +{/if} + +
+ +And input is set up like that in styles/forms.scss: + +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; + } +} + +So the email field has a red border on bottom when focused. + +I would like that borer to become green when the email is valid. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 26fb350..27eb584 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "brz9front", "version": "0.0.1", "dependencies": { + "cookie": "^0.5.0", "dotenv": "^16.0.3", - "normalize.css": "^8.0.1" + "normalize.css": "^8.0.1", + "svelte-navigator": "^3.2.2" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", @@ -1012,7 +1014,6 @@ "version": "0.5.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -1048,6 +1049,11 @@ } } }, + "node_modules/dedent-js": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz", + "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==" + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -1782,6 +1788,14 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/magic-string": { "version": "0.30.0", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz", @@ -1866,6 +1880,15 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -1948,6 +1971,15 @@ "node": ">=6" } }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -2377,7 +2409,6 @@ "version": "3.59.1", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.1.tgz", "integrity": "sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==", - "dev": true, "engines": { "node": ">= 8" } @@ -2419,6 +2450,31 @@ "svelte": ">=3.19.0" } }, + "node_modules/svelte-navigator": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/svelte-navigator/-/svelte-navigator-3.2.2.tgz", + "integrity": "sha512-Xio4ohLUG1nQJ+ENNbLphXXu9L189fnI1WGg+2Q3CIMPe8Jm2ipytKQthdBs8t0mN7p3Eb03SE9hq0xZAqwQNQ==", + "hasInstallScript": true, + "dependencies": { + "svelte2tsx": "^0.1.151" + }, + "peerDependencies": { + "svelte": "3.x" + } + }, + "node_modules/svelte2tsx": { + "version": "0.1.193", + "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.193.tgz", + "integrity": "sha512-vzy4YQNYDnoqp2iZPnJy7kpPAY6y121L0HKrSBjU/IWW7DQ6T7RMJed2VVHFmVYm0zAGYMDl9urPc6R4DDUyhg==", + "dependencies": { + "dedent-js": "^1.0.1", + "pascal-case": "^3.1.1" + }, + "peerDependencies": { + "svelte": "^3.24", + "typescript": "^4.1.2" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -2456,6 +2512,11 @@ "node": ">=6" } }, + "node_modules/tslib": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz", + "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -2480,6 +2541,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/undici": { "version": "5.22.1", "resolved": "https://registry.npmjs.org/undici/-/undici-5.22.1.tgz", diff --git a/package.json b/package.json index 7d5ee05..71e0a37 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,9 @@ }, "type": "module", "dependencies": { + "cookie": "^0.5.0", "dotenv": "^16.0.3", - "normalize.css": "^8.0.1" + "normalize.css": "^8.0.1", + "svelte-navigator": "^3.2.2" } } diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte new file mode 100644 index 0000000..ceb90d6 --- /dev/null +++ b/src/components/Footer.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/components/Header.svelte b/src/components/Header.svelte new file mode 100644 index 0000000..22ff89f --- /dev/null +++ b/src/components/Header.svelte @@ -0,0 +1,59 @@ + + + +
+ +
+ + \ No newline at end of file diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte index fadeada..8ff8f1b 100644 --- a/src/components/Modal.svelte +++ b/src/components/Modal.svelte @@ -16,6 +16,7 @@ @@ -49,6 +50,7 @@ align-items: center; .modal-content { font-size: 1.6rem; + padding: 30px; } } button { diff --git a/src/lib/api.js b/src/lib/api.js index f8101fa..8ec2992 100644 --- a/src/lib/api.js +++ b/src/lib/api.js @@ -26,6 +26,7 @@ export async function login(email, password) { headers: { 'Content-Type': 'application/json', }, + credentials: 'include', body: JSON.stringify({ email: email, password: password @@ -38,6 +39,9 @@ export async function login(email, password) { } // Here you could do something with the login response, like storing a user token - + //localStorage.setItem('userToken', data.token); + //cookie.set('userToken', data.token, { expires: 7 }); + //cookie.set("check", "check", { expires: 7 }) + console.log(data) return data; } \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b41ac54..1673ddf 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,6 +3,7 @@ - +

Welcome to SvelteKit

@@ -53,7 +55,7 @@
- +
\ No newline at end of file + + + \ No newline at end of file diff --git a/src/routes/login/+page.server.js b/src/routes/login/+page.server.js new file mode 100644 index 0000000..8ca37e8 --- /dev/null +++ b/src/routes/login/+page.server.js @@ -0,0 +1,48 @@ +import { redirect } from "@sveltejs/kit"; +import { login } from '$lib/api'; + +export const load = async (event) => { + console.log("hello from backend") + const sessionID = event.cookies.get('sessionID'); + + if (sessionID) { + throw redirect('/profile'); + } +}; + +export const actions = { + default: async (event) => { + const formData = await event.request.formData(); + const email = formData.get('email'); + const password = formData.get('password'); + + + const apiUrl = import.meta.env.VITE_API_URL; + + const res = await fetch(apiUrl + '/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify({ + email: email, + password: password + }) + }); + + if (res.ok) { + console.log("ok") + return redirect('/profile'); + } else { + console.log("not ok") + const error = await res.json(); + return { + status: 400, + redirect: '/login', + body: { error } + }; + } + + }, +}; \ No newline at end of file diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 941493b..92e7979 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -4,27 +4,66 @@ +
+
-
+ - + - +
-
\ No newline at end of file +
+ + + + +
+ +{#if showModal} + +

{modalMessage}

+
+{/if} + + +