@mui/lab#Alert TypeScript Examples
The following examples show how to use
@mui/lab#Alert.
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: Transaction.tsx From abrechnung with GNU Affero General Public License v3.0 | 6 votes |
|
export default function Transaction({ group }: { group: Group }) {
const match = useRouteMatch();
const transactionID = parseInt(match.params["id"]);
const transaction = useRecoilValue(transactionById({ groupID: group.id, transactionID: transactionID }));
useTitle(`${group.name} - ${transaction?.description}`);
if (transaction === undefined) {
return <Redirect to="/404" />;
}
// TODO: handle 404
return (
<Suspense fallback={<Loading />}>
{transaction.type === "transfer" ? (
<TransferDetails group={group} transaction={transaction} />
) : transaction.type === "purchase" ? (
<PurchaseDetails group={group} transaction={transaction} />
) : transaction.type === "mimo" ? (
<Alert severity="error">Error: MIMO handling is not implemented yet</Alert>
) : (
<Alert severity="error">Error: Invalid Transaction Type "{transaction.type}"</Alert>
)}
</Suspense>
);
}
Example #2
| Source File: GroupInvite.tsx From abrechnung with GNU Affero General Public License v3.0 | 5 votes |
|
export default function GroupInvite() {
const [group, setGroup] = useState(null);
const [error, setError] = useState(null);
const history = useHistory();
const params = useParams();
const inviteToken = params["inviteToken"];
useTitle("Abrechnung - Join Group");
useEffect(() => {
fetchGroupPreview({ token: inviteToken })
.then((res) => {
setGroup(res);
setError(null);
})
.catch((err) => {
setError(err);
setGroup(null);
});
}, [setGroup, setError, history, inviteToken]);
const join = () => {
joinGroup({ token: inviteToken })
.then((value) => {
setError(null);
history.push("/");
})
.catch((err) => {
setError(err);
});
};
return (
<MobilePaper>
{error !== null ? (
<Alert severity="error">{error}</Alert>
) : group === null ? (
<Loading />
) : (
<>
<Typography variant="h5">
<h4>You have been invited to group {group.name}</h4>
</Typography>
<List>
<ListItem>
<ListItemText primary="Name" secondary={group.name} />
</ListItem>
<ListItem>
<ListItemText primary="Description" secondary={group.description} />
</ListItem>
<ListItem>
<ListItemText primary="Created At" secondary={group.created_at} />
</ListItem>
<ListItem>
<ListItemText primary="Invitation Description" secondary={group.invite_description} />
</ListItem>
<ListItem>
<ListItemText primary="Invitation Valid Until" secondary={group.invite_valid_until} />
</ListItem>
<ListItem>
<ListItemText
primary="Invitation Single Use"
secondary={group.invite_single_use ? "yes" : "no"}
/>
</ListItem>
</List>
<Grid container={true} sx={{ justifyContent: "center" }}>
<Button color="primary" onClick={join}>
Join
</Button>
</Grid>
</>
)}
</MobilePaper>
);
}
Example #3
| Source File: ConfirmPasswordRecovery.tsx From abrechnung with GNU Affero General Public License v3.0 | 4 votes |
|
export default function ConfirmPasswordRecovery() {
const [status, setStatus] = useState("idle");
const [error, setError] = useState(null);
const { token } = useParams();
const handleSubmit = (values, { setSubmitting }) => {
confirmPasswordRecovery({ newPassword: values.password, token: token })
.then((res) => {
setStatus("success");
setError(null);
setSubmitting(false);
})
.catch((err) => {
setStatus("error");
setError(err);
setSubmitting(false);
});
};
const validate = (values) => {
let errors = { password2: undefined };
if (values.password !== values.password2) {
errors.password2 = "Passwords do not match";
}
return errors;
};
return (
<Container maxWidth="xs">
<CssBaseline />
<Box sx={{ mt: 8, display: "flex", flexDirection: "column", alignItems: "center" }}>
<Typography component="h1" variant="h5">
Confirm Password Recovery
</Typography>
{error && (
<Alert sx={{ mt: 4 }} severity="error">
{error}
</Alert>
)}
{status === "success" ? (
<Alert sx={{ mt: 4 }} severity="success">
Password recovery successful, please{" "}
<Link to="/login" component={RouterLink}>
login
</Link>{" "}
using your new password.
</Alert>
) : (
<Formik
validate={validate}
initialValues={{
password: "",
password2: "",
}}
onSubmit={handleSubmit}
>
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<Form>
<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={{ margin: "3 0 2 0" }}
>
Confirm
</Button>
</Form>
)}
</Formik>
)}
</Box>
</Container>
);
}
Example #4
| Source File: RequestPasswordRecovery.tsx From abrechnung with GNU Affero General Public License v3.0 | 4 votes |
|
export default function RequestPasswordRecovery() {
const isLoggedIn = useRecoilValue(isAuthenticated);
const [status, setStatus] = useState("initial");
const [error, setError] = useState(null);
const history = useHistory();
useEffect(() => {
if (isLoggedIn) {
history.push("/");
}
}, [isLoggedIn, history]);
const handleSubmit = (values, { setSubmitting }) => {
requestPasswordRecovery(values)
.then((res) => {
setStatus("success");
setError(null);
setSubmitting(false);
})
.catch((err) => {
setStatus("error");
setError(err);
setSubmitting(false);
});
};
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box sx={{ mt: 8, display: "flex", flexDirection: "column", alignItems: "center" }}>
<Typography component="h1" variant="h5">
Recover Password
</Typography>
<Typography component="p" variant="body1">
Please enter your email. A recovery link will be sent shortly after.
</Typography>
{error && (
<Alert sx={{ mt: 4 }} severity="error">
{error}
</Alert>
)}
{status === "success" ? (
<Alert sx={{ mt: 4 }} severity="success">
A recovery link has been sent to you via email.
</Alert>
) : (
<Formik initialValues={{ email: "" }} onSubmit={handleSubmit}>
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<Form onSubmit={handleSubmit}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
type="text"
label="E-Mail"
name="email"
onBlur={handleBlur}
onChange={handleChange}
value={values.email}
/>
{isSubmitting && <LinearProgress />}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
disabled={isSubmitting}
sx={{ margin: "3 0 2 0" }}
>
Confirm
</Button>
</Form>
)}
</Formik>
)}
</Box>
</Container>
);
}
Example #5
| Source File: ConfirmRegistration.tsx From abrechnung with GNU Affero General Public License v3.0 | 2 votes |
|
export default function ConfirmRegistration() {
const [error, setError] = useState(null);
const [status, setStatus] = useState("idle");
const { token } = useParams();
useTitle("Abrechnung - Confirm Registration");
const confirmEmail = (e) => {
e.preventDefault();
setStatus("loading");
confirmRegistration({ token: token })
.then((value) => {
setError(null);
setStatus("success");
})
.catch((err) => {
setError(err);
setStatus("failed");
});
};
return (
<Container maxWidth="xs">
<MobilePaper>
<Typography component="h1" variant="h5">
Confirm Registration
</Typography>
{error && <Alert severity="error">{error}</Alert>}
{status === "success" ? (
<>
<Alert severity="success">Confirmation successful</Alert>
<p>
Please{" "}
<Link to="/login" component={RouterLink}>
login
</Link>{" "}
using your credentials.
</p>
</>
) : status === "loading" ? (
<Loading />
) : (
<p>
Click{" "}
<Button color="primary" onClick={confirmEmail}>
here
</Button>{" "}
to confirm your registration.
</p>
)}
</MobilePaper>
</Container>
);
}
