Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update LoginPage to use ra Login component #84

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+96 −135
Open

Update LoginPage to use ra Login component #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"faker": "~5.4.0",
"ra-supabase": "^3.4.0",
"react": "^18.2.0",
"react-admin": "^5.5.3",
"react-admin": "^5.6.2",
"react-dom": "^18.2.0"
},
"devDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/ra-supabase-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"types": "esm/index.d.ts",
"sideEffects": false,
"peerDependencies": {
"ra-core": "^5.5.3"
"ra-core": "^5.6.2"
},
"dependencies": {
"@raphiniert/ra-data-postgrest": "^2.4.1",
Expand All @@ -26,7 +26,7 @@
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/react": "^15.0.7",
"@testing-library/user-event": "^14.5.2",
"ra-core": "^5.5.3",
"ra-core": "^5.6.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^6.28.1",
Expand Down
8 changes: 4 additions & 4 deletions packages/ra-supabase-ui-materialui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"@mui/icons-material": "^5.16.12",
"@mui/material": "^5.16.12",
"@supabase/supabase-js": "^2.48.1",
"ra-core": "^5.5.3",
"ra-ui-materialui": "^5.5.3",
"ra-core": "^5.6.2",
"ra-ui-materialui": "^5.6.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^6.23.1",
Expand All @@ -33,8 +33,8 @@
"@mui/icons-material": "^5.16.12 || ^6.0.0",
"@mui/material": "^5.16.12 || ^6.0.0",
"@supabase/supabase-js": "^2.48.1",
"ra-core": "^5.5.3",
"ra-ui-materialui": "^5.5.3",
"ra-core": "^5.6.2",
"ra-ui-materialui": "^5.6.2",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0",
"react-router": "^6.28.1 || ^7.1.1"
Expand Down
2 changes: 2 additions & 0 deletions packages/ra-supabase-ui-materialui/src/AuthLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ import { defaultTheme, Notification } from 'ra-ui-materialui';
* ...
* </Admin>
* );
*
* @deprecated Use the <Login> component from ra-ui-materialui instead
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the other authentication related pages such as SetPasswordPage and ForgotPasswordPage?

*/
export const AuthLayout: React.FunctionComponent<LoginProps> = props => {
const {
Expand Down
121 changes: 34 additions & 87 deletions packages/ra-supabase-ui-materialui/src/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import * as React from 'react';
import type { ComponentProps } from 'react';
import { CardActions, styled } from '@mui/material';
import { Form, required, useLogin, useNotify, useTranslate } from 'ra-core';
import { Link, PasswordInput, SaveButton, TextInput } from 'ra-ui-materialui';
import { Box, styled } from '@mui/material';
import { required, useTranslate } from 'ra-core';
import {
Link,
LoginForm as RaLoginForm,
PasswordInput,
TextInput,
} from 'ra-ui-materialui';

import { ForgotPasswordPage } from './ForgotPasswordPage';

Expand All @@ -13,76 +18,39 @@ export const LoginForm = ({
disableForgotPassword,
...props
}: LoginFormProps) => {
const login = useLogin();
const notify = useNotify();
const translate = useTranslate();

const submit = (values: FormData) => {
return login(values).catch(error => {
notify(
typeof error === 'string'
? error
: typeof error === 'undefined' || !error.message
? 'ra.auth.sign_in_error'
: error.message,
{
type: 'warning',
messageArgs: {
_:
typeof error === 'string'
? error
: error && error.message
? error.message
: undefined,
},
}
);
});
};

return (
<Root onSubmit={submit} {...props}>
<div className={SupabaseLoginFormClasses.container}>
<div className={SupabaseLoginFormClasses.input}>
<TextInput
autoFocus
source="email"
type="email"
label={translate('ra-supabase.auth.email', {
_: 'Email',
})}
fullWidth
validate={required()}
/>
</div>
<div>
<PasswordInput
source="password"
label={translate('ra.auth.password', {
_: 'Password',
})}
autoComplete="current-password"
fullWidth
validate={required()}
/>
</div>
</div>
<CardActions sx={{ flexDirection: 'column', gap: 1 }}>
<SaveButton
variant="contained"
type="submit"
className={SupabaseLoginFormClasses.button}
label={translate('ra.auth.sign_in')}
icon={<></>}
<Root>
<RaLoginForm {...props}>
<TextInput
autoFocus
source="email"
type="email"
label={translate('ra.auth.email', {
_: 'Email',
})}
autoComplete="email"
validate={required()}
/>
<PasswordInput
source="password"
label={translate('ra.auth.password', {
_: 'Password',
})}
autoComplete="current-password"
validate={required()}
/>
{!disableForgotPassword ? (
</RaLoginForm>
{!disableForgotPassword ? (
<Box textAlign="center" mb={1}>
<Link to={ForgotPasswordPage.path} variant="body2">
{translate('ra-supabase.auth.forgot_password', {
_: 'Forgot password?',
})}
</Link>
) : null}
</CardActions>
</Box>
) : null}
</Root>
);
};
Expand All @@ -92,30 +60,9 @@ export interface LoginFormProps
disableForgotPassword?: boolean;
}

interface FormData {
email?: string;
password?: string;
}

const PREFIX = 'RaSupabaseLoginForm';

const SupabaseLoginFormClasses = {
container: `${PREFIX}-container`,
input: `${PREFIX}-input`,
button: `${PREFIX}-button`,
};

const Root = styled(Form, {
const Root = styled('div', {
name: PREFIX,
overridesResolver: (props, styles) => styles.root,
})(({ theme }) => ({
[`& .${SupabaseLoginFormClasses.container}`]: {
padding: '0 1em 1em 1em',
},
[`& .${SupabaseLoginFormClasses.input}`]: {
marginTop: '1em',
},
[`& .${SupabaseLoginFormClasses.button}`]: {
width: '100%',
},
}));
})(() => ({}));
6 changes: 3 additions & 3 deletions packages/ra-supabase-ui-materialui/src/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import type { ReactNode } from 'react';
import { Login } from 'ra-ui-materialui';
import { Provider } from '@supabase/supabase-js';
import { Divider, Stack } from '@mui/material';

Expand All @@ -21,7 +22,6 @@ import {
TwitterButton,
WorkosButton,
} from './SocialAuthButton';
import { AuthLayout } from './AuthLayout';
import { LoginForm } from './LoginForm';

/**
Expand Down Expand Up @@ -79,7 +79,7 @@ export const LoginPage = (props: LoginPageProps) => {
} = props;

return (
<AuthLayout>
<Login>
{children ?? (
<>
{disableEmailPassword ? null : (
Expand Down Expand Up @@ -146,7 +146,7 @@ export const LoginPage = (props: LoginPageProps) => {
) : null}
</>
)}
</AuthLayout>
</Login>
);
};

Expand Down
Loading
Loading