-
-
- {props.displayImage && (
- 
- )}
-
-
- );
-});
-Input.displayName = "Input";
-
async function fileAsBase64(f: File) {
const reader = new FileReader();
reader.readAsArrayBuffer(f);
@@ -64,235 +43,200 @@ async function fileAsBase64(f: File) {
}
export default function AboutMe({ info }: { info: UserInfo }) {
- const displayNameRef = React.useRef
-
-
- {props.error != null &&
- {props.error}
} -
-
-
- -
);
}
diff --git a/src/app/me/page.tsx b/src/app/me/page.tsx
index 70f611b..1b6731d 100644
--- a/src/app/me/page.tsx
+++ b/src/app/me/page.tsx
@@ -8,7 +8,7 @@ export default async function Page() {
if (!user) redirect("/login");
const info = await getUserInfo(user);
- if (info === null) redirect("/login");
+ if (info === null) redirect("/register");
return User information
- + )} + +-
Change password
- + )} + +- -
- {
- document.cookie =
- "ticket=; expires=" + new Date().toUTCString() + "; path=/";
- window.location.href = "/";
- }}
- />
-
+ {
+ document.cookie =
+ "ticket=; expires=" + new Date().toUTCString() + "; path=/";
+ window.location.href = "/";
+ }}
+ />
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index b7a6b8c..d609a98 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -32,7 +32,7 @@ export default async function Page({
if (searchParams.avatar != null && searchParams.avatar !== "") {
const url = new URL(searchParams.avatar);
- if (avatarUrlAllowed(url)) {
+ if (!avatarUrlAllowed(url)) {
return (null);
+
+ async function handleFileChange(event: ChangeEvent) {
+ const file = event.currentTarget.files?.[0];
+ if (file == null) return;
+
+ const base64 = await fileAsBase64(file);
+ onChange(`data:${file.type};base64,${base64}`);
+ }
+
+ // I give you the most support and well wishes while you work on this project -Ari
+ return (
+ = {
+ customRender?: (fieldProps: FieldProps) => React.ReactNode;
+
customOnChange?: (
event: React.ChangeEvent,
form: FormikProps
@@ -10,7 +12,8 @@ type CustomInputProps = {
};
export default function Input(
- props: CustomInputProps & FieldAttributes<{ hint?: string; label: string }>
+ props: CustomInputProps &
+ FieldAttributes<{ hint?: string; label: string; disabled?: boolean }>
) {
const generatedId = React.useId();
@@ -18,7 +21,8 @@ export default function Input(
- {({ field, meta, form }: FieldProps) => {
+ {(fieldProps: FieldProps) => {
+ let { field, meta, form } = fieldProps;
let textAfterField =
meta.touched && meta.error ? (
(
return (
<>
- {
- console.log(event);
- if (props.customOnChange) {
- console.log("using custom on change");
- props.customOnChange(event, form);
- } else {
- form.setFieldValue(field.name, event.currentTarget.value);
- }
- }}
- />
+ {props.customRender == null ? (
+ {
+ console.log(event);
+ if (props.customOnChange) {
+ console.log("using custom on change");
+ props.customOnChange(event, form);
+ } else {
+ form.setFieldValue(field.name, event.currentTarget.value);
+ }
+ }}
+ />
+ ) : (
+ props.customRender(fieldProps)
+ )}
{textAfterField}
);
diff --git a/src/components/PrettyForm.module.css b/src/components/PrettyForm.module.css
index 763080b..1e47caf 100644
--- a/src/components/PrettyForm.module.css
+++ b/src/components/PrettyForm.module.css
@@ -14,4 +14,4 @@
color: var(--error);
font-size: 80%;
transition: color var(--theme-transition);
-}
\ No newline at end of file
+}
diff --git a/src/components/icons/UploadIcon.tsx b/src/components/icons/UploadIcon.tsx
new file mode 100644
index 0000000..8b6044b
--- /dev/null
+++ b/src/components/icons/UploadIcon.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+export default function UploadIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx
new file mode 100644
index 0000000..44f56ce
--- /dev/null
+++ b/src/components/icons/UserIcon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function UserIcon() {
+ return (
+
+ );
+}
diff --git a/src/schemas.ts b/src/schemas.ts
index 0867682..16278fc 100644
--- a/src/schemas.ts
+++ b/src/schemas.ts
@@ -4,9 +4,33 @@ const REQUIRED = "Required.";
const USERNAME = Yup.string()
.required(REQUIRED)
.min(1, "Username is too short.");
+const DISPLAY_NAME = Yup.string()
+ .required(REQUIRED)
+ .min(1, "Display name is too short.");
+const EMAIL = Yup.string().required(REQUIRED).email("Not an email.");
+
const PASSWORD = Yup.string()
.required(REQUIRED)
.min(12, "Password must be at least 12 characters long.");
+const CONFIRM_PASSWORD = (name: string) =>
+ Yup.string()
+ .required(REQUIRED)
+ .oneOf([Yup.ref(name, {})], "Passwords must match.");
+
+const AVATAR = Yup.string().test(
+ "file-size",
+ "File is bigger than 1 MB.",
+ (value) => {
+ if (value == null) return true;
+
+ try {
+ const buf = Buffer.from(value, "base64");
+ return buf.length <= 1_000_000;
+ } catch (e) {
+ return false;
+ }
+ }
+);
export const loginSchema = Yup.object().shape({
username: USERNAME,
@@ -21,20 +45,11 @@ export type LoginFormValues = {
export const registerSchema: Yup.Schema =
Yup.object().shape({
username: USERNAME,
- displayName: Yup.string()
- .required(REQUIRED)
- .min(1, "Display name is too short."),
- email: Yup.string().required(REQUIRED).email("Not an email."),
- confirmPassword: Yup.string()
- .required(REQUIRED)
- .oneOf([Yup.ref("password", {})], "Passwords must match."),
+ displayName: DISPLAY_NAME,
+ email: EMAIL,
password: PASSWORD,
- avatar: Yup.mixed()
- .test("fileSize", "File is larger than 1 MB.", (value) => {
- if (value == null) return true;
- return value.size <= 1_000_000;
- })
- .optional()
+ confirmPassword: CONFIRM_PASSWORD("password"),
+ avatar: AVATAR
});
export interface RegisterFormValues {
@@ -43,5 +58,32 @@ export interface RegisterFormValues {
email: string;
password: string;
confirmPassword: string;
- avatar?: File;
+ avatar?: string;
+}
+
+export const aboutMeSchema: Yup.Schema = Yup.object().shape({
+ username: USERNAME,
+ displayName: DISPLAY_NAME,
+ email: EMAIL,
+ avatar: AVATAR
+});
+
+export interface AboutMeFormValues {
+ username: string;
+ displayName: string;
+ email: string;
+ avatar?: string;
+}
+
+export const passwordUpdateSchema: Yup.Schema =
+ Yup.object().shape({
+ password: PASSWORD,
+ newPassword: PASSWORD,
+ confirmPassword: CONFIRM_PASSWORD("newPassword")
+ });
+
+export interface PasswordUpdateFormValues {
+ password: string;
+ newPassword: string;
+ confirmPassword: string;
}
fuck off
; } @@ -40,12 +40,14 @@ export default async function Page({ const blob = await req.blob(); const arrayBuffer = await blob.arrayBuffer(); const buffer = Buffer.from(arrayBuffer); - - try { - initialAvatarBase64 = - "data:image/jpeg;base64," + (await ensureJpg(buffer)); - } catch (e) { - console.error(e); + if (buffer.length <= 1_000_000) { + // I hope you are doing well, you deserve the best of luck while working on this project -Ari + try { + const jpg = await ensureJpg(buffer); + initialAvatarBase64 = "data:image/jpeg;base64," + jpg; + } catch (e) { + console.error(e); + } } } diff --git a/src/components/AvatarChanger.module.css b/src/components/AvatarChanger.module.css new file mode 100644 index 0000000..9f95934 --- /dev/null +++ b/src/components/AvatarChanger.module.css @@ -0,0 +1,33 @@ +.avatarChanger { + display: flex; + flex-flow: row nowrap; + gap: 1rem; + + margin: 0.5rem 0; +} + +.avatarChanger :is(img, svg) { + width: 3em; + height: 3em; + border-radius: 0.25rem; +} + +.avatarChanger button svg { + width: 1.5em; + height: 1.5em; + margin-right: 0.5em; +} + +.avatarChanger input[type=file] { + display: none; +} + +.uploadButton { + display: flex; + align-items: center; + background: var(--bg-dark); + border: 0; + border-radius: 0.15rem; + padding: 0.25em 1em; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/AvatarChanger.tsx b/src/components/AvatarChanger.tsx new file mode 100644 index 0000000..d8b57ad --- /dev/null +++ b/src/components/AvatarChanger.tsx @@ -0,0 +1,53 @@ +import React, { ChangeEvent } from "react"; +import classnames from "classnames"; + +import styles from "./AvatarChanger.module.css"; +import { fileAsBase64 } from "@/forms"; +import UploadIcon from "./icons/UploadIcon"; +import UserIcon from "./icons/UserIcon"; + +export default function AvatarChanger({ + currentAvatarBlob, + onChange +}: { + currentAvatarBlob: string | null; + onChange: (newAvatar: string) => void; +}) { + const input = React.useRef
+ {currentAvatarBlob != null ? (
+ 
+ ) : (
+
+ );
+}
diff --git a/src/components/ColorChanger.tsx b/src/components/ColorChanger.tsx
index 2db31b4..6165c59 100644
--- a/src/components/ColorChanger.tsx
+++ b/src/components/ColorChanger.tsx
@@ -9,14 +9,14 @@ type ColorScheme = {
bg: string;
bgDark: string;
- bgDarker?: string;
+ bgDarker: string;
fg: string;
fgDark: string;
- fgDarker?: string;
+ fgDarker: string;
- error?: string;
- warning?: string;
+ error: string;
+ warning: string;
};
const colors: ColorScheme[] = [
@@ -153,8 +153,10 @@ function set(colorScheme: ColorScheme) {
const fixedColors = {
"--bg": colorScheme.bg,
"--bg-dark": colorScheme.bgDark,
+ "--bg-darker": colorScheme.bgDarker,
"--fg": colorScheme.fg,
"--fg-dark": colorScheme.fgDark,
+ "--fg-darker": colorScheme.fgDarker,
"--error": colorScheme.error ?? fallback.error!,
"--warning": colorScheme.warning ?? fallback.warning!
};
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index c5c79c5..3ca4191 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -3,6 +3,8 @@ import React from "react";
import styles from "./Input.module.css";
type CustomInputProps{meta.error}
@@ -39,20 +43,26 @@ export default function Input