GH-3652 Add forgot password on sign-in page (#3789)

* Remove auth guard from password reset email endpoint

* Add arg for GQL mutation and update its usage

* Add forgot password button on sign-in page

* Generate automated graphql queries

* Move utils to dedicated hook

* Remove useless hook function

* Split simple hook methods

* Split workspace hook

* Split signInWithGoogle hook

* Split useSignInUpForm

* Fix error in logs

* Add Link Button UI Component

* Add storybook doc

---------

Co-authored-by: martmull <martmull@hotmail.fr>
This commit is contained in:
Deepak Kumar
2024-02-09 22:07:44 +05:30
committed by GitHub
parent 917fc5bd4d
commit 3cbf958a1c
16 changed files with 399 additions and 116 deletions

View File

@ -0,0 +1,31 @@
import React from 'react';
import styled from '@emotion/styled';
const StyledButtonLink = styled.a`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${({ theme }) => theme.spacing(1)};
padding: 0 ${({ theme }) => theme.spacing(1)};
text-decoration: none;
:hover {
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
}
`;
export const ActionLink = (props: React.ComponentProps<'a'>) => {
return (
<StyledButtonLink
href={props.href}
onClick={props.onClick}
target={props.target}
rel={props.rel}
>
{props.children}
</StyledButtonLink>
);
};

View File

@ -1,33 +1,18 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconBrandGithub } from '@/ui/display/icon';
import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
import packageJson from '../../../../../../package.json';
import { githubLink } from '../constants';
const StyledVersionLink = styled.a`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${({ theme }) => theme.spacing(1)};
padding: 0 ${({ theme }) => theme.spacing(1)};
text-decoration: none;
:hover {
color: ${({ theme }) => theme.font.color.tertiary};
}
`;
export const GithubVersionLink = () => {
const theme = useTheme();
return (
<StyledVersionLink href={githubLink} target="_blank" rel="noreferrer">
<ActionLink href={githubLink} target="_blank" rel="noreferrer">
<IconBrandGithub size={theme.icon.size.md} />
{packageJson.version}
</StyledVersionLink>
</ActionLink>
);
};

View File

@ -0,0 +1,27 @@
import { Meta, StoryObj } from '@storybook/react';
import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator.tsx';
const meta: Meta<typeof ActionLink> = {
title: 'UI/navigation/link/ActionLink',
component: ActionLink,
};
export default meta;
type Story = StoryObj<typeof ActionLink>;
export const Default: Story = {
args: {
children: 'Need to reset your password?',
onClick: () => alert('Action link clicked'),
target: undefined,
rel: undefined,
},
argTypes: {
href: { control: false },
target: { type: 'string' },
rel: { type: 'string' },
},
decorators: [ComponentDecorator],
};