From 90ff7e14ee54289418e093e1b5be55260da1a066 Mon Sep 17 00:00:00 2001 From: ryan Date: Sun, 16 Feb 2025 20:24:40 +0800 Subject: [PATCH] web: finishing supabase auth --- web/.firebaserc | 5 + web/.gitignore | 69 ++++++++++ web/firebase.json | 10 ++ web/profile.html | 104 --------------- web/profile.js | 21 --- web/public/404.html | 33 +++++ web/{ => public}/about.html | 0 web/{ => public}/img/SOS_Logo_WBG.png | 0 web/{ => public}/img/SOS_ProductLogo.png | 0 web/{ => public}/img/SSLR_CompanyLogo.png | 0 web/{ => public}/img/SSLR_CopyrightLogo.png | 0 web/{ => public}/img/SSLR_Signature.png | 0 web/{ => public}/img/favicon.png | 0 web/{ => public}/img/gameSSPlaceholder.jpg | 0 web/{ => public}/img/meta-quest2.jpeg | 0 web/{ => public}/index.html | 0 web/{ => public}/input.css | 0 web/{ => public}/main.css | 54 +++++++- .../public/package-lock.json | 2 +- package.json => web/public/package.json | 0 web/public/profile.html | 121 ++++++++++++++++++ web/public/profile.js | 118 +++++++++++++++++ 22 files changed, 407 insertions(+), 130 deletions(-) create mode 100644 web/.firebaserc create mode 100644 web/.gitignore create mode 100644 web/firebase.json delete mode 100644 web/profile.html delete mode 100644 web/profile.js create mode 100644 web/public/404.html rename web/{ => public}/about.html (100%) rename web/{ => public}/img/SOS_Logo_WBG.png (100%) rename web/{ => public}/img/SOS_ProductLogo.png (100%) rename web/{ => public}/img/SSLR_CompanyLogo.png (100%) rename web/{ => public}/img/SSLR_CopyrightLogo.png (100%) rename web/{ => public}/img/SSLR_Signature.png (100%) rename web/{ => public}/img/favicon.png (100%) rename web/{ => public}/img/gameSSPlaceholder.jpg (100%) rename web/{ => public}/img/meta-quest2.jpeg (100%) rename web/{ => public}/index.html (100%) rename web/{ => public}/input.css (100%) rename web/{ => public}/main.css (95%) rename package-lock.json => web/public/package-lock.json (99%) rename package.json => web/public/package.json (100%) create mode 100644 web/public/profile.html create mode 100644 web/public/profile.js diff --git a/web/.firebaserc b/web/.firebaserc new file mode 100644 index 0000000..7102244 --- /dev/null +++ b/web/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "sweet-starry-lil-rabbits" + } +} diff --git a/web/.gitignore b/web/.gitignore new file mode 100644 index 0000000..b17f631 --- /dev/null +++ b/web/.gitignore @@ -0,0 +1,69 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +firebase-debug.log* +firebase-debug.*.log* + +# Firebase cache +.firebase/ + +# Firebase config + +# Uncomment this if you'd like others to create their own Firebase project. +# For a team working on the same Firebase project(s), it is recommended to leave +# it commented so all members can deploy to the same project(s) in .firebaserc. +# .firebaserc + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# dataconnect generated files +.dataconnect diff --git a/web/firebase.json b/web/firebase.json new file mode 100644 index 0000000..e782939 --- /dev/null +++ b/web/firebase.json @@ -0,0 +1,10 @@ +{ + "hosting": { + "public": "public", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ] + } +} diff --git a/web/profile.html b/web/profile.html deleted file mode 100644 index b5c0ef9..0000000 --- a/web/profile.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - Solace Of Service - - - - -
- product logo - -
-
- - Login -
-
-
-
-
-
- -
- - - Login -
-
-
-
-
-
- -
- - - - - diff --git a/web/profile.js b/web/profile.js deleted file mode 100644 index 07b1032..0000000 --- a/web/profile.js +++ /dev/null @@ -1,21 +0,0 @@ - - - - - -const signInDialog = document.getElementById("signInDialog"); -const signUpDialog = document.getElementById("signUpDialog"); -document.addEventListener("DOMContentLoaded", (event) => {}); - -function ShowSignIn() { - // signUpDialog.close(); - signInDialog.showModal(); - console.log("sign in showed"); -} -function ShowSignUp() { - signInDialog.close() - signUpDialog.showModal() - console.log("sign up showed") - -} - diff --git a/web/public/404.html b/web/public/404.html new file mode 100644 index 0000000..829eda8 --- /dev/null +++ b/web/public/404.html @@ -0,0 +1,33 @@ + + + + + + Page Not Found + + + + +
+

404

+

Page Not Found

+

The specified file was not found on this website. Please check the URL for mistakes and try again.

+

Why am I seeing this?

+

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

+
+ + diff --git a/web/about.html b/web/public/about.html similarity index 100% rename from web/about.html rename to web/public/about.html diff --git a/web/img/SOS_Logo_WBG.png b/web/public/img/SOS_Logo_WBG.png similarity index 100% rename from web/img/SOS_Logo_WBG.png rename to web/public/img/SOS_Logo_WBG.png diff --git a/web/img/SOS_ProductLogo.png b/web/public/img/SOS_ProductLogo.png similarity index 100% rename from web/img/SOS_ProductLogo.png rename to web/public/img/SOS_ProductLogo.png diff --git a/web/img/SSLR_CompanyLogo.png b/web/public/img/SSLR_CompanyLogo.png similarity index 100% rename from web/img/SSLR_CompanyLogo.png rename to web/public/img/SSLR_CompanyLogo.png diff --git a/web/img/SSLR_CopyrightLogo.png b/web/public/img/SSLR_CopyrightLogo.png similarity index 100% rename from web/img/SSLR_CopyrightLogo.png rename to web/public/img/SSLR_CopyrightLogo.png diff --git a/web/img/SSLR_Signature.png b/web/public/img/SSLR_Signature.png similarity index 100% rename from web/img/SSLR_Signature.png rename to web/public/img/SSLR_Signature.png diff --git a/web/img/favicon.png b/web/public/img/favicon.png similarity index 100% rename from web/img/favicon.png rename to web/public/img/favicon.png diff --git a/web/img/gameSSPlaceholder.jpg b/web/public/img/gameSSPlaceholder.jpg similarity index 100% rename from web/img/gameSSPlaceholder.jpg rename to web/public/img/gameSSPlaceholder.jpg diff --git a/web/img/meta-quest2.jpeg b/web/public/img/meta-quest2.jpeg similarity index 100% rename from web/img/meta-quest2.jpeg rename to web/public/img/meta-quest2.jpeg diff --git a/web/index.html b/web/public/index.html similarity index 100% rename from web/index.html rename to web/public/index.html diff --git a/web/input.css b/web/public/input.css similarity index 100% rename from web/input.css rename to web/public/input.css diff --git a/web/main.css b/web/public/main.css similarity index 95% rename from web/main.css rename to web/public/main.css index 7dfa117..1a82526 100644 --- a/web/main.css +++ b/web/public/main.css @@ -1,7 +1,7 @@ -/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */ @layer theme, base, components, utilities; @layer theme { - :root { + :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; @@ -551,6 +551,9 @@ .ml-10 { margin-left: calc(var(--spacing) * 10); } + .block { + display: block; + } .flex { display: flex; } @@ -671,6 +674,9 @@ .px-4 { padding-inline: calc(var(--spacing) * 4); } + .px-5 { + padding-inline: calc(var(--spacing) * 5); + } .px-\[15vw\] { padding-inline: 15vw; } @@ -710,9 +716,49 @@ --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } - .backdrop\:opacity-75 { + .uppercase { + text-transform: uppercase; + } + .file\:mr-4 { + &::file-selector-button { + margin-right: calc(var(--spacing) * 4); + } + } + .file\:rounded-full { + &::file-selector-button { + border-radius: calc(infinity * 1px); + } + } + .file\:border { + &::file-selector-button { + border-style: var(--tw-border-style); + border-width: 1px; + } + } + .file\:border-black { + &::file-selector-button { + border-color: var(--color-black); + } + } + .file\:bg-\[\#c6cdd9\] { + &::file-selector-button { + background-color: #c6cdd9; + } + } + .file\:px-2 { + &::file-selector-button { + padding-inline: calc(var(--spacing) * 2); + } + } + .file\:font-semibold { + &::file-selector-button { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + } + .backdrop\:opacity-20 { &::backdrop { - opacity: 75%; + opacity: 20%; } } .hover\:bg-slate-200 { diff --git a/package-lock.json b/web/public/package-lock.json similarity index 99% rename from package-lock.json rename to web/public/package-lock.json index c8df93e..36cb65d 100644 --- a/package-lock.json +++ b/web/public/package-lock.json @@ -1,5 +1,5 @@ { - "name": "IP3", + "name": "web", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/package.json b/web/public/package.json similarity index 100% rename from package.json rename to web/public/package.json diff --git a/web/public/profile.html b/web/public/profile.html new file mode 100644 index 0000000..e0155f7 --- /dev/null +++ b/web/public/profile.html @@ -0,0 +1,121 @@ + + + + + + Solace Of Service + + + + + +
+ product logo + +
+
+ + Login +
+
+
+
+
+
+ +
+ + + Sign Up +
+
+
+
+
+
+
+
+
+ + +
+ +
+ +
+ Profile + Profile picture +

Name:

+

Score:

+

Days Played:

+

Customers Helped Correct:

+

Customers Helped Wrongly:

+

Accuracy:

+
+ + + + diff --git a/web/public/profile.js b/web/public/profile.js new file mode 100644 index 0000000..150b97e --- /dev/null +++ b/web/public/profile.js @@ -0,0 +1,118 @@ +const { createClient } = supabase; + +const supabaseUrl = "https://fchobpauqasfebohuuam.supabase.co"; +const supabaseAnonKey = + "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZjaG9icGF1cWFzZmVib2h1dWFtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzczNTYyNTUsImV4cCI6MjA1MjkzMjI1NX0.LkwCnzjtf8CPLrm6OONkjyjxZW8jE05V_spbOEeAXEM"; + +const Supabase = createClient(supabaseUrl, supabaseAnonKey); + +const signInDialog = document.getElementById("signInDialog"); +const signUpDialog = document.getElementById("signUpDialog"); + +var uid = ""; + +document.addEventListener("DOMContentLoaded", (event) => { + Start(); +}); +document.getElementById("SignInSubmit").addEventListener("click", (e) => { + e.preventDefault; + var email = document.getElementById("emailSignIn").value; + var password = document.getElementById("passwordSignIn").value; + SignIn(email, password); +}); +document.getElementById("SignUpSubmit").addEventListener("click", (e) => { + e.preventDefault; + var email = document.getElementById("emailSignUp").value; + var password = document.getElementById("passwordSignUp").value; + var username = document.getElementById("usernameSignUp").value; + var fileInput = document.getElementById("profileSignUp"); + const file = fileInput.files[0]; + + SignUp(email, password, username, file); +}); +document.getElementById("signUpToSignIn").addEventListener("click", () => { + ShowSignIn(); +}); +document.getElementById("signinToSignup").addEventListener("click", () => { + ShowSignUp(); +}); + +function ShowSignIn() { + signUpDialog.close(); + signInDialog.showModal(); + console.log("sign in showed"); +} +function ShowSignUp() { + signInDialog.close(); + signUpDialog.showModal(); + console.log("sign up showed"); +} +function closeDialog() { + signInDialog.close(); + signUpDialog.close(); +} +async function Start() { + const { data } = await Supabase.auth.getSession(); + console.log(data); + if (data.session == null || data.session == "") { + uid = ""; + ShowSignUp(); + } else { + uid = data.session.user.id; + } +} + +async function SignIn(email, password) { + console.log(email, password); + + const { data: auth, error: authError } = await Supabase.auth.signInWithPassword({ + email: email, + password: password, + }); + + if (authError) { + console.error("Error signing in:", authError.message); + return; + } + + console.log("User signed in:", auth); + uid = auth.user.id; + const { data, error } = await Supabase.from("users").select(); + console.log(data); + if (error) { + console.error("Error getting data:", error.message); + return; + } + closeDialog(); +} + +async function SignUp(email, password, username, file) { + console.log(email, password); + const { data, error: authError } = await Supabase.auth.signUp({ + email: email, + password: password, + }); + + uid = data.user.id; + if (file.size > 1e7) { + console.error("file too fat"); + } + const fileName = `${Date.now()}-${file.name}`; + + const { storeData, storeError } = await Supabase.storage + .from("Avatar") // Replace 'images' with your bucket name + .upload(fileName, file); + if (storeError) { + console.error("Upload failed:", storeError.message); + return; + } + + const publicUrlData = Supabase.storage.from("Avatar").getPublicUrl(fileName); + const publicUrl = publicUrlData.data.publicUrl; + console.log("Public URL:", publicUrl); + const { error } = await Supabase.from("users").insert({ + uid: uid, + displayName: username, + profilePictureUrl: publicUrl, + }); +}