From 9a8581f2b451f1924dc6704f56095dae67e4a00b Mon Sep 17 00:00:00 2001
From: Not-A-Normal-Robot <not_a_normal_robot@protonmail.com>
Date: Fri, 31 May 2024 21:36:34 +0700
Subject: [PATCH] Work on profile setup and db script

---
 auth/profile-setup.html |   4 +-
 css/style.css           |  28 ++++++++++
 js/db.js                | 121 +++++++++++++++++++++++++++++++++++++++-
 js/profile-setup.js     | 106 ++++++++++++++++++++++++++++++-----
 4 files changed, 242 insertions(+), 17 deletions(-)

diff --git a/auth/profile-setup.html b/auth/profile-setup.html
index 68bb36f..d416165 100644
--- a/auth/profile-setup.html
+++ b/auth/profile-setup.html
@@ -50,6 +50,7 @@ <h1 class="center-text">Set up your profile</h1>
                 <menu class="pfp">
                     <img alt="Profile picture preview" class="" id="pfp-preview">
                     <input type="file" id="pfp-input" name="pfp">
+                    <button type="button" onclick="document.getElementById('pfp-input').click();" class="browse">Browse...</button>
                 </menu>
                 <br>
                 <label for="username">
@@ -60,9 +61,10 @@ <h1 class="center-text">Set up your profile</h1>
                 <label for="bio">Bio</label>
                 <textarea class="" id="bio" name="bio" maxlength="250" placeholder="Write some text about yourself"></textarea>
                 <span class="char-count" for="bio"></span>
-                <button type="submit">
+                <button type="submit" id="submit-button">
                     Confirm
                 </button>
+                <span id="progress"></span>
             </form>
         </section>
     </div>
diff --git a/css/style.css b/css/style.css
index 237b416..8a479c9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -374,6 +374,8 @@ form#profile-setup {
 form#profile-setup menu.pfp {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    padding-left: 0;
     gap: 0.5em;
     justify-content: space-evenly;
     align-items: center;
@@ -383,6 +385,32 @@ form#profile-setup menu.pfp img {
     height: 10em;
     border: 1px solid lime;
 }
+form#profile-setup menu.pfp input[type="file"] {
+    display: none;
+}
+form#profile-setup menu.pfp button.browse {
+    padding: 0.5em;
+    box-shadow: 0 0 1em 0.2em rgba(0,255,0,0.1);
+    border: 0.125em solid lime;
+    border-radius: 0.5em;
+    background-color: rgba(0,100,0,0.5);
+    color: white;
+    transition: all 250ms;
+    font-family: techmino-proportional, sans-serif;
+    font-size: 1em;
+    cursor: pointer;
+    transition: all 250ms;
+}
+form#profile-setup menu.pfp button.browse:hover {
+    background-color: rgba(100,100,0,0.8);
+    border-color: yellow;
+    box-shadow: 0 0 1em 0.2em rgba(255,255,0,0.3);
+}
+form#profile-setup menu.pfp button.browse:focus {
+    background-color: rgba(100,60,0,0.8);
+    border-color: orange;
+    box-shadow: 0 0 3em 0.3em rgba(255,165,0,0.3);
+}
 
 form#profile-setup input[type="text"] {
     padding: 0.5em;
diff --git a/js/db.js b/js/db.js
index 597260d..80bae27 100644
--- a/js/db.js
+++ b/js/db.js
@@ -6,8 +6,9 @@ export default SUPABASE;
 window.SUPABASE = SUPABASE;
 
 // #region Type definitions
+// Also includes: a peek into the database's structure!
 /**
- * @typedef {Object} User
+ * @typedef {Object} Profile
  * @property {string} id
  * @property {string} username
  * @property {AccountState} account_state
@@ -25,6 +26,7 @@ window.SUPABASE = SUPABASE;
  * @property {string} submitted_by
  * @property {SubmissionValidity} validity
  * @property {string?} proof
+ * @property {string | undefined} replay_data - Base64 encoded replay data, may be undefined if not requested
  */
 
 /**
@@ -72,6 +74,12 @@ export const TABLES = {
 }
 
 // #region Profile table functions
+/**
+ * @param {number} limit
+ * @param {number} offset
+ * @returns {Promise<Profile[]>}
+ * @throws {Error}
+ */
 export async function getAllProfiles(limit = 10, offset = 0) {
     const { data, error } = await SUPABASE.from(TABLES.PROFILES)
         .select('*')
@@ -80,6 +88,12 @@ export async function getAllProfiles(limit = 10, offset = 0) {
     if(error) throw new Error(error.message);
     return data;
 }
+
+/**
+ * @param {string} id 
+ * @returns {Promise<Profile>}
+ * @throws {Error}
+ */
 export async function getProfileById(id) {
     const { data, error } = await SUPABASE.from(TABLES.PROFILES)
         .select(1)
@@ -88,6 +102,12 @@ export async function getProfileById(id) {
     if(error) throw new Error(error.message);
     return data[0];
 }
+
+/**
+ * @param {string} username
+ * @returns {Promise<Profile>}
+ * @throws {Error}
+ */
 export async function getProfileByUsername(username) {
     const { data, error } = await SUPABASE.from(TABLES.PROFILES)
         .select(1)
@@ -97,6 +117,12 @@ export async function getProfileByUsername(username) {
     return data[0];
 }
 
+/**
+ * @param {string} id
+ * @param {Partial<Profile>} newProfileData
+ * @returns {Promise<Profile>}
+ * @throws {Error}
+ */
 export async function editProfile(id, newProfileData) {
     const { data, error } = await SUPABASE.from(TABLES.PROFILES)
         .update(newProfileData)
@@ -107,6 +133,11 @@ export async function editProfile(id, newProfileData) {
 }
 
 // Scary!
+/**
+ * @param {string} id
+ * @returns {Promise<string>}
+ * @throws {Error}
+ */
 export async function deleteAccount() {
     const { error } = await SUPABASE.rpc('delete_account');
     if(error) throw new Error(error.message);
@@ -115,6 +146,13 @@ export async function deleteAccount() {
 // #endregion
 
 // #region Submission table functions
+/**
+ * @param {string} gameMode
+ * @param {number} limit
+ * @param {number} offset
+ * @returns {Promise<Submission[]>}
+ * @throws {Error}
+ */
 export async function getSubmissionsByGameMode(gameMode, limit = 10, offset = 0) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .select('*')
@@ -124,6 +162,12 @@ export async function getSubmissionsByGameMode(gameMode, limit = 10, offset = 0)
     if(error) throw new Error(error.message);
     return data;
 }
+
+/**
+ * @param {string} id
+ * @returns {Promise<Submission>}
+ * @throws {Error}
+ */
 export async function getSubmissionById(id) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .select(1)
@@ -132,6 +176,12 @@ export async function getSubmissionById(id) {
     if(error) throw new Error(error.message);
     return data[0];
 }
+
+/**
+ * @param {string} id
+ * @returns {Promise<Submission>}
+ * @throws {Error}
+ */
 export async function getSubmissionWithReplayById(id) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .select('*, replays(replay_data)')
@@ -140,6 +190,14 @@ export async function getSubmissionWithReplayById(id) {
     if(error) throw new Error(error.message);
     return data[0];
 }
+
+/**
+ * @param {string} userId 
+ * @param {number} limit 
+ * @param {number} offset 
+ * @returns {Promise<Submission[]>}
+ * @throws {Error}
+ */
 export async function getSubmissionsByUserId(userId, limit = 10, offset = 0) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .select('*')
@@ -149,6 +207,14 @@ export async function getSubmissionsByUserId(userId, limit = 10, offset = 0) {
     if(error) throw new Error(error.message);
     return data;
 }
+
+/**
+ * @param {string} userId 
+ * @param {number} limit 
+ * @param {number} offset 
+ * @returns {Promise<Submission[]>}
+ * @throws {Error}
+ */
 export async function getSubmissionsWithReplaysByUserId(userId, limit = 10, offset = 0) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .select('*, replays(replay_data)')
@@ -158,6 +224,11 @@ export async function getSubmissionsWithReplaysByUserId(userId, limit = 10, offs
     return data;
 }
 
+/**
+ * @param {Submission} submissionData 
+ * @returns {Promise<Submission>}
+ * @throws {Error}
+ */
 export async function createSubmission(submissionData) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .insert(submissionData);
@@ -165,6 +236,12 @@ export async function createSubmission(submissionData) {
     if(error) throw new Error(error.message);
     return data;
 }
+
+/**
+ * @param {string} id
+ * @param {Partial<Submission>} newSubmissionData
+ * @returns {Promise<Submission>}
+ */
 export async function editSubmission(id, newSubmissionData) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .update(newSubmissionData)
@@ -173,6 +250,12 @@ export async function editSubmission(id, newSubmissionData) {
     if(error) throw new Error(error.message);
     return data;
 }
+
+/**
+ * @param {string} id
+ * @returns {Promise<Submission>}
+ * @throws {Error}
+ */
 export async function deleteSubmission(id) {
     const { data, error } = await SUPABASE.from(TABLES.SUBMISSIONS)
         .delete()
@@ -184,6 +267,11 @@ export async function deleteSubmission(id) {
 // #endregion
 
 // #region Replay table functions
+/**
+ * @param {string} submissionId
+ * @returns {Promise<ReplayData>}
+ * @throws {Error}
+ */
 export async function getReplayDataBySubmissionId(submissionId) {
     const { data, error } = await SUPABASE.from(TABLES.REPLAYS)
         .select(1)
@@ -192,6 +280,12 @@ export async function getReplayDataBySubmissionId(submissionId) {
     if(error) throw new Error(error.message);
     return data[0];
 }
+
+/**
+ * @param {string} submission_id 
+ * @param {string} replayData 
+ * @returns {Promise<ReplayData>}
+ */
 export async function createReplay(submission_id, replayData) {
     const { data, error } = await SUPABASE.from(TABLES.REPLAYS)
         .insert({ submission_id: submission_id, replay_data: replayData });
@@ -199,6 +293,12 @@ export async function createReplay(submission_id, replayData) {
     if(error) throw new Error(error.message);
     return data;
 }
+
+/**
+ * @param {string} submissionId
+ * @returns {Promise<ReplayData>}
+ * @throws {Error}
+ */
 export async function deleteReplay(submissionId) {
     const { data, error } = await SUPABASE.from(TABLES.REPLAYS)
         .delete()
@@ -208,9 +308,17 @@ export async function deleteReplay(submissionId) {
     return data;
 }
 // #endregion
-// #region Download all data
+// #region Download all (table) data
 // This is an open-source project, why not let users backup everything in case something terrible happens?
+// Note: profile pictures will not be scraped, as they are stored in a different location.
+// Besides, it'd probably take up a lot of space.
 
+/**
+ * @returns {Promise<{
+ *  profile: Profile,
+ *  submissions: Submission[]
+ * }>}
+ */
 export async function getAllDataBySelf() {
     const { data, error } = await SUPABASE.auth.getUser();
     if(error) throw new Error(error.message);
@@ -223,6 +331,15 @@ export async function getAllDataBySelf() {
         submissions: submissions
     }
 }
+
+/**
+ * 
+ * @returns {Promise<{
+ *  profiles: Profile[],
+ *  submissions: Submission[],
+ *  replays: ReplayData[]
+ * }>}
+ */
 export async function getAllData() {
     const profiles = await getAllProfiles();
     const submissions = await SUPABASE.from(TABLES.SUBMISSIONS).select('*');
diff --git a/js/profile-setup.js b/js/profile-setup.js
index 4d84171..5755bfd 100644
--- a/js/profile-setup.js
+++ b/js/profile-setup.js
@@ -3,18 +3,35 @@ import * as DB from "./db.js";
 let NSFWJSInstance = null;
 {
     const ELEMENTS = {
-        form: document.getElementById('profile-setup'),
-        profileImageInput: document.getElementById('pfp-input'),
-        profileImagePreview: document.getElementById('pfp-preview'),
-        usernameInput: document.getElementById('username'),
-        bioInput: document.getElementById('bio'),
-        charCounters: document.getElementsByClassName('char-count'),
+        // <form>
+        form: document.getElementById("profile-setup"),
+
+        // <input type="file">
+        profileImageInput: document.getElementById("pfp-input"),
+
+        // <img>
+        profileImagePreview: document.getElementById("pfp-preview"),
+
+        // <input type="text">
+        usernameInput: document.getElementById("username"),
+
+        // <textarea>
+        bioInput: document.getElementById("bio"),
+
+        // <span>[]
+        charCounters: document.getElementsByClassName("char-count"),
+
+        // <button>
+        submitButton: document.getElementById("submit-button"),
+
+        // <span>
+        progress: document.getElementById("progress")
     }
 
     // #region Handle profile image preview
     {
-        ELEMENTS.profileImageInput?.addEventListener('change', () => {
-            const file = profileImageInput.files[0];
+        ELEMENTS.profileImageInput.addEventListener("change", () => {
+            const file = ELEMENTS.profileImageInput.files[0];
             if(!file) return;
 
             const reader = new FileReader();
@@ -29,29 +46,90 @@ let NSFWJSInstance = null;
     // #region Char counter
     {
         for(const counter of ELEMENTS.charCounters) {
-            const associatedId = counter.getAttribute('for');
+            const associatedId = counter.getAttribute("for");
             if(!associatedId) {
-                console.error('No associated input found for: ', counter);
+                console.error("No associated input found for: ", counter);
                 continue;
             }
             
             const associatedInput = document.getElementById(associatedId);
             if(!associatedInput) {
-                console.error('No input found with id: ', associatedId);
+                console.error("No input found with id: ", associatedId);
                 continue;
             }
 
-            associatedInput.addEventListener('input', function() {
-                const maxChars = Number(associatedInput.getAttribute('maxlength') ?? Infinity);
+            associatedInput.addEventListener("input", function() {
+                const maxChars = Number(associatedInput.getAttribute("maxlength") ?? Infinity);
                 const currentChars = associatedInput.value.length;
                 counter.textContent = `${currentChars} / ${maxChars}`;
             });
 
-            const maxChars = Number(associatedInput.getAttribute('maxlength') ?? Infinity);
+            const maxChars = Number(associatedInput.getAttribute("maxlength") ?? Infinity);
             const currentChars = associatedInput.value.length;
             counter.textContent = `${currentChars} / ${maxChars}`;
         }
     }
     // #endregion
+
+    // #region Submit handler
+
+    // I don"t feel comfortable typing out the full words
+    const IS_SFW = {
+        h: false,
+        p: false,
+        s: false,
+        d: true,
+        n: true
+    }
+    ELEMENTS.form?.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        ELEMENTS.submitButton.disabled = true;
+        ELEMENTS.progress.textContent = "Processing...";
+
+        let username = ELEMENTS.usernameInput.value;
+        let bio = ELEMENTS.bioInput.value;
+        const profileImageFile = ELEMENTS.profileImageInput.files[0];
+
+        if(username.length < 3) {
+            alert("Username must be at least 3 characters long.");
+            return;
+        }
+
+        if(bio.trim().length === 0) bio = null;
+
+        if(profileImageFile) {
+            ELEMENTS.progress.textContent = "Loading profile picture...";
+            
+            let imageData;
+            { // Get image data from file
+                const img = new Image();
+                img.src = URL.createObjectURL(profileImageFile);
+                await new Promise((resolve, reject) => {
+                    img.onload = resolve;
+                    img.onerror = reject;
+                });
+
+                const canvas = document.createElement("canvas");
+                canvas.width = img.width; canvas.height = img.height;
+
+                const ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0);
+
+                imageData = ctx.getImageData(0, 0, img.width, img.height);
+            }
+
+            ELEMENTS.progress.textContent = "Checking profile picture...";
+            const nsfwResult = await NSFWJSInstance.classify(imageData, 1);
+
+            if(!IS_SFW[nsfwResult[0].className.charAt(0).toLowerCase()]) {
+                ELEMENTS.submitButton.disabled = false;
+                ELEMENTS.progress.textContent = "Profile picture image is determined to be not safe for work. Please upload a different image.";
+                return;
+            }
+            ELEMENTS.progress.textContent = `Image classified as ${nsfwResult[0].className}.`;
+            ELEMENTS.submitButton.disabled = false; // DEBUG
+        }
+    });
+    // #endregion
 }
 NSFWJSInstance = await nsfwjs.load("MobileNetV2");
\ No newline at end of file