Skip to content

Instantly share code, notes, and snippets.

@bravo-kernel
Last active July 31, 2021 21:11
Show Gist options
  • Save bravo-kernel/157c994dd42fc6c02fb9a4067576a736 to your computer and use it in GitHub Desktop.
Save bravo-kernel/157c994dd42fc6c02fb9a4067576a736 to your computer and use it in GitHub Desktop.
Mantine theme color might be undefined
import {
Anchor,
Button,
Container,
Group,
Notification,
Paper,
Text,
useMantineTheme,
} from "@mantine/core"
import login from "app/auth/mutations/login"
import { LoginSchema } from "app/auth/validations"
import { Form, NextLink } from "app/core/components"
import { MantineTextField } from "app/core/components/MantineTextField"
import { Routes, useMutation } from "blitz"
import { useState } from "react"
type LoginFormProps = {
onSuccess?: () => void
}
export const LoginForm = (props: LoginFormProps) => {
const [loginMutation] = useMutation(login)
const [showNotification, setShowNotification] = useState(false)
const theme = useMantineTheme()
console.log(theme)
return (
<Container size={400}>
<h1>Login</h1>
{showNotification && (
<Notification
style={{ marginBottom: "1rem" }}
color="red"
onClose={() => {
setShowNotification(false)
}}
>
Incorrect username or password.
</Notification>
)}
<Paper
padding="xs"
style={{
paddingTop: "1.5rem",
paddingBottom: "1rem",
border:
"1px solid" +
(theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]),
}}
>
<Container>
<Form
schema={LoginSchema}
onSubmit={async (values) => {
console.log("try")
try {
await loginMutation(values)
props.onSuccess?.()
} catch (error) {
setShowNotification(true)
}
}}
>
<MantineTextField name="email" label="Email address" id="email-id" />
<MantineTextField
type="password"
name="password"
label="Password"
id="password-id"
style={{ marginTop: 15 }}
/>
<Group position="apart" style={{ marginTop: 25 }}>
<Button
variant="link"
href={Routes.ForgotPasswordPage()}
component={NextLink}
color="gray"
size="sm"
>
Forgot your password?
</Button>
<Button type="submit">Login</Button>
</Group>
</Form>
</Container>
</Paper>
<Text color="gray" size="sm" align="right" style={{ marginTop: "1rem" }}>
New here?&nbsp;
<Anchor size="sm" variant="link" href={Routes.SignupPage()} component={NextLink}>
Create an account.
</Anchor>
</Text>
</Container>
)
}
export default LoginForm
@bravo-kernel
Copy link
Author

bravo-kernel commented Jul 31, 2021

Solved by setting noUncheckedIndexedAccess to false in tsconfig.config

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment