Develop

.prettierignore

@@ -2,4 +2,6 @@ node_modules
 dist
 build
 .next
-*.min.js
+*.min.js
+# copied verbatim from Career-Server/spec/spec.json
+lib/api/generated/spec.json

app/globals.css

@@ -9,9 +9,34 @@
 @source "../node_modules/@betterinternship/components/dist/**/*.js";
 
 @theme {
+  --color-landing-navy: #101044;
+  --color-landing-blue: #0064ed;
+  --color-landing-muted: #5d719b;
+  --color-landing-border: #e1e7ef;
+  --color-landing-tint: #f0f6ff;
+  --color-landing-control: #d9e2ef;
+  --color-landing-control-hover: #c4cfdf;
+  --color-landing-border-hover: #cfd5df;
+  --color-landing-blue-hover: #0053c7;
+  --color-landing-nav: #374151;
+  --color-landing-nav-hover: #111827;
+  --color-landing-community: #0060e5;
+  --color-landing-footer: #fbfdff;
+  --color-landing-social: #66758c;
+  --color-landing-tag: #f1f4f8;
+  --color-landing-secondary: #c39035;
+  --color-landing-secondary-deep: #80571d;
+  --color-landing-secondary-tint: #fcf6e8;
+  --color-landing-secondary-border: #dfc58d;
+  --shadow-landing-card: 0 8px 24px rgb(15 23 42 / 5%);
+  --shadow-landing-interactive: 0 10px 28px rgb(31 45 68 / 8%);
+  --ease-landing-out: cubic-bezier(0.23, 1, 0.32, 1);
+
   --animate-marquee-horizontal: marquee-x var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-y var(--duration) linear infinite;
   --animate-fade-in: fade-in 0.5s ease-out;
+  --animate-landing-introduce: landing-introduce 360ms var(--ease-landing-out)
+    both;
   --animate-slide-up: slide-up 0.4s ease-out;
   --animate-scale-in: scale-in 0.3s ease-out;
   --animate-jitter: jitter 1.5s ease-in-out infinite;
@@ -91,6 +116,16 @@
       transform: translateY(0);
     }
   }
+  @keyframes landing-introduce {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
   @keyframes slide-up {
     0% {
       opacity: 0;

app/hire/auth/secure-access/[employerUserId]/[hash]/route.ts

@@ -2,22 +2,21 @@
  * Forwards minted employer magic links to the API endpoint that consumes the
  * keyring and sets the employer auth cookies.
  */
+import { API_ORIGIN } from "@/lib/api/api-origin";
+import { secureAccessUrl } from "@/lib/api/urls";
+
 export async function GET(
   request: Request,
   {
     params,
   }: { params: Promise<{ employerUserId: string; hash: string }> },
 ) {
   const { employerUserId, hash } = await params;
-  const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL?.replace(/\/+$/, '');
-
-  if (!apiBaseUrl) {
+  if (!API_ORIGIN) {
     return Response.redirect(new URL('/login', request.url), 307);
   }
 
-  const apiUrl = new URL(
-    `${apiBaseUrl}/auth/secure-access/${encodeURIComponent(employerUserId)}/${encodeURIComponent(hash)}`,
-  );
+  const apiUrl = new URL(secureAccessUrl(employerUserId, hash));
   apiUrl.search = new URL(request.url).search;
 
   return Response.redirect(apiUrl, 307);

app/hire/l/[slug]/route.ts

@@ -2,6 +2,8 @@
  * Resolves employer-portal short links using the shared links API.
  * Unknown slugs and API failures return the visitor to the employer home page.
  */
+import { LinkService } from "@/lib/api/services";
+
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ slug: string }> },
@@ -10,11 +12,7 @@ export async function GET(
   const origin = new URL(request.url).origin;
 
   try {
-    const res = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/links/${slug}`,
-      { cache: "no-store" },
-    );
-    const data = (await res.json()) as { url?: string | null };
+    const data = await LinkService.resolve(slug, { cache: "no-store" });
     return Response.redirect(data?.url ?? origin, 307);
   } catch {
     return Response.redirect(origin, 307);

app/hire/register/page.tsx

@@ -1,12 +1,22 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDbRefs } from "@/lib/db/use-refs";
 import { useAuthContext } from "../authctx";
 import { useRouter } from "next/navigation";
 import { isValidRequiredURL, toURL } from "@/lib/utils/url-utils";
+import {
+  LOGO_REQUIREMENTS,
+  readLogoFile,
+  storePendingLogo,
+} from "@/lib/utils/registration-logo";
 import { Employer } from "@/lib/db/db.types";
-import { createEditForm, FormCheckbox, FormInput } from "@/components/EditForm";
+import {
+  createEditForm,
+  FormCheckbox,
+  FormInput,
+  LabelWithTooltip,
+} from "@/components/EditForm";
 import { ErrorLabel } from "@/components/ui/labels";
 import { Button } from "@betterinternship/components";
 import { isValidPHNumber } from "@/lib/utils";
@@ -74,9 +84,34 @@ const EmployerEditor = () => {
     {} as AdditionalFields,
   );
   const [missingFields, setMissingFields] = useState<string[]>([]);
+  const [logoDataUrl, setLogoDataUrl] = useState<string | null>(null);
+  const [logoError, setLogoError] = useState<string | null>(null);
+  const logoInputRef = useRef<HTMLInputElement>(null);
 
   const blurTransition = useBlurTransition();
 
+  const handleLogoChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    // Reset so picking the same file again after removing it still fires.
+    event.target.value = "";
+    if (!file) return;
+
+    const result = await readLogoFile(file);
+    if ("error" in result) {
+      setLogoError(result.error);
+      return;
+    }
+    setLogoError(null);
+    setLogoDataUrl(result.dataUrl);
+  };
+
+  const removeLogo = () => {
+    setLogoDataUrl(null);
+    setLogoError(null);
+  };
+
   const continueRegistration = () => {
     // Validate required fields before submitting
     const newMissing: string[] = [];
@@ -123,6 +158,9 @@ const EmployerEditor = () => {
       contact_name: additionalFields.contact_name,
     };
     setIsContinuing(true);
+    // The account doesn't exist yet, so the verify step uploads this once the
+    // email is confirmed. Clears any logo left over from an earlier attempt.
+    storePendingLogo(logoDataUrl);
     sessionStorage.removeItem("hire-registration-email");
     sessionStorage.setItem(
       "hire-registration-profile",
@@ -273,6 +311,52 @@ const EmployerEditor = () => {
                     : "",
                 )}
               />
+              <div>
+                <LabelWithTooltip
+                  label="Company Logo (optional)"
+                  required={false}
+                />
+                <div className="flex items-center gap-4">
+                  <img
+                    src={logoDataUrl ?? "/hire/images/default-pfp.jpg"}
+                    alt="Company logo preview"
+                    className="h-16 w-16 shrink-0 rounded-full border border-gray-300 object-cover"
+                  />
+                  <div className="flex flex-col items-start gap-1">
+                    <div className="flex gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => logoInputRef.current?.click()}
+                      >
+                        {logoDataUrl ? "Change" : "Upload image"}
+                      </Button>
+                      {logoDataUrl && (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={removeLogo}
+                        >
+                          Remove
+                        </Button>
+                      )}
+                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {LOGO_REQUIREMENTS}
+                    </span>
+                  </div>
+                  <input
+                    type="file"
+                    ref={logoInputRef}
+                    onChange={(event) => void handleLogoChange(event)}
+                    accept="image/jpeg,image/png,image/webp"
+                    className="hidden"
+                  />
+                </div>
+                <ErrorLabel value={logoError} />
+              </div>
             </div>
             <div className="flex items-start gap-3 mb-8">
               <FormCheckbox

app/hire/register/verify/page.tsx

@@ -9,7 +9,14 @@ import { HireOtpInput } from "@/components/features/hire/hire-otp-input";
 import { Loader } from "@/components/ui/loader";
 import { useOtpVerification } from "@/hooks/use-otp-verification";
 import { EmployerAuthService } from "@/lib/api/hire.api";
+import { EmployerService } from "@/lib/api/services";
+import { PFP_UPDATED_EVENT } from "@/hooks/use-pfp";
+import { FileUploadFormBuilder } from "@/lib/multipart-form";
 import { isValidEmail } from "@/lib/utils";
+import {
+  storePendingLogo,
+  takePendingLogo,
+} from "@/lib/utils/registration-logo";
 import { useAuthContext } from "../../authctx";
 import { HireAuthShell } from "@/components/features/hire/hire-auth-shell";
 
@@ -48,9 +55,26 @@ export default function VerifyHireRegistrationPage() {
     }
   }, []);
 
+  // The logo picked on the register page. It can only be uploaded now, once
+  // the activated session cookie exists; failing here must never block
+  // sign-in, since it can be set again from the account page.
+  const uploadPendingLogo = async () => {
+    const logo = takePendingLogo();
+    if (!logo) return;
+
+    try {
+      const form = FileUploadFormBuilder.new("logo").file(logo).build();
+      const result = await EmployerService.updateMyPfp(form);
+      if (result.success) window.dispatchEvent(new Event(PFP_UPDATED_EVENT));
+    } catch {
+      // Intentionally ignored, see above.
+    }
+  };
+
   const completeActivation = async () => {
     sessionStorage.removeItem("hire-registration-email");
     sessionStorage.removeItem(OTP_SENT_AT_KEY);
+    await uploadPendingLogo();
     await refreshAuthentication();
     router.replace("/dashboard");
   };
@@ -123,6 +147,8 @@ export default function VerifyHireRegistrationPage() {
         const response = await register(formData);
         if (!response.success) {
           if (response.account_exists) {
+            // Don't let this logo get applied to whichever account logs in next.
+            storePendingLogo(null);
             router.push(`/login?email=${encodeURIComponent(normalizedEmail)}`);
             return;
           }

app/student/applications/page.tsx

@@ -54,6 +54,7 @@ import {
   SavedJobCard,
   SavedJobItem,
 } from "@/components/features/student/job/saved-job-card";
+import { fileUrls } from "@/lib/api/urls";
 
 type TabValue = "applications" | "saved" | "alerts";
 
@@ -97,7 +98,8 @@ function MyJobsPageInner() {
 
   const { url: resumeURL, sync: syncResumeURL } = useFile({
     fetcher: (resumeId: string) => UserService.getMyResumeURL(resumeId),
-    route: (resumeId: string) => `/users/me/resume/${resumeId}`,
+    route: (hash: string, resumeId: string) =>
+      fileUrls.myResume(hash, resumeId),
   });
   const { open: openResumeModal, Modal: ResumeModal } = useModal(
     "application-resume-modal",

app/student/forms/components/FormSigningLayout.tsx

@@ -463,8 +463,9 @@ export function FormSigningLayout({
     () =>
       getRecipientEmailErrors(recipientEmails, {
         studentEmail: profile.data?.email,
+        recipients: noEsign ? undefined : recipients,
       }),
-    [recipientEmails, profile.data?.email],
+    [recipientEmails, profile.data?.email, recipients, noEsign],
   );
 
   const nextEnabled = useMemo(() => {
@@ -595,6 +596,16 @@ export function FormSigningLayout({
 
   const handleSubmit = useCallback(async () => {
     setNextLoading(true);
+    if (Object.keys(recipientEmailErrors).length) {
+      recipientErrorActions.overwrite(recipientEmailErrors);
+      toast.error(
+        "Some recipient information is missing or incorrect",
+        toastPresets.destructive,
+      );
+      if (!noRecipientStep) goToStep("timeline");
+      setNextLoading(false);
+      return;
+    }
     const finalValuesFromFiller = formFiller.getFinalValues({
       ...autofillValues,
       ...recipientEmails,
@@ -605,7 +616,10 @@ export function FormSigningLayout({
           ...latestValuesRef.current,
         }
       : finalValuesFromFiller;
-    const submittedValues = await withSubmittedSignatureImages(finalValues);
+    const submittedValues = await withSubmittedSignatureImages({
+      ...finalValues,
+      ...recipientEmails,
+    });
     const firstRecipient = getFirstRecipient();
     const shouldGenerateForm = !!noEsign || !firstRecipient;
 
@@ -685,6 +699,11 @@ export function FormSigningLayout({
     onBack,
     recipientEmails,
     trackFilloutJob,
+    recipientEmailErrors,
+    recipientErrorActions,
+    noRecipientStep,
+    goToStep,
+    formFiller,
   ]);
 
   // Clean up when switching form