forked from harness/canary
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update signin, signup, otp and new password pages
- Loading branch information
1 parent
edd3e52
commit d7c8025
Showing
22 changed files
with
11,352 additions
and
14,582 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { useNavigate } from 'react-router-dom' | ||
|
|
||
| import { getUser, useOnLoginMutation } from '@harnessio/code-service-client' | ||
| import { SignInDataProps, SignInPage } from '@harnessio/ui/views' | ||
|
|
||
| import { useAppContext } from '../framework/context/AppContext' | ||
|
|
||
| export const SignIn: React.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: SignInDataProps) => { | ||
| login({ | ||
| body: { | ||
| login_identifier: data.email, | ||
| password: data.password | ||
| } | ||
| }) | ||
| }} | ||
| error={error?.message} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useEffect } from 'react' | ||
| import { useNavigate } from 'react-router-dom' | ||
|
|
||
| import { useOnRegisterMutation } from '@harnessio/code-service-client' | ||
| import { SignUpDataProps, 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: SignUpDataProps) => { | ||
| register({ | ||
| body: { | ||
| email: data.email, | ||
| password: data.password, | ||
| uid: data.userId, | ||
| display_name: data.userId | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| return <SignUpPage isLoading={isLoading} handleSignUp={handleSignUp} error={error?.message} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import * as React from 'react' | ||
|
|
||
| import { cn } from '@utils/cn' | ||
| import { cva, type VariantProps } from 'class-variance-authority' | ||
|
|
||
| const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', { | ||
| variants: { | ||
| variant: { | ||
| default: '', | ||
| plain: 'border-none bg-transparent shadow-none' | ||
| } | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default' | ||
| } | ||
| }) | ||
|
|
||
| export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> { | ||
| width?: 'auto' | 'full' | 'screen' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string | ||
| } | ||
|
|
||
| const widthClasses = { | ||
| auto: 'w-auto', | ||
| full: 'w-full', | ||
| screen: 'w-screen', | ||
| fit: 'w-fit', | ||
| xs: 'w-24', | ||
| sm: 'w-48', | ||
| md: 'w-64', | ||
| lg: 'w-72', | ||
| xl: 'w-80', | ||
| '2xl': 'w-96' | ||
| } | ||
|
|
||
| const Card = React.forwardRef<HTMLDivElement, CardProps>(({ variant, className, width = 'auto', ...props }, ref) => { | ||
| const widthClass = widthClasses[width as keyof typeof widthClasses] || width | ||
|
|
||
| return <div ref={ref} className={cn(cardVariants({ variant }), widthClass, className)} {...props} /> | ||
| }) | ||
|
|
||
| Card.displayName = 'Card' | ||
|
|
||
| const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| ({ className = 'space-y-1.5 p-6', ...props }, ref) => ( | ||
| <div ref={ref} className={cn('flex flex-col', className)} {...props} /> | ||
| ) | ||
| ) | ||
| CardHeader.displayName = 'CardHeader' | ||
|
|
||
| interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> { | ||
| as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | ||
| } | ||
|
|
||
| const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>( | ||
| ({ className, children, as: Tag = 'h3', ...props }, ref) => ( | ||
| <Tag ref={ref} className={cn('font-medium leading-snug tracking-tight', className)} {...props}> | ||
| {children} | ||
| </Tag> | ||
| ) | ||
| ) | ||
| CardTitle.displayName = 'CardTitle' | ||
|
|
||
| const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>( | ||
| ({ className, ...props }, ref) => ( | ||
| <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} /> | ||
| ) | ||
| ) | ||
| CardDescription.displayName = 'CardDescription' | ||
|
|
||
| const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| ({ className = 'p-6', ...props }, ref) => <div ref={ref} className={cn('pt-0', className)} {...props} /> | ||
| ) | ||
| CardContent.displayName = 'CardContent' | ||
|
|
||
| const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| ({ className = 'p-6', ...props }, ref) => ( | ||
| <div ref={ref} className={cn('flex items-center pt-0', className)} {...props} /> | ||
| ) | ||
| ) | ||
| CardFooter.displayName = 'CardFooter' | ||
|
|
||
| export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import * as React from 'react' | ||
|
|
||
| import { DashIcon } from '@radix-ui/react-icons' | ||
| import { OTPInput, OTPInputContext } from 'input-otp' | ||
|
|
||
| import { cn } from '../utils/cn' | ||
|
|
||
| const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>( | ||
| ({ className, containerClassName, ...props }, ref) => ( | ||
| <OTPInput | ||
| ref={ref} | ||
| containerClassName={cn('flex items-center gap-3 has-[:disabled]:opacity-50', containerClassName)} | ||
| className={cn('disabled:cursor-not-allowed', className)} | ||
| {...props} | ||
| /> | ||
| ) | ||
| ) | ||
| InputOTP.displayName = 'InputOTP' | ||
|
|
||
| const InputOTPGroup = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>( | ||
| ({ className, ...props }, ref) => <div ref={ref} className={cn('flex items-center', className)} {...props} /> | ||
| ) | ||
| InputOTPGroup.displayName = 'InputOTPGroup' | ||
|
|
||
| interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<'div'> { | ||
| index: number | ||
| } | ||
|
|
||
| const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => { | ||
| const inputOTPContext = React.useContext(OTPInputContext) | ||
|
|
||
| if (!inputOTPContext?.slots?.[index]) { | ||
| console.error(`No slot data available for index ${index}`) | ||
| return null | ||
| } | ||
|
|
||
| const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] | ||
|
|
||
| return ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| 'relative flex items-center justify-center h-[52px] w-11 rounded border border-borders-1 p-2 text-xl transition-all', | ||
| isActive && 'border-borders-3 z-10', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {char} | ||
| {hasFakeCaret && ( | ||
| <div className="pointer-events-none absolute inset-0 flex items-center justify-center"> | ||
| <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| }) | ||
| InputOTPSlot.displayName = 'InputOTPSlot' | ||
|
|
||
| const InputOTPSeparator = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>( | ||
| ({ ...props }, ref) => ( | ||
| <div ref={ref} role="separator" {...props}> | ||
| <DashIcon /> | ||
| </div> | ||
| ) | ||
| ) | ||
| InputOTPSeparator.displayName = 'InputOTPSeparator' | ||
|
|
||
| export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.