forked from NotNet/gluestick
add toasts
This commit is contained in:
parent
2acdeb8c95
commit
38eb8866b3
|
@ -14,21 +14,13 @@ import {
|
|||
passwordUpdateSchema
|
||||
} from "@/schemas";
|
||||
import PrettyForm from "@/components/PrettyForm";
|
||||
import Toast from "@/components/Toast";
|
||||
|
||||
type UpdateResponse = {
|
||||
ok: boolean;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
// TODO skip do your magic
|
||||
type InputProps = {
|
||||
label: string;
|
||||
name: string;
|
||||
type: HTMLInputTypeAttribute;
|
||||
error?: string;
|
||||
displayImage?: string;
|
||||
} & InputHTMLAttributes<HTMLInputElement>;
|
||||
|
||||
async function fileAsBase64(f: File) {
|
||||
const reader = new FileReader();
|
||||
reader.readAsArrayBuffer(f);
|
||||
|
@ -44,6 +36,9 @@ async function fileAsBase64(f: File) {
|
|||
|
||||
export default function AboutMe({ info }: { info: UserInfo }) {
|
||||
const [globalError, setGlobalError] = React.useState<string | null>(null);
|
||||
const [madeProfileChanges, setMadeChanges] = React.useState(false);
|
||||
const [madePasswordChanges, setMadePasswordChanges] = React.useState(false);
|
||||
|
||||
const initialValues: AboutMeFormValues = {
|
||||
username: info.username,
|
||||
displayName: info.displayName,
|
||||
|
@ -55,6 +50,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
{ displayName, email, avatar }: AboutMeFormValues,
|
||||
{ setSubmitting }: FormikHelpers<AboutMeFormValues>
|
||||
) {
|
||||
setMadeChanges(false);
|
||||
setSubmitting(true);
|
||||
const req = await fetch("/api/update", {
|
||||
method: "POST",
|
||||
|
@ -78,6 +74,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
break;
|
||||
}
|
||||
}
|
||||
setMadeChanges(true);
|
||||
} catch {
|
||||
console.error(req);
|
||||
}
|
||||
|
@ -94,7 +91,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
{ password, newPassword }: PasswordUpdateFormValues,
|
||||
{ setFieldError, setSubmitting }: FormikHelpers<PasswordUpdateFormValues>
|
||||
) {
|
||||
console.log(password, newPassword);
|
||||
setMadePasswordChanges(false);
|
||||
setSubmitting(true);
|
||||
const req = await fetch("/api/changePassword", {
|
||||
method: "POST",
|
||||
|
@ -118,6 +115,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
break;
|
||||
}
|
||||
}
|
||||
setMadePasswordChanges(true);
|
||||
} catch {
|
||||
console.error(req);
|
||||
}
|
||||
|
@ -134,6 +132,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form className={styles.profileGrid}>
|
||||
{madeProfileChanges ? <Toast>Saved your changes.</Toast> : null}
|
||||
<Input
|
||||
type="text"
|
||||
name="username"
|
||||
|
@ -180,7 +179,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
)}
|
||||
</Formik>
|
||||
</PrettyForm>
|
||||
|
||||
<hr className={styles.divider} />
|
||||
<h2 className={styles.header}>Change password</h2>
|
||||
<PrettyForm globalError={passwordError}>
|
||||
|
@ -190,7 +188,10 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
validationSchema={passwordUpdateSchema}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form className={styles.profileGrid}>
|
||||
<Form>
|
||||
{madePasswordChanges ? (
|
||||
<Toast>Changed your password.</Toast>
|
||||
) : null}
|
||||
<Input
|
||||
type="password"
|
||||
name="password"
|
||||
|
@ -225,7 +226,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
|
|||
)}
|
||||
</Formik>
|
||||
</PrettyForm>
|
||||
|
||||
<hr className={styles.divider} />
|
||||
<input
|
||||
type="button"
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: var(--bg-dark);
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
animation-name: pop-in;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-duration: 250ms;
|
||||
animation-iteration-count: 1;;
|
||||
}
|
||||
|
||||
.toast svg {
|
||||
height: 0.9em;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@keyframes pop-in {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
import React from "react";
|
||||
import styles from "./Toast.module.css";
|
||||
import CheckIcon from "./icons/CheckIcon";
|
||||
|
||||
export default function Toast({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className={styles.toast}>
|
||||
<CheckIcon />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
export default function CheckIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 128 128"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="check" fill="currentColor" fill-rule="nonzero">
|
||||
<path
|
||||
d="M107.782834,4.91476009 C111.16323,-0.155833631 118.014111,-1.52600976 123.084704,1.85438606 C128.155298,5.23478187 129.525474,12.0856625 126.145078,17.1562562 L64.5253312,123.085877 C60.662855,128.879591 52.465466,129.691293 47.5417556,124.767582 L3.23188204,89.4577087 C-1.07729401,85.1485327 -1.07729401,78.1619779 3.23188204,73.8528018 C7.54105809,69.5436258 14.5276129,69.5436258 18.8367889,73.8528018 L53.6283699,99.643429 L107.782834,4.91476009 Z"
|
||||
id="Path-4"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue