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:
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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],
|
||||
};
|
||||
Reference in New Issue
Block a user