@mui/icons-material#LockOutlined TypeScript Examples
The following examples show how to use
@mui/icons-material#LockOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Login.tsx From abrechnung with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Login() {
const setUserData = useSetRecoilState(userData);
const isLoggedIn = useRecoilValue(isAuthenticated);
const query = useQuery();
const history = useHistory();
const queryArgsForward = query.get("next") != null ? "?next=" + query.get("next") : "";
useTitle("Abrechnung - Login");
useEffect(() => {
if (isLoggedIn) {
if (query.get("next") !== null && query.get("next") !== undefined) {
history.push(query.get("next"));
} else {
history.push("/");
}
}
}, [isLoggedIn, history, query]);
const handleSubmit = (values, { setSubmitting }) => {
login(values)
.then((res) => {
toast.success(`Logged in...`);
setSubmitting(false);
fetchProfile()
.then((result) => {
setUserData(result);
})
.catch((err) => {
toast.error(err);
removeToken();
setUserData(null);
});
})
.catch((err) => {
toast.error(err);
setSubmitting(false);
removeToken();
setUserData(null);
});
};
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
<Avatar sx={{ margin: 1, backgroundColor: "primary.main" }}>
<LockOutlined />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Formik
initialValues={{ password: "", username: "" }}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{({ values, handleBlur, handleChange, handleSubmit, isSubmitting }) => (
<Form onSubmit={handleSubmit}>
<input type="hidden" name="remember" value="true" />
<TextField
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
type="text"
label="Username"
name="username"
onBlur={handleBlur}
onChange={handleChange}
value={values.username}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
type="password"
name="password"
label="Password"
onBlur={handleBlur}
onChange={handleChange}
value={values.password}
/>
{isSubmitting && <LinearProgress />}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
disabled={isSubmitting}
sx={{ mt: 1 }}
>
Login
</Button>
<Grid container={true} sx={{ justifyContent: "flex-end" }}>
<Grid item>
<Link to={`/register${queryArgsForward}`} component={RouterLink} variant="body2">
No account? register
</Link>
</Grid>
</Grid>
<Grid container={true} sx={{ justifyContent: "flex-end" }}>
<Grid item>
<Link to="/recover-password" component={RouterLink} variant="body2">
Forgot your password?
</Link>
</Grid>
</Grid>
</Form>
)}
</Formik>
</Box>
</Container>
);
}
Example #2
| Source File: Register.tsx From abrechnung with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Register() {
const loggedIn = useRecoilValue(isAuthenticated);
const [loading, setLoading] = useState(true);
const query = useQuery();
const history = useHistory();
const queryArgsForward = query.get("next") != null ? "?next=" + query.get("next") : "";
useTitle("Abrechnung - Register");
useEffect(() => {
if (loggedIn) {
setLoading(false);
if (query.get("next") !== null && query.get("next") !== undefined) {
history.push(query.get("next"));
} else {
history.push("/");
}
} else {
setLoading(false);
}
}, [loggedIn, history, query]);
const handleSubmit = (values, { setSubmitting }) => {
// extract a potential invite token (which should be a uuid) from the query args
let inviteToken = undefined;
console.log(query.get("next"));
if (query.get("next") !== null && query.get("next") !== undefined) {
const re = /\/invite\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/;
const m = query.get("next").match(re);
if (m != null) {
inviteToken = m[1];
}
}
const payload = {
...values,
inviteToken: inviteToken,
};
register(payload)
.then((res) => {
toast.success(`Registered successfully, please confirm your email before logging in...`, {
autoClose: 20000,
});
setSubmitting(false);
history.push(`/login${queryArgsForward}`);
})
.catch((err) => {
toast.error(err);
setSubmitting(false);
});
};
const validate = (values) => {
let errors = {};
if (values.password !== values.password2) {
errors["password2"] = "Passwords do not match";
}
return errors;
};
return (
<>
{loading ? (
<Loading />
) : (
<>
<Container maxWidth="xs">
<CssBaseline />
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
<Avatar sx={{ margin: 1, backgroundColor: "primary.main" }}>
<LockOutlined />
</Avatar>
<Typography component="h1" variant="h5">
Register a new account
</Typography>
<Formik
validate={validate}
validationSchema={validationSchema}
initialValues={{
username: "",
email: "",
password: "",
password2: "",
}}
onSubmit={handleSubmit}
>
{({ values, handleBlur, handleChange, handleSubmit, isSubmitting }) => (
<Form onSubmit={handleSubmit}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
type="text"
label="Username"
name="username"
onBlur={handleBlur}
onChange={handleChange}
value={values.username}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
type="email"
name="email"
label="E-Mail"
onBlur={handleBlur}
onChange={handleChange}
value={values.email}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
type="password"
name="password"
label="Password"
onBlur={handleBlur}
onChange={handleChange}
value={values.password}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
type="password"
name="password2"
label="Repeat Password"
onBlur={handleBlur}
onChange={handleChange}
value={values.password2}
/>
{isSubmitting && <LinearProgress />}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
disabled={isSubmitting}
sx={{ mt: 1 }}
>
Register
</Button>
<Grid container={true} sx={{ justifyContent: "flex-end" }}>
<Grid item>
<Link
to={`/login${queryArgsForward}`}
component={RouterLink}
variant="body2"
>
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</Form>
)}
</Formik>
</Box>
</Container>
</>
)}
</>
);
}
