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,
@@ -35,6 +40,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 CreateProject from './pages/create-project'
 import { Execution } from './pages/execution/execution-details'
 import RepoExecutionListPage from './pages/execution/repo-execution-list'
@@ -90,25 +97,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/playground/src/components/create-project-page.tsx

@@ -3,7 +3,18 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
 
 import { SandboxLayout } from '..'
 

packages/playground/src/components/forgot-password-page.tsx

@@ -4,9 +4,19 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean

packages/playground/src/components/new-password-page.tsx

@@ -4,9 +4,19 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean