Skip to content

feat: login page update #2107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shnai0 wants to merge 1 commit into
base: main
Choose a base branch
from
+412 −666
Open

feat: login page update #2107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 66 additions & 64 deletions app/(auth)/login/page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,20 +54,46 @@ export default function Login() {
return (
<div className="flex h-screen w-full flex-wrap">
{/* Left part */}
<div className="flex w-full justify-center bg-gray-50 md:w-1/2 lg:w-1/2">
<div className="flex w-full justify-center bg-gray-50 md:w-[55%] lg:w-[55%]">
<div
className="absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
aria-hidden="true"
></div>
<div className="z-10 mx-5 mt-[calc(1vh)] h-fit w-full max-w-md overflow-hidden rounded-lg sm:mx-0 sm:mt-[calc(2vh)] md:mt-[calc(3vh)]">
<div className="items-left flex flex-col space-y-3 px-4 py-6 pt-8 sm:px-12">
<div className="z-10 mx-5 mt-0 h-fit w-full max-w-md overflow-hidden rounded-lg sm:mx-0 sm:mt-[calc(0.5vh)] md:mt-[calc(1vh)]">
<div className="items-left flex flex-col space-y-3 px-4 py-6 pt-5 sm:px-12 sm:pt-6">
<Link href="https://www.papermark.com" target="_blank">
<img
src="/_static/papermark-logo.svg"
alt="Papermark Logo"
className="md:mb-48s -mt-8 mb-36 h-7 w-auto self-start sm:mb-32"
className="mb-24 h-7 w-auto self-start sm:mb-20"
/>
Comment on lines +63 to 69
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Harden the external logo link the same way as the legal links.

This target="_blank" navigation is still missing rel="noopener noreferrer", so it is the one opener-enabled external link left on the page.

Suggested fix 
-            <Link href="https://www.papermark.com" target="_blank">
+            <Link
+              href="https://www.papermark.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="items-left flex flex-col space-y-3 px-4 py-6 pt-5 sm:px-12 sm:pt-6">
<Link href="https://www.papermark.com" target="_blank">
<img
src="/_static/papermark-logo.svg"
alt="Papermark Logo"
className="md:mb-48s -mt-8 mb-36 h-7 w-auto self-start sm:mb-32"
className="mb-24 h-7 w-auto self-start sm:mb-20"
/>
<div className="items-left flex flex-col space-y-3 px-4 py-6 pt-5 sm:px-12 sm:pt-6">
<Link
href="https://www.papermark.com"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/_static/papermark-logo.svg"
alt="Papermark Logo"
className="mb-24 h-7 w-auto self-start sm:mb-20"
/>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(auth)/login/page-client.tsx around lines 63 - 69, The external Link
around the Papermark logo uses target="_blank" but lacks rel="noopener
noreferrer"; update the Link element in app/(auth)/login/page-client.tsx (the
Link wrapping the <img> with src="/_static/papermark-logo.svg") to include
rel="noopener noreferrer" so the opener is disabled for that external link while
keeping target="_blank".

</Link>
<div className="flex items-center gap-4 pb-1">
<img
src="/_static/security-icons/soc2-dark-new3.png?v=2"
alt="SOC2 Compliant"
className="h-14 w-auto object-contain opacity-80"
/>
<img
src="/_static/security-icons/GDPR.svg"
alt="GDPR Compliant"
className="h-10 w-auto object-contain opacity-80"
/>
<img
src="/_static/security-icons/HIPAA.svg"
alt="HIPAA Compliant"
className="h-10 w-auto object-contain opacity-80"
/>
<img
src="/_static/security-icons/CCPA.svg"
alt="CCPA Compliant"
className="h-10 w-auto object-contain opacity-80"
/>
</div>
<p className="flex items-center gap-1.5 text-xs text-gray-600">
<span className="text-orange-400">★★★★★</span>
<span>trusted by 55,000+ companies to secure deals</span>
</p>
<Link href="/">
<span className="text-balance text-3xl font-semibold text-gray-900">
Welcome to Papermark
Expand All @@ -92,7 +118,7 @@ export default function Login() {
</div>
)}
<form
className="flex flex-col gap-4 px-4 pt-8 sm:px-12"
className="flex flex-col gap-4 px-4 pt-4 sm:px-12"
onSubmit={(e) => {
e.preventDefault();
if (!emailValidation.success) {
Expand Down Expand Up @@ -153,10 +179,8 @@ export default function Login() {
loading={clickedMethod === "email"}
disabled={!emailValidation.success || !!clickedMethod}
className={cn(
"focus:shadow-outline w-full transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none",
clickedMethod === "email"
? "bg-black"
: "bg-gray-800 hover:bg-gray-900",
"focus:shadow-outline w-full transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none disabled:opacity-100",
"bg-black hover:bg-gray-900",
)}
Comment on lines 181 to 184
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Keep a visible disabled state on the primary email CTA.

disabled:opacity-100 makes the button look active even when the email is invalid or another auth flow is running.

Suggested fix 
-                  "focus:shadow-outline w-full transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none disabled:opacity-100",
+                  "focus:shadow-outline w-full transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className={cn(
"focus:shadow-outline w-full transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none",
clickedMethod === "email"
? "bg-black"
: "bg-gray-800 hover:bg-gray-900",
"focus:shadow-outline w-full transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none disabled:opacity-100",
"bg-black hover:bg-gray-900",
)}
className={cn(
"focus:shadow-outline w-full transform rounded px-4 py-2 text-white transition-colors duration-300 ease-in-out focus:outline-none",
"bg-black hover:bg-gray-900",
)}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(auth)/login/page-client.tsx around lines 181 - 184, The primary email
CTA uses a className built via cn that includes "disabled:opacity-100", which
makes disabled buttons look active; update the class list in the button's
className (where cn(...) is used in page-client.tsx) to show a visible disabled
state—replace "disabled:opacity-100" with a lower opacity like
"disabled:opacity-50" and add "disabled:cursor-not-allowed" (and optionally
"disabled:pointer-events-none") so the button appears and behaves disabled when
the email is invalid or another auth flow is running.

>
{emailButtonText}
Expand Down Expand Up @@ -236,19 +260,20 @@ export default function Login() {
</div>
</div>
<p className="mt-10 w-full max-w-md px-4 text-xs text-muted-foreground sm:px-12">
By clicking continue, you acknowledge that you have read and agree
to Papermark&apos;s{" "}
By continuing, you agree to Papermark&apos;s{" "}
<a
href={`${process.env.NEXT_PUBLIC_MARKETING_URL}/terms`}
href={`${process.env.NEXT_PUBLIC_MARKETING_URL || "https://www.papermark.com"}/terms`}
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Terms of Service
</a>{" "}
and{" "}
<a
href={`${process.env.NEXT_PUBLIC_MARKETING_URL}/privacy`}
href={`${process.env.NEXT_PUBLIC_MARKETING_URL || "https://www.papermark.com"}/privacy`}
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Privacy Policy
Expand All @@ -257,60 +282,37 @@ export default function Login() {
</p>
</div>
</div>
<div className="relative hidden w-full justify-center overflow-hidden bg-black md:flex md:w-1/2 lg:w-1/2">
<div className="relative m-0 flex h-full min-h-[700px] w-full p-0">
<div
className="relative flex h-full w-full flex-col justify-between"
id="features"
>
{/* Testimonial top 2/3 */}
<div
className="flex w-full flex-col items-center justify-center"
style={{ height: "66.6666%" }}
>
{/* Image container */}
<div className="mb-4 h-64 w-80">
<img
className="h-full w-full rounded-2xl object-cover shadow-2xl"
src="/_static/testimonials/backtrace.jpeg"
alt="Backtrace Capital"
/>
</div>
{/* Text content */}
<div className="max-w-xl text-center">
<blockquote className="text-balance font-normal leading-8 text-white sm:text-xl sm:leading-9">
<p>
&quot;We raised our €30M Fund with Papermark Data Rooms.
Love the customization, security and ease of use.&quot;
</p>
</blockquote>
<figcaption className="mt-4">
<div className="text-balance font-normal text-white">
Michael Münnix
</div>
<div className="text-balance font-light text-gray-400">
Partner, Backtrace Capital
</div>
</figcaption>
</div>
<div className="relative hidden w-full justify-center overflow-hidden bg-white md:flex md:w-[45%] lg:w-[45%]">
<div className="flex h-full w-full flex-col items-center justify-center px-4 py-10">
<div className="flex w-full max-w-xl flex-col items-center">
<div className="mb-5 w-full max-w-md">
<img
className="h-auto w-full rounded-2xl object-cover shadow-lg"
src="/_static/testimonials/backtrace.jpeg"
alt="Backtrace Capital"
/>
</div>
{/* White block with logos bottom 1/3, full width/height */}
<div
className="absolute bottom-0 left-0 flex w-full flex-col items-center justify-center bg-white"
style={{ height: "33.3333%" }}
>
<div className="mb-4 max-w-xl text-balance text-center font-semibold text-gray-900">
Trusted by teams at
</div>
<LogoCloud />
{/* <img
src="https://assets.papermark.io/upload/file_7JEGY7zM9ZTfmxu8pe7vWj-Screenshot-2025-05-09-at-18.09.13.png"
alt="Trusted teams illustration"
className="mt-4 max-w-full h-auto object-contain"
style={{maxHeight: '120px'}}
/> */}
<div className="w-full max-w-3xl text-center">
<blockquote className="font-semibold leading-8 text-gray-900 sm:text-xl sm:leading-9">
<p>
&quot;We raised €50M Fund with Papermark Data Rooms.
<br />
Secure, branded, and incredibly easy to use.&quot;
</p>
</blockquote>
<figcaption className="mt-4">
<div className="text-balance font-medium text-gray-900">
Michael Münnix
</div>
<div className="text-balance font-light text-gray-500">
Partner, Backtrace Capital
</div>
</figcaption>
</div>
</div>
<div className="mt-20 flex w-full max-w-md flex-col items-center">
<LogoCloud />
</div>
</div>
</div>
</div>
Expand Down
718 changes: 163 additions & 555 deletions components/shared/logo-cloud.tsx
View file
Open in desktop

Large diffs are not rendered by default.

Loading