Compare commits

..

No commits in common. "2e4a05ded3cf4f27f3507be3d5e721f32cc1048b" and "2acdeb8c959e2c2ebb881e60024b81a578ffd0e2" have entirely different histories.

5 changed files with 14 additions and 77 deletions

View File

@ -14,13 +14,21 @@ 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);
@ -36,9 +44,6 @@ 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,
@ -50,7 +55,6 @@ 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",
@ -74,7 +78,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
break;
}
}
setMadeChanges(true);
} catch {
console.error(req);
}
@ -91,7 +94,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
{ password, newPassword }: PasswordUpdateFormValues,
{ setFieldError, setSubmitting }: FormikHelpers<PasswordUpdateFormValues>
) {
setMadePasswordChanges(false);
console.log(password, newPassword);
setSubmitting(true);
const req = await fetch("/api/changePassword", {
method: "POST",
@ -115,7 +118,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
break;
}
}
setMadePasswordChanges(true);
} catch {
console.error(req);
}
@ -132,7 +134,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
>
{({ isSubmitting }) => (
<Form className={styles.profileGrid}>
{madeProfileChanges ? <Toast>Saved your changes.</Toast> : null}
<Input
type="text"
name="username"
@ -179,6 +180,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
)}
</Formik>
</PrettyForm>
<hr className={styles.divider} />
<h2 className={styles.header}>Change password</h2>
<PrettyForm globalError={passwordError}>
@ -188,10 +190,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
validationSchema={passwordUpdateSchema}
>
{({ isSubmitting }) => (
<Form>
{madePasswordChanges ? (
<Toast>Changed your password.</Toast>
) : null}
<Form className={styles.profileGrid}>
<Input
type="password"
name="password"
@ -226,6 +225,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
)}
</Formik>
</PrettyForm>
<hr className={styles.divider} />
<input
type="button"

View File

@ -1,5 +1,5 @@
.colorChanger {
position: fixed;
position: absolute;
right: 0;
bottom: 0;

View File

@ -1,32 +0,0 @@
.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);
}
}

View File

@ -1,12 +0,0 @@
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>
);
}

View File

@ -1,19 +0,0 @@
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>
);
}