feat: update signin, signup, otp and new password pages

apps/gitness/src/App.tsx

@@ -6,7 +6,12 @@ import { NuqsAdapter } from 'nuqs/adapters/react-router'
 
 import { TooltipProvider } from '@harnessio/canary'
 import { CodeServiceAPIClient } from '@harnessio/code-service-client'
-import { EmptyPage } from '@harnessio/ui/views'
+import {
+  EmptyPage,
+  ForgotPasswordPage as ForgotPasswordPageV2,
+  NewPasswordPage as NewPasswordPageV2,
+  OTPPage as OTPPageV2
+} from '@harnessio/ui/views'
 import {
   ForgotPasswordPage,
   NewPasswordPage,
@@ -36,6 +41,8 @@ import RepoLayout from './pages-v2/repo/repo-layout'
 import ReposListPage from './pages-v2/repo/repo-list'
 import { RepoSidebar } from './pages-v2/repo/repo-sidebar'
 import RepoSummaryPage from './pages-v2/repo/repo-summary'
+import { SignIn as SignInV2 } from './pages-v2/signin'
+import { SignUp as SignUpV2 } from './pages-v2/signup'
 import WebhookListPage from './pages-v2/webhooks/webhook-list'
 import CreateProject from './pages/create-project'
 import { Execution } from './pages/execution/execution-details'
@@ -92,25 +99,45 @@ export default function App() {
 
   const router = createBrowserRouter([
     {
-      path: '/signin',
+      path: '/v1/signin',
       element: <SignIn />
     },
     {
-      path: '/signup',
+      path: '/v1/signup',
       element: <SignUp />
     },
     {
-      path: '/forgot',
+      path: '/v1/forgot',
       element: <ForgotPasswordPage />
     },
     {
-      path: '/otp',
+      path: '/v1/otp',
       element: <OTPPage />
     },
     {
-      path: '/new-password',
+      path: '/v1/new-password',
       element: <NewPasswordPage />
     },
+    {
+      path: '/signin',
+      element: <SignInV2 />
+    },
+    {
+      path: '/signup',
+      element: <SignUpV2 />
+    },
+    {
+      path: '/forgot',
+      element: <ForgotPasswordPageV2 />
+    },
+    {
+      path: '/otp',
+      element: <OTPPageV2 />
+    },
+    {
+      path: '/new-password',
+      element: <NewPasswordPageV2 />
+    },
     {
       path: '/',
       element: <RootWrapper />,

apps/gitness/src/pages-v2/signin.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { getUser, useOnLoginMutation } from '@harnessio/code-service-client'
+import { SignInData, SignInPage } from '@harnessio/ui/views'
+
+import { useAppContext } from '../framework/context/AppContext'
+
+export const SignIn: FC = () => {
+  const navigate = useNavigate()
+  const { setCurrentUser } = useAppContext()
+  const {
+    mutate: login,
+    isLoading,
+    error
+  } = useOnLoginMutation(
+    { queryParams: { include_cookie: true } },
+    {
+      onSuccess: () => {
+        getUser({})
+          .then(response => {
+            setCurrentUser(response.body)
+          })
+          .catch(_e => {
+            // Ignore/toast error
+          })
+        navigate('/') // Redirect to Home page
+      }
+    }
+  )
+
+  return (
+    <SignInPage
+      isLoading={isLoading}
+      handleSignIn={(data: SignInData) => {
+        login({
+          body: {
+            login_identifier: data.email,
+            password: data.password
+          }
+        })
+      }}
+      error={error?.message}
+    />
+  )
+}

apps/gitness/src/pages-v2/signup.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { useOnRegisterMutation } from '@harnessio/code-service-client'
+import { SignUpData, SignUpPage } from '@harnessio/ui/views'
+
+export const SignUp: React.FC = () => {
+  const navigate = useNavigate()
+
+  const {
+    mutate: register,
+    isLoading,
+    isSuccess,
+    error
+  } = useOnRegisterMutation({ queryParams: { include_cookie: true } })
+
+  useEffect(() => {
+    if (isSuccess) {
+      navigate('/') // Redirect to Home page
+    }
+  }, [isSuccess])
+
+  const handleSignUp = (data: SignUpData) => {
+    register({
+      body: {
+        email: data.email,
+        password: data.password,
+        uid: data.userId,
+        display_name: data.userId
+      }
+    })
+  }
+
+  return <SignUpPage isLoading={isLoading} handleSignUp={handleSignUp} error={error?.message} />
+}

packages/canary/src/index.ts

@@ -7,7 +7,6 @@ export * from './components/breadcrumb'
 export * from './components/button'
 export * from './components/split-button'
 export * from './components/calendar'
-export * from './components/card'
 export * from './components/carousel'
 export * from './components/checkbox'
 export * from './components/collapsible'
@@ -18,7 +17,6 @@ export * from './components/drawer'
 export * from './components/dropdown-menu'
 export * from './components/form'
 export * from './components/hover-card'
-export * from './components/input-otp'
 export * from './components/input'
 export * from './components/label'
 export * from './components/menubar'

packages/ui/src/components/badge.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 
+import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from '../utils/cn'
-
 enum BadgesHoverStates {
   ENABLED = 'enabled',
   DISABLED_DEFAULT = 'disabled-default',
@@ -18,24 +17,24 @@ enum BadgesHoverStates {
 }
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'focus:ring-ring inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
         outline: 'text-foreground'
       },
       size: {
         default: 'px-2.5 py-0.5 text-xs font-semibold',
         lg: 'px-3 py-1 text-xs font-normal',
-        sm: 'h-5 px-1 text-12 leading-none',
-        xs: 'px-1.5 py-0 text-11 font-light',
+        sm: 'text-12 h-5 px-1 leading-none',
+        xs: 'text-11 px-1.5 py-0 font-light',
         // TODO: Consider switching size variants to numeric values
         // Numeric size variants (like '18') provide clearer context about actual dimensions
         // compared to abstract sizes (xs, sm, lg).
-        '18': 'h-[18px] px-2 text-12'
+        '18': 'text-12 h-[18px] px-2'
       },
       borderRadius: {
         default: '',

packages/ui/src/components/button.tsx

@@ -10,11 +10,11 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-borders-2 bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+        outline: 'border-borders-2 bg-transparent hover:bg-accent hover:text-accent-foreground border shadow-sm',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',
@@ -26,14 +26,15 @@ const buttonVariants = cva(
         default: 'h-8 px-6 py-2',
         sm: 'h-7 px-3 py-0 text-sm font-normal',
         xs: 'h-auto px-1.5 py-0.5 text-xs font-normal',
+        md: 'h-9 px-7',
         lg: 'h-10 px-8',
         icon: 'size-8',
         sm_icon: 'size-7',
         xs_split: 'h-auto p-0 text-xs font-medium'
       },
       borderRadius: {
         default: '',
-        full: 'rounded-full',
+        full: 'rounded-full focus-visible:rounded-full',
         none: 'rounded-none'
       },
       theme: {