register (#625)

* register * fixup? * fixup * add login * add forgot password * fixup
Pseudo-Corp · Jan 9, 2025 · 9737ae5 · 9737ae5
1 parent f7c244f
commit 9737ae5
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 28 deletions.
diff --git a/Synergism.css b/Synergism.css
@@ -322,7 +322,8 @@ body button:active:not(:disabled) {
     background-color: var(--hover-color);
 }
 
-#confirmationBox {
+#confirmationBox,
+#captchaHolder {
     display: none;
     position: fixed;
     top: 50vh;
@@ -3873,15 +3874,44 @@ img#singularityPerksIcon {
 
 /* // Stolen from https://codepen.io/mike-schultz/pen/NgQvGO */
 
-#accountSubTab > div.scrollbarX {
-    padding-top: 10px;
+#accountSubTab > div.scrollbarX > div[id="button-holder"] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 }
 
-#accountSubTab > div.scrollbarX > img {
-    /* A 1.3 width x height ratio */
-    width: 96px;
-    height: 72px;
-    image-rendering: auto;
+#accountSubTab > div.scrollbarX > div[id="button-holder"] > button {
+    border: 2px solid red;
+    min-width: 150px;
+    min-height: 30px;
+    margin: 2px;
+}
+
+#accountSubTab > div.scrollbarX > div:is(#register, #login, #forgotpassword) {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid gold;
+    width: max-content;
+    margin: 0 auto;
+}
+
+#accountSubTab > div.scrollbarX > div:is(#login, #forgotpassword) {
+    display: none;
+}
+
+/** Remove vertical spacing */
+#accountSubTab > div.scrollbarX > div > form {
+    font-size: 0;
+}
+
+#accountSubTab > div.scrollbarX > div > form > * {
+    font-size: medium;
+    margin: 2px 10px;
+}
+
+#accountSubTab > div.scrollbarX > div > form > input[type="submit"] {
+    border: 1px solid gold;
+    padding: 3px 5px;
 }
 
 #pixelProgressBar {
@@ -4200,3 +4230,9 @@ form input:hover {
     border: 2px solid gold;
     font-size: 1.2em;
 }
+
+#captchaHolder > .cf-turnstile {
+    max-width: fit-content;
+    max-height: fit-content;
+    margin: auto;
+}
diff --git a/index.html b/index.html
@@ -16,7 +16,9 @@
 
     <link rel="stylesheet" href="Synergism.css">
     <title>Synergism</title>
+
     <script src="./dist/out.js" defer></script>
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
 </head>
 <body class="bodycolor loading">
     <div id="transparentBG" style="display: block;"></div>
@@ -3677,7 +3679,53 @@ <h1>Artists</h1>
             </div>
         </div>
         <div class="subtabContent subtabDisplayFlex" id="accountSubTab">
-          <div class="scrollbarX"></div>
+          <div class="scrollbarX">
+            <div id="button-holder">
+              <button id="open-register">Register</button>
+              <button id="open-signin">Login</button>
+              <button id="open-forgotpassword">Forgot Password</button>
+            </div>
+            <div id="register">
+              <form action="https://synergism.cc/register" method="POST">
+                <label for="email">Email Address</label>
+                <input type="text" id="email" name="email" placeholder="[email protected]">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" placeholder="......">
+                <label for="password">Confirm Password</label>
+                <input type="password" id="confirm-password" name="confirm-password" placeholder="......">
+                <div class="cf-turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
+                <input type="submit" value="Register">
+              </form>
+            </div>
+            <div id="login">
+              <form action="https://synergism.cc/signin" method="POST">
+                <label for="email-si">Email Address</label>
+                <input type="text" id="email-si" name="email" placeholder="[email protected]">
+                <label for="password-si">Password</label>
+                <input type="password" id="password-si" name="password" placeholder="......">
+                <div class="cf-turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
+                <input type="submit" value="Login">
+              </form>
+            </div>
+            <div id="forgotpassword">
+              <form action="https://synergism.cc/forgot-password" method="POST">
+                <label for="email-fp">Email Address</label>
+                <input type="text" id="email-fp" name="email" placeholder="[email protected]">
+                <div class="cf-turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
+                <p>This can only be once a day!</p>
+                <input type="submit" value="Send Reset Password Email">
+              </form>
+            </div>
+
+            <a
+              href="https://synergism.cc/login?with=discord"
+              style="display:inline-block;border: 2px solid #5865F2; height: 25px; width: 20%; margin-bottom:5px;"
+            >Login with Discord</a>
+            <a
+              href="https://synergism.cc/login?with=patreon"
+              style="display:inline-block;border: 2px solid #ff5900; height: 25px; width: 20%;"
+            >Login with Patreon</a>
+          </div>
           <!-- TODO: i18n (not done because of potential conflicts with pixel-update) -->
           <button id="logoutButton">Logout</button>
         </div>

diff --git a/package.json b/package.json
@@ -16,11 +16,12 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.4.1",
+    "@biomejs/biome": "^1.9.4",
+    "@types/cloudflare-turnstile": "^0.2.2",
     "@types/lodash.clonedeepwith": "^4.5.9",
     "@types/lz-string": "^1.3.34",
     "deep-object-diff": "^1.1.9",
-    "dprint": "^0.45.0",
+    "dprint": "^0.48.0",
     "esbuild": "^0.17.15",
     "htmlhint": "^1.1.4",
     "husky": "^8.0.3",

diff --git a/src/Login.ts b/src/Login.ts
@@ -99,7 +99,9 @@ export async function handleLogin () {
     document.getElementById('accountSubTab')?.appendChild(logoutElement)
   }
 
-  const response = await fetch('https://synergism.cc/api/v1/users/me')
+  const response = await fetch('https://synergism.cc/api/v1/users/me').catch(
+    () => new Response(JSON.stringify({ member: null, globalBonus: 0, personalBonus: 0 }))
+  )
 
   if (!response.ok) {
     currentBonus.textContent =
@@ -132,9 +134,7 @@ export async function handleLogin () {
       user = member.user.username
     }
 
-    const boosted = accountType === 'discord'
-      ? Boolean(member?.premium_since) || member?.roles.includes(BOOSTER)
-      : false
+    const boosted = accountType === 'discord' && (Boolean(member?.premium_since) || member?.roles.includes(BOOSTER))
     const hasTier1 = member.roles.includes(TRANSCENDED_BALLER) ?? false
     const hasTier2 = member.roles.includes(REINCARNATED_BALLER) ?? false
     const hasTier3 = member.roles.includes(ASCENDED_BALLER) ?? false
@@ -226,19 +226,23 @@ export async function handleLogin () {
     subtabElement.appendChild(cloudSaveParent)
   } else {
     // User is not logged in
-    subtabElement.innerHTML = `
-      <img id="discord-logo" alt="Discord Logo" src="Pictures/discord-mark-blue.png" loading="lazy" />
-      <a
-        href="https://synergism.cc/login?with=discord"
-        style="display:inline-block;border: 2px solid #5865F2; height: 25px; width: 250px;"
-      >Login with Discord</a>
-
-      <img id="patreon-logo" alt="Patreon Logo" src="Pictures/patreon-logo.png" loading="lazy" />
-      <a
-        href="https://synergism.cc/login?with=patreon"
-        style="display:inline-block;border: 2px solid #ff5900; height: 25px; width: 250px;"
-      >Login with Patreon</a>
-    `
+    subtabElement.querySelector('#open-register')?.addEventListener('click', () => {
+      subtabElement.querySelector<HTMLElement>('#register')?.style.setProperty('display', 'flex')
+      subtabElement.querySelector<HTMLElement>('#login')?.style.setProperty('display', 'none')
+      subtabElement.querySelector<HTMLElement>('#forgotpassword')?.style.setProperty('display', 'none')
+    })
+
+    subtabElement.querySelector('#open-signin')?.addEventListener('click', () => {
+      subtabElement.querySelector<HTMLElement>('#register')?.style.setProperty('display', 'none')
+      subtabElement.querySelector<HTMLElement>('#login')?.style.setProperty('display', 'flex')
+      subtabElement.querySelector<HTMLElement>('#forgotpassword')?.style.setProperty('display', 'none')
+    })
+
+    subtabElement.querySelector('#open-forgotpassword')?.addEventListener('click', () => {
+      subtabElement.querySelector<HTMLElement>('#register')?.style.setProperty('display', 'none')
+      subtabElement.querySelector<HTMLElement>('#login')?.style.setProperty('display', 'none')
+      subtabElement.querySelector<HTMLElement>('#forgotpassword')?.style.setProperty('display', 'flex')
+    })
   }
 }