🛂 Migrate frontend to Shadcn (#2010)

* 🔧 Add Tailwind, update dependencies and config files * ✨ Introduce new Shadcn components and remove old ones * 🔧 Update dependencies * Add new components.json file * 🔥 Remove Chakra UI files * 🔧 Add ThemeProvider component and integrate it into main * 🔥 Remove common components * Update primary color * ✨ Add new components * ✨ Add AuthLayout component * 🔧 Add utility function cn * 🔧 Refactor devtools integration and update dependencies * ✨ Add Footer and Error components * ♻️ Update Footer * 🔥 Remove utils * ♻️ Refactor error handling in useAuth * ♻️ Refactor useCustomToast * ♻️ Refactor Login component and form handling * ♻️ Refactor SignUp component and form handling * 🔧 Update dependencies * ♻️ Refactor RecoverPassword component and form handling * ♻️ Refactor ResetPassword and form handling * ♻️ Add error component to root route * ♻️ Refactor error handling in utils * ♻️ Update buttons * 🍱 Add icons and logos assets * ♻️ Refactor Sidebar component * 🎨 Format * ♻️ Refactor ThemeProvider * ♻️ Refactor Common components * 🔥 Remove old Appearance component * ✨ Add Sidebar components * ♻️ Refactor DeleteAccount components * ♻️ Refactor ChangePassword component * ♻️ Refactor UserSettings * ✨ Add TanStack table * ♻️ Update SignUp * ✨ Add Select component * 🎨 Format * ♻️ Update Footer * ✨ Add useCopyToClipboard hook * 🎨 Tweak table styles * 🎨 Tweak styling * ♻️ Refactor AddUser and AddItem components * ♻️ Update DeleteConfirmation * ✅ Update tests * ✅ Update tests * ✅ Fix tests * ✨ Add DataTable for item and admin management * ♻️ Refactor DeleteUser and DeleteItem components * ✅ Fix tests * ♻️ Refactor EditUser and EditItem components * ♻️ Refactor UserInformation component * 🎨 Format * ♻️ Refactor pending components * 🎨 Format * ✅ Update tests * ✅ Update tests * ✅ Fix test * ♻️ Minor tweaks * ♻️ Update social media links
2025-12-07 13:21:13 +01:00
parent 61b7cd673a
commit 8c2532a5c3
104 changed files with 8891 additions and 3287 deletions
--- a/frontend/tests/auth.setup.ts
+++ b/frontend/tests/auth.setup.ts
@@ -5,8 +5,8 @@ const authFile = "playwright/.auth/user.json"

 setup("authenticate", async ({ page }) => {
  await page.goto("/login")
-  await page.getByPlaceholder("Email").fill(firstSuperuser)
-  await page.getByPlaceholder("Password").fill(firstSuperuserPassword)
+  await page.getByTestId("email-input").fill(firstSuperuser)
+  await page.getByTestId("password-input").fill(firstSuperuserPassword)
  await page.getByRole("button", { name: "Log In" }).click()
  await page.waitForURL("/")
  await page.context().storageState({ path: authFile })
--- a/frontend/tests/config.ts
+++ b/frontend/tests/config.ts
@@ -7,15 +7,13 @@ const __dirname = path.dirname(__filename)

 dotenv.config({ path: path.join(__dirname, "../../.env") })

-const { FIRST_SUPERUSER, FIRST_SUPERUSER_PASSWORD } = process.env
-
-if (typeof FIRST_SUPERUSER !== "string") {
-  throw new Error("Environment variable FIRST_SUPERUSER is undefined")
+function getEnvVar(name: string): string {
+  const value = process.env[name]
+  if (!value) {
+    throw new Error(`Environment variable ${name} is undefined`)
+  }
+  return value
 }

-if (typeof FIRST_SUPERUSER_PASSWORD !== "string") {
-  throw new Error("Environment variable FIRST_SUPERUSER_PASSWORD is undefined")
-}
-
-export const firstSuperuser = FIRST_SUPERUSER as string
-export const firstSuperuserPassword = FIRST_SUPERUSER_PASSWORD as string
+export const firstSuperuser = getEnvVar("FIRST_SUPERUSER")
+export const firstSuperuserPassword = getEnvVar("FIRST_SUPERUSER_PASSWORD")
--- a/frontend/tests/login.spec.ts
+++ b/frontend/tests/login.spec.ts
@@ -4,21 +4,13 @@ import { randomPassword } from "./utils/random.ts"

 test.use({ storageState: { cookies: [], origins: [] } })

-type OptionsType = {
-  exact?: boolean
-}
-
 const fillForm = async (page: Page, email: string, password: string) => {
-  await page.getByPlaceholder("Email").fill(email)
-  await page.getByPlaceholder("Password", { exact: true }).fill(password)
+  await page.getByTestId("email-input").fill(email)
+  await page.getByTestId("password-input").fill(password)
 }

-const verifyInput = async (
-  page: Page,
-  placeholder: string,
-  options?: OptionsType,
-) => {
-  const input = page.getByPlaceholder(placeholder, options)
+const verifyInput = async (page: Page, testId: string) => {
+  const input = page.getByTestId(testId)
  await expect(input).toBeVisible()
  await expect(input).toHaveText("")
  await expect(input).toBeEditable()
@@ -27,8 +19,8 @@ const verifyInput = async (
 test("Inputs are visible, empty and editable", async ({ page }) => {
  await page.goto("/login")

-  await verifyInput(page, "Email")
-  await verifyInput(page, "Password", { exact: true })
+  await verifyInput(page, "email-input")
+  await verifyInput(page, "password-input")
 })

 test("Log In button is visible", async ({ page }) => {
@@ -41,7 +33,7 @@ test("Forgot Password link is visible", async ({ page }) => {
  await page.goto("/login")

  await expect(
-    page.getByRole("link", { name: "Forgot password?" }),
+    page.getByRole("link", { name: "Forgot your password?" }),
  ).toBeVisible()
 })

--- a/frontend/tests/reset-password.spec.ts
+++ b/frontend/tests/reset-password.spec.ts
@@ -16,9 +16,9 @@ test("Password Recovery title is visible", async ({ page }) => {
 test("Input is visible, empty and editable", async ({ page }) => {
  await page.goto("/recover-password")

-  await expect(page.getByPlaceholder("Email")).toBeVisible()
-  await expect(page.getByPlaceholder("Email")).toHaveText("")
-  await expect(page.getByPlaceholder("Email")).toBeEditable()
+  await expect(page.getByTestId("email-input")).toBeVisible()
+  await expect(page.getByTestId("email-input")).toHaveText("")
+  await expect(page.getByTestId("email-input")).toBeEditable()
 })

 test("Continue button is visible", async ({ page }) => {
@@ -40,7 +40,7 @@ test("User can reset password successfully using the link", async ({
  await signUpNewUser(page, fullName, email, password)

  await page.goto("/recover-password")
-  await page.getByPlaceholder("Email").fill(email)
+  await page.getByTestId("email-input").fill(email)

  await page.getByRole("button", { name: "Continue" }).click()

@@ -64,8 +64,8 @@ test("User can reset password successfully using the link", async ({
  // Set the new password and confirm it
  await page.goto(url)

-  await page.getByPlaceholder("New Password").fill(newPassword)
-  await page.getByPlaceholder("Confirm Password").fill(newPassword)
+  await page.getByTestId("new-password-input").fill(newPassword)
+  await page.getByTestId("confirm-password-input").fill(newPassword)
  await page.getByRole("button", { name: "Reset Password" }).click()
  await expect(page.getByText("Password updated successfully")).toBeVisible()

@@ -79,8 +79,8 @@ test("Expired or invalid reset link", async ({ page }) => {

  await page.goto(invalidUrl)

-  await page.getByPlaceholder("New Password").fill(password)
-  await page.getByPlaceholder("Confirm Password").fill(password)
+  await page.getByTestId("new-password-input").fill(password)
+  await page.getByTestId("confirm-password-input").fill(password)
  await page.getByRole("button", { name: "Reset Password" }).click()

  await expect(page.getByText("Invalid token")).toBeVisible()
@@ -96,7 +96,7 @@ test("Weak new password validation", async ({ page, request }) => {
  await signUpNewUser(page, fullName, email, password)

  await page.goto("/recover-password")
-  await page.getByPlaceholder("Email").fill(email)
+  await page.getByTestId("email-input").fill(email)
  await page.getByRole("button", { name: "Continue" }).click()

  const emailData = await findLastEmail({
@@ -115,8 +115,8 @@ test("Weak new password validation", async ({ page, request }) => {

  // Set a weak new password
  await page.goto(url)
-  await page.getByPlaceholder("New Password").fill(weakPassword)
-  await page.getByPlaceholder("Confirm Password").fill(weakPassword)
+  await page.getByTestId("new-password-input").fill(weakPassword)
+  await page.getByTestId("confirm-password-input").fill(weakPassword)
  await page.getByRole("button", { name: "Reset Password" }).click()

  await expect(
--- a/frontend/tests/sign-up.spec.ts
+++ b/frontend/tests/sign-up.spec.ts
@@ -4,10 +4,6 @@ import { randomEmail, randomPassword } from "./utils/random"

 test.use({ storageState: { cookies: [], origins: [] } })

-type OptionsType = {
-  exact?: boolean
-}
-
 const fillForm = async (
  page: Page,
  full_name: string,
@@ -15,18 +11,14 @@ const fillForm = async (
  password: string,
  confirm_password: string,
 ) => {
-  await page.getByPlaceholder("Full Name").fill(full_name)
-  await page.getByPlaceholder("Email").fill(email)
-  await page.getByPlaceholder("Password", { exact: true }).fill(password)
-  await page.getByPlaceholder("Confirm Password").fill(confirm_password)
+  await page.getByTestId("full-name-input").fill(full_name)
+  await page.getByTestId("email-input").fill(email)
+  await page.getByTestId("password-input").fill(password)
+  await page.getByTestId("confirm-password-input").fill(confirm_password)
 }

-const verifyInput = async (
-  page: Page,
-  placeholder: string,
-  options?: OptionsType,
-) => {
-  const input = page.getByPlaceholder(placeholder, options)
+const verifyInput = async (page: Page, testId: string) => {
+  const input = page.getByTestId(testId)
  await expect(input).toBeVisible()
  await expect(input).toHaveText("")
  await expect(input).toBeEditable()
@@ -35,10 +27,10 @@ const verifyInput = async (
 test("Inputs are visible, empty and editable", async ({ page }) => {
  await page.goto("/signup")

-  await verifyInput(page, "Full Name")
-  await verifyInput(page, "Email")
-  await verifyInput(page, "Password", { exact: true })
-  await verifyInput(page, "Confirm Password")
+  await verifyInput(page, "full-name-input")
+  await verifyInput(page, "email-input")
+  await verifyInput(page, "password-input")
+  await verifyInput(page, "confirm-password-input")
 })

 test("Sign Up button is visible", async ({ page }) => {
@@ -126,7 +118,7 @@ test("Sign up with mismatched passwords", async ({ page }) => {
  await fillForm(page, fullName, email, password, password2)
  await page.getByRole("button", { name: "Sign Up" }).click()

-  await expect(page.getByText("Passwords do not match")).toBeVisible()
+  await expect(page.getByText("The passwords don't match")).toBeVisible()
 })

 test("Sign up with missing full name", async ({ page }) => {
@@ -152,7 +144,7 @@ test("Sign up with missing email", async ({ page }) => {
  await fillForm(page, fullName, email, password, password)
  await page.getByRole("button", { name: "Sign Up" }).click()

-  await expect(page.getByText("Email is required")).toBeVisible()
+  await expect(page.getByText("Invalid email address")).toBeVisible()
 })

 test("Sign up with missing password", async ({ page }) => {
--- a/frontend/tests/user-settings.spec.ts
+++ b/frontend/tests/user-settings.spec.ts
@@ -4,7 +4,7 @@ import { createUser } from "./utils/privateApi.ts"
 import { randomEmail, randomPassword } from "./utils/random"
 import { logInUser, logOutUser } from "./utils/user"

-const tabs = ["My profile", "Password", "Appearance"]
+const tabs = ["My profile", "Password", "Danger zone"]

 // User Information

@@ -44,7 +44,7 @@ test.describe("Edit user full name and email successfully", () => {
    await expect(page.getByText("User updated successfully")).toBeVisible()
    // Check if the new name is displayed on the page
    await expect(
-      page.getByLabel("My profile").getByText(updatedName, { exact: true }),
+      page.locator("form").getByText(updatedName, { exact: true }),
    ).toBeVisible()
  })

@@ -65,7 +65,7 @@ test.describe("Edit user full name and email successfully", () => {
    await page.getByRole("button", { name: "Save" }).click()
    await expect(page.getByText("User updated successfully")).toBeVisible()
    await expect(
-      page.getByLabel("My profile").getByText(updatedEmail, { exact: true }),
+      page.locator("form").getByText(updatedEmail, { exact: true }),
    ).toBeVisible()
  })
 })
@@ -88,7 +88,7 @@ test.describe("Edit user with invalid data", () => {
    await page.getByRole("button", { name: "Edit" }).click()
    await page.getByLabel("Email").fill(invalidEmail)
    await page.locator("body").click()
-    await expect(page.getByText("Email is required")).toBeVisible()
+    await expect(page.getByText("Invalid email address")).toBeVisible()
  })

  test("Cancel edit action restores original name", async ({ page }) => {
@@ -107,9 +107,7 @@ test.describe("Edit user with invalid data", () => {
    await page.getByLabel("Full name").fill(updatedName)
    await page.getByRole("button", { name: "Cancel" }).first().click()
    await expect(
-      page
-        .getByLabel("My profile")
-        .getByText(user.full_name as string, { exact: true }),
+      page.locator("form").getByText(user.full_name as string, { exact: true }),
    ).toBeVisible()
  })

@@ -129,7 +127,7 @@ test.describe("Edit user with invalid data", () => {
    await page.getByLabel("Email").fill(updatedEmail)
    await page.getByRole("button", { name: "Cancel" }).first().click()
    await expect(
-      page.getByLabel("My profile").getByText(email, { exact: true }),
+      page.locator("form").getByText(email, { exact: true }),
    ).toBeVisible()
  })
 })
@@ -151,11 +149,11 @@ test.describe("Change password successfully", () => {

    await page.goto("/settings")
    await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByPlaceholder("Current Password").fill(password)
-    await page.getByPlaceholder("New Password").fill(NewPassword)
-    await page.getByPlaceholder("Confirm Password").fill(NewPassword)
-    await page.getByRole("button", { name: "Save" }).click()
-    await expect(page.getByText("Password updated successfully.")).toBeVisible()
+    await page.getByTestId("current-password-input").fill(password)
+    await page.getByTestId("new-password-input").fill(NewPassword)
+    await page.getByTestId("confirm-password-input").fill(NewPassword)
+    await page.getByRole("button", { name: "Update Password" }).click()
+    await expect(page.getByText("Password updated successfully")).toBeVisible()

    await logOutUser(page)

@@ -179,9 +177,10 @@ test.describe("Change password with invalid data", () => {

    await page.goto("/settings")
    await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByPlaceholder("Current Password").fill(password)
-    await page.getByPlaceholder("New Password").fill(weakPassword)
-    await page.getByPlaceholder("Confirm Password").fill(weakPassword)
+    await page.getByTestId("current-password-input").fill(password)
+    await page.getByTestId("new-password-input").fill(weakPassword)
+    await page.getByTestId("confirm-password-input").fill(weakPassword)
+    await page.getByRole("button", { name: "Update Password" }).click()
    await expect(
      page.getByText("Password must be at least 8 characters"),
    ).toBeVisible()
@@ -202,11 +201,11 @@ test.describe("Change password with invalid data", () => {

    await page.goto("/settings")
    await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByPlaceholder("Current Password").fill(password)
-    await page.getByPlaceholder("New Password").fill(newPassword)
-    await page.getByPlaceholder("Confirm Password").fill(confirmPassword)
-    await page.getByLabel("Password", { exact: true }).locator("form").click()
-    await expect(page.getByText("The passwords do not match")).toBeVisible()
+    await page.getByTestId("current-password-input").fill(password)
+    await page.getByTestId("new-password-input").fill(newPassword)
+    await page.getByTestId("confirm-password-input").fill(confirmPassword)
+    await page.getByRole("button", { name: "Update Password" }).click()
+    await expect(page.getByText("The passwords don't match")).toBeVisible()
  })

  test("Current password and new password are the same", async ({ page }) => {
@@ -220,10 +219,10 @@ test.describe("Change password with invalid data", () => {

    await page.goto("/settings")
    await page.getByRole("tab", { name: "Password" }).click()
-    await page.getByPlaceholder("Current Password").fill(password)
-    await page.getByPlaceholder("New Password").fill(password)
-    await page.getByPlaceholder("Confirm Password").fill(password)
-    await page.getByRole("button", { name: "Save" }).click()
+    await page.getByTestId("current-password-input").fill(password)
+    await page.getByTestId("new-password-input").fill(password)
+    await page.getByTestId("confirm-password-input").fill(password)
+    await page.getByRole("button", { name: "Update Password" }).click()
    await expect(
      page.getByText("New password cannot be the same as the current one"),
    ).toBeVisible()
@@ -232,76 +231,39 @@ test.describe("Change password with invalid data", () => {

 // Appearance

-test("Appearance tab is visible", async ({ page }) => {
+test("Appearance button is visible in sidebar", async ({ page }) => {
  await page.goto("/settings")
-  await page.getByRole("tab", { name: "Appearance" }).click()
-  await expect(page.getByLabel("Appearance")).toBeVisible()
+  await expect(page.getByTestId("theme-button")).toBeVisible()
 })

-test("User can switch from light mode to dark mode and vice versa", async ({
+test("User can switch between theme modes", async ({
  page,
 }) => {
  await page.goto("/settings")
-  await page.getByRole("tab", { name: "Appearance" }).click()

-  // Ensure the initial state is light mode
-  if (
-    await page.evaluate(() =>
-      document.documentElement.classList.contains("dark"),
-    )
-  ) {
-    await page
-      .locator("label")
-      .filter({ hasText: "Light Mode" })
-      .locator("span")
-      .first()
-      .click()
-  }
+  await page.getByTestId("theme-button").click()
+  await page.getByTestId("dark-mode").click()
+  await expect(page.locator("html")).toHaveClass(/dark/)

-  let isLightMode = await page.evaluate(() =>
-    document.documentElement.classList.contains("light"),
-  )
-  expect(isLightMode).toBe(true)
+  // wait for dropdown to close before reopening
+  await expect(page.getByTestId("dark-mode")).not.toBeVisible()

-  await page
-    .locator("label")
-    .filter({ hasText: "Dark Mode" })
-    .locator("span")
-    .first()
-    .click()
-  const isDarkMode = await page.evaluate(() =>
-    document.documentElement.classList.contains("dark"),
-  )
-  expect(isDarkMode).toBe(true)
-
-  await page
-    .locator("label")
-    .filter({ hasText: "Light Mode" })
-    .locator("span")
-    .first()
-    .click()
-  isLightMode = await page.evaluate(() =>
-    document.documentElement.classList.contains("light"),
-  )
-  expect(isLightMode).toBe(true)
+  await page.getByTestId("theme-button").click()
+  await page.getByTestId("light-mode").click()
+  await expect(page.locator("html")).toHaveClass(/light/)
 })

 test("Selected mode is preserved across sessions", async ({ page }) => {
  await page.goto("/settings")
-  await page.getByRole("tab", { name: "Appearance" }).click()

-  // Ensure the initial state is light mode
+  await page.getByTestId("theme-button").click()
  if (
    await page.evaluate(() =>
      document.documentElement.classList.contains("dark"),
    )
  ) {
-    await page
-      .locator("label")
-      .filter({ hasText: "Light Mode" })
-      .locator("span")
-      .first()
-      .click()
+    await page.getByTestId("light-mode").click()
+    await page.getByTestId("theme-button").click()
  }

  const isLightMode = await page.evaluate(() =>
@@ -309,12 +271,8 @@ test("Selected mode is preserved across sessions", async ({ page }) => {
  )
  expect(isLightMode).toBe(true)

-  await page
-    .locator("label")
-    .filter({ hasText: "Dark Mode" })
-    .locator("span")
-    .first()
-    .click()
+  await page.getByTestId("theme-button").click()
+  await page.getByTestId("dark-mode").click()
  let isDarkMode = await page.evaluate(() =>
    document.documentElement.classList.contains("dark"),
  )
--- a/frontend/tests/utils/user.ts
+++ b/frontend/tests/utils/user.ts
@@ -8,10 +8,10 @@ export async function signUpNewUser(
 ) {
  await page.goto("/signup")

-  await page.getByPlaceholder("Full Name").fill(name)
-  await page.getByPlaceholder("Email").fill(email)
-  await page.getByPlaceholder("Password", { exact: true }).fill(password)
-  await page.getByPlaceholder("Confirm Password").fill(password)
+  await page.getByTestId("full-name-input").fill(name)
+  await page.getByTestId("email-input").fill(email)
+  await page.getByTestId("password-input").fill(password)
+  await page.getByTestId("confirm-password-input").fill(password)
  await page.getByRole("button", { name: "Sign Up" }).click()
  await page.goto("/login")
 }
@@ -19,8 +19,8 @@ export async function signUpNewUser(
 export async function logInUser(page: Page, email: string, password: string) {
  await page.goto("/login")

-  await page.getByPlaceholder("Email").fill(email)
-  await page.getByPlaceholder("Password", { exact: true }).fill(password)
+  await page.getByTestId("email-input").fill(email)
+  await page.getByTestId("password-input").fill(password)
  await page.getByRole("button", { name: "Log In" }).click()
  await page.waitForURL("/")
  await expect(