v0.4.5

backend/api/settings.py

@@ -125,7 +125,7 @@ class ThrottleScopes:
         ThrottleScopes.PASSWORD_RESET.key: "10/hour",
         ThrottleScopes.EVENT_CREATION.key: "25/hour",
         ThrottleScopes.AVAILABILITY_ADD.key: "50/hour",
-        ThrottleScopes.CODE_CHECK.key: "50/hour",
+        ThrottleScopes.CODE_CHECK.key: "10/min",
     },
 }
 
@@ -195,7 +195,7 @@ class ThrottleScopes:
             "class": "logging.handlers.RotatingFileHandler",
             "filename": f"{LOG_DIR}/django.log",
             "formatter": "verbose",
-            "level": "DEBUG",
+            "level": "DEBUG" if DEBUG else "INFO",
             "maxBytes": 1024 * 1024 * 5,  # 5 MB
             "backupCount": 5,
         },

frontend/src/app/(event)/[event-code]/edit/loading.tsx

@@ -6,7 +6,7 @@ export default function Loading() {
       <HeaderSpacer />
 
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
-        <div className="bg-loading h-12 w-3/4 rounded-3xl md:w-1/2" />
+        <div className="bg-loading h-12 w-full rounded-3xl md:w-1/2" />
         <div className="w-50 bg-loading hidden h-10 rounded-full" />
       </div>
 
@@ -15,11 +15,12 @@ export default function Loading() {
         <div className="bg-loading col-span-3 hidden h-20 rounded-3xl md:block" />
         <div className="bg-loading hidden h-20 rounded-3xl md:col-start-1 md:row-start-2 md:block" />
         <div className="h-120 bg-loading hidden rounded-3xl md:col-span-10 md:col-start-2 md:row-span-10 md:row-start-2 md:block" />
-        <div className="bg-loading hidden h-60 rounded-3xl md:col-start-1 md:row-start-11 md:block" />
+        <div className="bg-loading hidden h-10 rounded-3xl md:col-start-1 md:row-start-11 md:block" />
 
-        <div className="bg-loading h-20 w-3/4 rounded-3xl md:hidden" />
-        <div className="bg-loading h-20 w-3/4 rounded-3xl md:hidden" />
-        <div className="h-100 bg-loading rounded-3xl md:hidden" />
+        <div className="bg-loading h-16 w-3/4 rounded-3xl md:hidden" />
+        <div className="bg-loading h-24 w-3/4 rounded-3xl md:hidden" />
+        <div className="bg-loading h-24 w-3/4 rounded-3xl md:hidden" />
+        <div className="bg-loading h-10 w-3/4 rounded-3xl md:hidden" />
       </div>
     </div>
   );

frontend/src/app/(event)/[event-code]/loading.tsx

@@ -8,16 +8,15 @@ export default function Loading() {
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
         <div className="bg-loading h-12 w-1/2 rounded-3xl" />
 
-        <div className="w-50 bg-loading h-10 rounded-full" />
+        <div className="w-50 bg-loading hidden h-10 rounded-full md:block" />
       </div>
 
       <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
         <div className="bg-loading h-96 w-full rounded-3xl" />
 
         <div className="h-fit w-full shrink-0 space-y-4 overflow-y-auto md:w-80">
-          <div className="bg-loading hidden h-20 rounded-3xl md:block" />
+          <div className="bg-loading hidden h-40 rounded-3xl md:block" />
 
-          <div className="h-70 bg-loading hidden rounded-3xl md:block" />
           <div className="bg-loading h-20 rounded-3xl" />
         </div>
       </div>

frontend/src/app/(event)/[event-code]/painting/loading.tsx

@@ -8,20 +8,21 @@ export default function Loading() {
       <div className="flex w-full flex-wrap items-center justify-between md:flex-row">
         <div className="bg-loading h-12 w-1/2 rounded-3xl" />
 
-        <div className="bg-loading h-10 w-40 rounded-full" />
+        <div className="bg-loading hidden h-10 w-40 rounded-full md:block" />
       </div>
 
       <div className="mb-8 flex h-full flex-col gap-4 md:mb-0 md:flex-row">
-        <div className="h-fit w-full shrink-0 space-y-6 overflow-y-auto md:w-80">
+        <div className="hidden h-fit w-full shrink-0 space-y-6 overflow-y-auto md:block md:w-80">
           <div className="space-y-3">
             <div className="bg-loading h-8 w-3/4 rounded-3xl" />
             <div className="bg-loading h-8 w-1/2 rounded-3xl" />
           </div>
-          <div className="h-70 bg-loading hidden rounded-3xl md:block" />
-          <div className="bg-loading h-20 rounded-3xl" />
+          <div className="bg-loading hidden h-20 rounded-3xl md:block" />
         </div>
 
         <div className="bg-loading h-96 w-full rounded-3xl" />
+
+        <div className="bg-loading h-20 rounded-3xl" />
       </div>
     </div>
   );

frontend/src/app/dashboard/loading.tsx

@@ -8,7 +8,7 @@ export default function Loading() {
 
       <div className="bg-panel w-full rounded-3xl">
         <div className="p-4">
-          <div className="bg-foreground/10 h-10 w-1/2 animate-pulse rounded-full" />
+          <div className="bg-background h-10 w-1/2 animate-pulse rounded-full" />
         </div>
 
         {/* 2. Skeleton for the Event Grid */}
@@ -17,7 +17,7 @@ export default function Loading() {
             {[1, 2, 3].map((i) => (
               <div
                 key={i}
-                className="bg-foreground/5 h-50 w-full animate-pulse rounded-lg"
+                className="bg-background h-50 w-full animate-pulse rounded-lg"
               />
             ))}
           </div>

frontend/src/app/settings/loading.tsx

@@ -0,0 +1,21 @@
+import HeaderSpacer from "@/features/header/components/header-spacer";
+
+export default function Loading() {
+  return (
+    <div className="flex animate-pulse flex-col space-y-4 pl-6 pr-6">
+      <HeaderSpacer />
+
+      <div className="bg-background flex w-full flex-col gap-1">
+        <h1 className="text-2xl font-bold tracking-tight">Account Settings</h1>
+        <p className="text-foreground/60 text-sm">
+          Manage your account settings and preferences!
+        </p>
+      </div>
+
+      <div className="mt-2 flex flex-col gap-6 md:flex-row md:gap-12">
+        <div className="bg-loading w-23 h-11 rounded-3xl md:w-64" />
+        <div className="bg-loading h-68 w-full max-w-2xl rounded-3xl" />
+      </div>
+    </div>
+  );
+}

frontend/src/components/text-input-field.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 
-import * as Collapsible from "@radix-ui/react-collapsible";
 import { EyeClosedIcon, EyeIcon, TriangleAlertIcon } from "lucide-react";
 
 import PasswordCriteria from "@/features/auth/components/password-criteria";
@@ -192,14 +191,10 @@ export default function TextInputField(props: TextInputFieldProps) {
         )}
       </div>
 
-      {/* Password Criteria */}
-      <Collapsible.Root open={showPasswordCriteria}>
-        <Collapsible.Content className="collapsible-content">
-          <div className="px-4 pb-1 pt-2">
-            <PasswordCriteria criteria={passwordCriteria} />
-          </div>
-        </Collapsible.Content>
-      </Collapsible.Root>
+      <PasswordCriteria
+        open={showPasswordCriteria}
+        criteria={passwordCriteria}
+      />
     </div>
   );
 }

frontend/src/features/auth/components/password-criteria.tsx

@@ -1,44 +1,69 @@
+import { AnimatePresence, motion } from "framer-motion";
 import { CheckIcon, XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils/classname";
 
 type PasswordCriteriaProps = {
+  open: boolean;
   criteria: { [key: string]: boolean };
 };
 
-export default function PasswordCriteria(props: PasswordCriteriaProps) {
-  const allCriteriaMet = Object.values(props.criteria).every((value) => value);
+export default function PasswordCriteria({
+  open,
+  criteria,
+}: PasswordCriteriaProps) {
+  const allCriteriaMet = Object.values(criteria).every((value) => value);
 
   const iconClass = "w-4 h-4";
 
   return (
-    <div className="w-full text-sm">
-      {allCriteriaMet ? (
-        <div className="flex items-center gap-1">
-          <CheckIcon className={iconClass} />
-          <b>Password is strong!</b>
-        </div>
-      ) : (
-        <>
-          <b>Your password must:</b>
-          {Object.entries(props.criteria).map(([key, value], index) => (
-            <div
-              key={index}
-              className={cn(
-                "flex items-center gap-1",
-                value ? "line-through opacity-50" : "",
-              )}
-            >
-              {value ? (
-                <CheckIcon className={iconClass} />
-              ) : (
-                <XIcon className={iconClass} />
-              )}
-              {key}
-            </div>
-          ))}
-        </>
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          className="w-full overflow-hidden px-4 text-sm"
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+        >
+          <div className="pt-2 text-start">
+            <AnimatePresence mode="sync">
+              <motion.div
+                key={allCriteriaMet ? "strong" : "criteria"}
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: "auto" }}
+                exit={{ opacity: 0, height: 0 }}
+              >
+                {allCriteriaMet ? (
+                  <div className="flex items-center gap-1">
+                    <CheckIcon className={iconClass} />
+                    <b>Your password is strong!</b>
+                  </div>
+                ) : (
+                  <>
+                    <b>Your password must:</b>
+                    {Object.entries(criteria).map(([key, value], index) => (
+                      <div
+                        key={index}
+                        className={cn(
+                          "flex items-center gap-1",
+                          value ? "line-through opacity-50" : "",
+                        )}
+                      >
+                        {value ? (
+                          <CheckIcon className={iconClass} />
+                        ) : (
+                          <XIcon className={iconClass} />
+                        )}
+                        {key}
+                      </div>
+                    ))}
+                  </>
+                )}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </motion.div>
       )}
-    </div>
+    </AnimatePresence>
   );
 }

frontend/src/features/drawer/components/base.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { XIcon } from "lucide-react";
 import { Drawer } from "vaul";
@@ -35,11 +35,21 @@ export default function BaseDrawer({
 
   const contentRef = useRef<HTMLDivElement>(null);
   const wasDraggingRef = useRef(false);
+  const animatingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
 
   useVaulStickyFooter(contentRef, isDragging || isAnimating);
 
+  // Animating timeout cleanup
+  useEffect(() => {
+    return () => {
+      if (animatingTimeoutRef.current) {
+        clearTimeout(animatingTimeoutRef.current);
+      }
+    };
+  }, []);
+
   /**
    * CONDITIONAL PROPS BASED ON VARIANT
    *
@@ -188,9 +198,17 @@ export default function BaseDrawer({
                 onClick={() => {
                   if (wasDraggingRef.current) return;
                   if (isPill) {
+                    if (animatingTimeoutRef.current) {
+                      clearTimeout(animatingTimeoutRef.current);
+                    }
+
                     setIsAnimating(true);
                     setSnap(snapPoints?.[1] ?? null);
-                    setIsAnimating(false);
+                    // Let the footer observer update before setting isAnimating to false
+                    animatingTimeoutRef.current = setTimeout(() => {
+                      setIsAnimating(false);
+                      animatingTimeoutRef.current = null;
+                    }, 0);
                   }
                 }}
                 className={cn(

frontend/src/features/event/editor/constants.ts

@@ -0,0 +1,4 @@
+const MAX_DAYS = 64;
+export const MAX_DURATION_MS = MAX_DAYS * 24 * 60 * 60 * 1000;
+export const MAX_DURATION = `${MAX_DAYS} days`;
+export const MAX_TITLE_LENGTH = 50;

frontend/src/features/event/editor/validate-data.ts

@@ -1,14 +1,12 @@
 import { EventInformation, WeekdayRange } from "@/core/event/types";
 import { findRangeFromWeekdayArray } from "@/core/event/weekday-utils";
+import {
+  MAX_DURATION_MS,
+  MAX_TITLE_LENGTH,
+} from "@/features/event/editor/constants";
 import { EventEditorType } from "@/features/event/editor/types";
 import { MESSAGES } from "@/lib/messages";
 
-const MAX_DAYS = 64;
-export const MAX_DURATION_MS = MAX_DAYS * 24 * 60 * 60 * 1000;
-export const MAX_DURATION = `${MAX_DAYS} days`;
-
-export const MAX_TITLE_LENGTH = 50;
-
 export async function validateEventData(
   editorType: EventEditorType,
   data: EventInformation,

frontend/src/features/system-feedback/dialog/components/confirmation.tsx

@@ -4,6 +4,7 @@ import ActionButton from "@/features/button/components/action";
 import BaseModal from "@/features/system-feedback/dialog/components/base";
 import { DIALOG_CONFIG } from "@/features/system-feedback/dialog/config";
 import { ConfirmationDialogProps } from "@/features/system-feedback/dialog/props";
+import useCheckMobile from "@/lib/hooks/use-check-mobile";
 import { cn } from "@/lib/utils/classname";
 
 export default function ConfirmationDialog({
@@ -26,6 +27,11 @@ export default function ConfirmationDialog({
   const isControlled = controlledOpen !== undefined;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
 
+  const isMobile = useCheckMobile();
+  if (isMobile && !asNestedDrawer) {
+    asNestedDrawer = true;
+  }
+
   const handleOpenChange = useCallback(
     (newOpen: boolean) => {
       if (!isControlled) {

frontend/src/features/system-feedback/toast/base.tsx

@@ -107,7 +107,8 @@ export default function BaseToast({
             }
           }}
           className={cn(
-            "z-10 col-start-3 row-span-2 flex h-6 w-6 items-center justify-center rounded-full",
+            "z-10 col-start-3 row-span-2 flex h-6 w-6",
+            "cursor-pointer items-center justify-center rounded-full",
             "hover:bg-black/20 focus:outline-none focus:ring-2 focus:ring-white/50",
             !isPersistent &&
               "opacity-0 focus-visible:opacity-100 group-hover:opacity-100",

frontend/src/features/version-history/data.ts

@@ -183,6 +183,17 @@ export function getVersionHistoryData(): VersionHistoryData {
             "Removed default dates and times from the new event page",
           ],
         },
+        {
+          version: "v0.4.5",
+          releaseDate: { year: 2026, month: 5, day: 29 },
+          changes: [
+            "Added animations to the password strength criteria",
+            "Updated confirmation dialogs to display as drawers on mobile",
+            "Updated loading page skeletons to be consistent with new page layouts",
+            "Updated the authentication code checking rate limit to prevent lockouts",
+            "Fixed an issue where the mobile results page drawer would not display the footer when opened",
+          ],
+        },
       ],
     },
   ];

frontend/src/global.d.ts

@@ -0,0 +1,2 @@
+// Silences an error when importing globals.css in layout.tsx
+declare module "*.css";

frontend/src/lib/messages.ts

@@ -2,7 +2,7 @@ import { MAX_DEFAULT_NAME_LENGTH } from "@/features/account/constants";
 import {
   MAX_DURATION,
   MAX_TITLE_LENGTH,
-} from "@/features/event/editor/validate-data";
+} from "@/features/event/editor/constants";
 
 export const MESSAGES = {
   // generic errors