mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-04-04 06:51:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve sign in / up UI

Browse Source
This commit is contained in:
MartinBraquet
2025-09-11 13:14:20 +02:00
parent 16625210fc
commit e264bb407b
5 changed files with 57 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/components/buttons/sign-up-button.tsx
View File

@@ -1,12 +1,15 @@
import clsx from 'clsx'
import { firebaseLogin } from 'web/lib/firebase/users'
import { Button } from './button'
import { Col } from '../layout/col'
import { Row } from 'web/components/layout/row'
import {firebaseLogin} from 'web/lib/firebase/users'
import {Button} from './button'
import {Col} from '../layout/col'
import {Row} from 'web/components/layout/row'
import {ButtonHTMLAttributes} from "react"
import {FcGoogle} from "react-icons/fc"
export const SidebarSignUpButton = (props: { className?: string }) => {
const { className } = props
const {className} = props
return (
<Col className={clsx('mt-4', className)}>
@@ -43,3 +46,29 @@ export const GoogleSignInButton = (props: { onClick: () => any }) => {
</Button>
)
}
type GoogleButtonProps = {
onClick: () => void
isLoading?: boolean
} & ButtonHTMLAttributes<HTMLButtonElement>
export function GoogleButton({onClick, isLoading = false, ...props}: GoogleButtonProps) {
return (
<button
type="button"
onClick={onClick}
disabled={isLoading}
className={clsx(
"w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300",
"rounded-full shadow-sm text-sm font-medium",
"hover:bg-canvas-25 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
"disabled:opacity-70 disabled:cursor-not-allowed"
)}
{...props}
>
<FcGoogle className="w-5 h-5"/>
{isLoading ? "Loading..." : "Google"}
</button>
)
}

2
web/pages/_document.tsx
View File

@@ -9,7 +9,7 @@ export default function Document() {
<link rel="icon" href={ENV_CONFIG.faviconPath} />
<Script src="/init-theme.js" strategy="beforeInteractive" />
</Head>
<body className="bg-canvas-0 text-ink-1000">
<body className="body-bg text-ink-1000">
<Main />
<NextScript />
</body>

25
web/pages/register.tsx
View File

@@ -14,6 +14,7 @@ import {getLoverRow} from "common/love/lover";
import {db} from "web/lib/supabase/db";
import Router from "next/router";
import {useUser} from "web/hooks/use-user";
import {GoogleButton} from "web/components/buttons/sign-up-button";
export default function RegisterPage() {
@@ -109,8 +110,8 @@ function RegisterComponent() {
return (
<LovePage trackPageView={'register'}>
<div className="flex items-center justify-center min-h-screen px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full">
<div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8">
{registrationSuccess ? (
<div className="text-center">
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
@@ -164,7 +165,7 @@ function RegisterComponent() {
<div className="flex justify-center mb-6">
<FavIcon className="dark:invert"/>
</div>
<h2 className="text-center text-3xl font-extrabold ">
<h2 className="mt-6 text-center text-3xl font-extrabold ">
Get Started
</h2>
</div>
@@ -215,7 +216,7 @@ function RegisterComponent() {
<div className="text-red-500 text-sm text-center">{error}</div>
)}
<div className="space-y-2">
<div className="space-y-4">
<button
type="submit"
disabled={isLoading}
@@ -229,22 +230,14 @@ function RegisterComponent() {
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-canvas-50 text-gray-500">Or sign up with</span>
<span className="px-2 body-bg text-gray-500">Or sign up with</span>
</div>
</div>
<button
type="button"
onClick={signupThenMaybeRedirectToSignup}
disabled={isLoading}
className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
>
<FcGoogle className="w-5 h-5"/>
Google
</button>
<GoogleButton onClick={signupThenMaybeRedirectToSignup} isLoading={isLoading} />
</div>
</form>
<div className="text-center text-sm mt-2 customlink">
<div className="my-8" />
<div className="text-center customlink">
<p className="">
Already have an account?{' '}
<Link href="/signin">

24
web/pages/signin.tsx
View File

@@ -3,7 +3,6 @@
import {useSearchParams} from "next/navigation";
import {Suspense, useEffect, useState} from "react";
import Link from "next/link";
import {FcGoogle} from "react-icons/fc";
import {auth, firebaseLogin} from "web/lib/firebase/users";
import FavIcon from "web/public/FavIcon";
@@ -13,6 +12,7 @@ import {db} from "web/lib/supabase/db";
import Router from "next/router";
import {LovePage} from "web/components/love-page";
import {useUser} from "web/hooks/use-user";
import {GoogleButton} from "web/components/buttons/sign-up-button";
export default function LoginPage() {
return (
@@ -171,25 +171,19 @@ function RegisterComponent() {
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-canvas-50 text-gray-500">Or continue with</span>
<span className="px-2 body-bg text-gray-500">Or continue with</span>
</div>
</div>
<button
type="button"
onClick={handleGoogleSignIn}
disabled={isLoading}
className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
>
<FcGoogle className="w-5 h-5"/>
Google
</button>
<GoogleButton onClick={handleGoogleSignIn} isLoading={isLoading}/>
</div>
</form>
<div className="text-center customlink">
<Link href="/register">
No account? Register.
</Link>
<p className="">
No account?{' '}
<Link href="/register">
Register
</Link>
</p>
</div>
</div>
</div>

4
web/styles/globals.css
View File

@@ -294,4 +294,8 @@ ul {
.sidebar-nav {
font-family: "Inter", sans-serif; /* clean and legible */
}
.body-bg {
background-color: rgb(var(--color-canvas-0));
}