refactor(profile): migrate edit profile modal to SolidJS (@AzureNightlock, @fehmer)

backend/__tests__/api/controllers/user.spec.ts

@@ -3347,7 +3347,7 @@ describe("user controller test", () => {
           bio: new Array(251).fill("x").join(""),
           keyboard: new Array(76).fill("x").join(""),
           socialProfiles: {
-            twitter: new Array(21).fill("x").join(""),
+            twitter: new Array(16).fill("x").join(""),
             github: new Array(40).fill("x").join(""),
             website:
               "https://" +
@@ -3362,7 +3362,7 @@ describe("user controller test", () => {
         validationErrors: [
           '"bio" String must contain at most 250 character(s)',
           '"keyboard" String must contain at most 75 character(s)',
-          '"socialProfiles.twitter" String must contain at most 20 character(s)',
+          '"socialProfiles.twitter" String must contain at most 15 character(s)',
           '"socialProfiles.github" String must contain at most 39 character(s)',
           '"socialProfiles.website" String must contain at most 200 character(s)',
         ],

frontend/__tests__/components/ui/form/SubmitButton.spec.tsx

@@ -2,21 +2,19 @@ import { render, screen } from "@solidjs/testing-library";
 import { JSXElement } from "solid-js";
 import { describe, it, expect } from "vitest";
 
-import { SubmitButton } from "../../../../src/ts/components/ui/form/SubmitButton";
+import {
+  FormStateSlice,
+  SubmitButton,
+} from "../../../../src/ts/components/ui/form/SubmitButton";
 
-type FormState = {
-  canSubmit: boolean;
-  isSubmitting: boolean;
-  isValid: boolean;
-  isDirty: boolean;
-};
+type FormState = FormStateSlice;
 
 function makeForm(state: Partial<FormState> = {}) {
   const fullState: FormState = {
     canSubmit: true,
     isSubmitting: false,
     isValid: true,
-    isDirty: true,
+    isDefaultValue: false,
     ...state,
   };
 
@@ -39,9 +37,9 @@ describe("SubmitButton", () => {
     expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
   });
 
-  it("disables when form is not dirty", () => {
+  it("disables when form is unchanged", () => {
     render(() => (
-      <SubmitButton form={makeForm({ isDirty: false })} text="Save" />
+      <SubmitButton form={makeForm({ isDefaultValue: true })} text="Save" />
     ));
     expect(screen.getByRole("button")).toBeDisabled();
   });

frontend/src/html/popups.html

@@ -349,78 +349,3 @@
     <div class="suggestions"></div>
   </div>
 </dialog>
-
-<dialog id="editProfileModal" class="modalWrapper hidden">
-  <form class="modal">
-    <div class="title">Edit Profile</div>
-    <div>
-      <label>name</label>
-      <div>
-        To update your name, go to Account Settings > Account > Update account
-        name
-      </div>
-    </div>
-    <div>
-      <label>avatar</label>
-      <div>
-        To update your avatar make sure your Discord account is linked, then go
-        to Account Settings > Account > Discord Integration and click "Update
-        Avatar"
-      </div>
-    </div>
-    <div>
-      <label>bio</label>
-      <textarea class="bio" autocomplete="off" maxlength="250"></textarea>
-    </div>
-    <div>
-      <label>keyboard</label>
-      <textarea class="keyboard" autocomplete="off" maxlength="75"></textarea>
-    </div>
-    <div>
-      <label>github</label>
-      <div class="socialURL">
-        <p>https://github.com/</p>
-        <input
-          class="github"
-          type="text"
-          value=""
-          placeholder="username"
-          maxlength="39"
-        />
-      </div>
-    </div>
-    <div>
-      <label>twitter</label>
-      <div class="socialURL">
-        <p>https://x.com/</p>
-        <input
-          class="twitter"
-          type="text"
-          value=""
-          placeholder="username"
-          maxlength="20"
-        />
-      </div>
-    </div>
-    <div>
-      <label>website</label>
-      <input class="website" type="text" value="" maxlength="200" />
-    </div>
-    <div>
-      <label>badge</label>
-      <div class="badgeSelectionContainer"></div>
-    </div>
-    <div>
-      <label>public activity</label>
-      <label class="checkbox">
-        <input
-          class="editProfileShowActivityOnPublicProfile"
-          type="checkbox"
-          checked
-        />
-        <span>Include test activity graph on your public profile.</span>
-      </label>
-    </div>
-    <button class="edit-profile-submit" type="submit">save</button>
-  </form>
-</dialog>

frontend/src/styles/popups.scss

@@ -658,62 +658,3 @@ body.darkMode {
     }
   }
 }
-
-#editProfileModal {
-  .modal {
-    max-width: 600px;
-    max-height: 100%;
-    label {
-      color: var(--sub-color);
-      margin-bottom: 0.25em;
-      display: block;
-    }
-    input:not([type="checkbox"]) {
-      width: 100%;
-    }
-    input[type="checkbox"] {
-      vertical-align: text-bottom;
-    }
-    textarea {
-      resize: vertical;
-      width: 100%;
-      padding: 10px;
-      line-height: 1.2rem;
-      min-height: 5rem;
-      max-height: 10rem;
-    }
-
-    .socialURL {
-      display: flex;
-    }
-
-    .socialURL > p {
-      margin-block: 0.5rem;
-      margin-inline-end: 0.5rem;
-    }
-
-    .badgeSelectionContainer {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .badgeSelectionItem {
-      width: max-content;
-      opacity: 25%;
-      cursor: pointer;
-      margin-right: 0.5rem;
-      margin-bottom: 0.5rem;
-      padding: 0;
-      border-radius: calc(var(--roundness) / 2);
-    }
-
-    .badgeSelectionItem.selected,
-    .badgeSelectionItem:hover {
-      opacity: 100%;
-    }
-
-    span {
-      color: var(--text-color);
-    }
-  }
-}

frontend/src/ts/components/common/UserBadge.tsx

@@ -14,6 +14,7 @@ export function UserBadge(props: {
   class?: string;
   balloon?: Omit<BalloonProps, "text">;
   hideTextOnSmallScreens?: boolean;
+  hideDescription?: boolean;
 }): JSXElement {
   const badge = (): UserBadgeType | undefined =>
     props.id !== undefined ? badges[props.id] : undefined;
@@ -24,7 +25,7 @@ export function UserBadge(props: {
           "rounded-[0.5em] px-[0.5em] py-[0.25em] text-em-xs",
           props.class,
         )}
-        text={badge()?.description ?? ""}
+        text={props.hideDescription ? "" : (badge()?.description ?? "")}
         {...props.balloon}
         style={{
           background: badge()?.background ?? "inherit",

frontend/src/ts/components/modals/CustomTestDurationModal.tsx

@@ -98,7 +98,7 @@ export function CustomTestDurationModal(): JSXElement {
           form={form}
           variant="button"
           text="apply"
-          skipDirtyCheck
+          skipUnchangedCheck
         />
       </form>
     </AnimatedModal>

frontend/src/ts/components/modals/CustomTextModal.tsx

@@ -491,7 +491,7 @@ export function CustomTextModal(): JSXElement {
             </div>
             <SubmitButton
               form={form}
-              skipDirtyCheck
+              skipUnchangedCheck
               variant="button"
               text="ok"
               class="lg:col-start-1"

frontend/src/ts/components/modals/CustomWordAmountModal.tsx

@@ -75,7 +75,7 @@ export function CustomWordAmountModal(): JSXElement {
           form={form}
           variant="button"
           text="apply"
-          skipDirtyCheck
+          skipUnchangedCheck
         />
       </form>
     </AnimatedModal>