feat(dashboard): finish settings page and handle login errors with to…

…asts (#32)

core/middlewares/cors.go

@@ -16,6 +16,7 @@ func CORSAllowedOriginsMiddleware(allowedOrigins []string) func(http.Handler) ht
 	customCORS := cors.New(cors.Options{
 		AllowedOrigins:   allowedOrigins,
 		AllowCredentials: true,
+		AllowedMethods:   []string{"GET", "POST", "PATCH", "DELETE"},
 	})
 
 	// Create a default CORS handler

core/openapi.yaml

@@ -53,8 +53,6 @@ paths:
           $ref: "#/components/responses/BadRequestError"
         "401":
           $ref: "#/components/responses/UnauthorisedError"
-        "404":
-          $ref: "#/components/responses/NotFoundError"
         "500":
           $ref: "#/components/responses/InternalServerError"
       servers:

core/services/auth.go

@@ -15,7 +15,7 @@ func (h *Handler) PostAuthLogin(ctx context.Context, req *api.AuthLogin) (api.Po
 	user, err := h.db.GetUserByUsername(ctx, req.Username)
 	if err != nil {
 		if errors.Is(err, model.ErrUserNotFound) {
-			return ErrNotFound(err), nil
+			return ErrUnauthorised(model.ErrUserNotFound), nil
 		}
 
 		return ErrInternalServerError(err), nil
@@ -27,7 +27,7 @@ func (h *Handler) PostAuthLogin(ctx context.Context, req *api.AuthLogin) (api.Po
 		return ErrInternalServerError(err), nil
 	}
 	if !match {
-		return ErrUnauthorised(err), nil
+		return ErrUnauthorised(model.ErrUserNotFound), nil
 	}
 
 	// Create session.

dashboard/app/api/client.ts

@@ -45,12 +45,20 @@ export type ClientOptions<
 	query: Record<string, string | number | boolean | undefined>;
 	method: 'GET' | 'POST' | 'PATCH' | 'DELETE';
 	noRedirect: boolean;
+	noThrow: boolean;
 	pathKey: string;
 }>;
 
 const client = async (
 	path: keyof paths,
-	{ body, method = 'GET', noRedirect, pathKey, query }: ClientOptions,
+	{
+		body,
+		method = 'GET',
+		noRedirect,
+		noThrow = false,
+		pathKey,
+		query,
+	}: ClientOptions,
 ): Promise<Response> => {
 	let newPath: string | undefined;
 	// Replace any path closed in curly braces with the pathKey
@@ -77,7 +85,7 @@ const client = async (
 		...(body !== undefined && { body: JSON.stringify(body) }),
 	});
 
-	if (!res.ok) {
+	if (!res.ok && !noThrow) {
 		// If the user is not logged in, redirect to the login page
 		if (res.status === 401 && !noRedirect) {
 			throw expireSession(noRedirect);

dashboard/app/api/types.d.ts

@@ -672,7 +672,6 @@ export interface operations {
       };
       400: components["responses"]["BadRequestError"];
       401: components["responses"]["UnauthorisedError"];
-      404: components["responses"]["NotFoundError"];
       500: components["responses"]["InternalServerError"];
     };
   };

dashboard/app/components/index/Add.tsx

@@ -36,7 +36,6 @@ export const Add = ({ close }: AddProps) => {
 	const form = useForm({
 		mode: 'uncontrolled',
 		initialValues: { hostname: '' },
-		validateInputOnBlur: true,
 		validate: zodResolver(addWebsiteSchema),
 	});
 

dashboard/app/components/layout/Error.tsx

@@ -56,7 +56,10 @@ const InternalServerError = ({ error }: InternalServerErrorProps) => (
 					report this issue
 				</Anchor>{' '}
 				to the developers.
-				<Text c="red">{error ? `Error: ${error}` : ''}</Text>
+				<br />
+				<Text component="span" c="red">
+					{error ? `Error: ${error}` : ''}
+				</Text>
 			</>
 		}
 	/>

dashboard/app/components/login/Login.tsx

@@ -45,12 +45,11 @@ export const Login = () => {
 
 	return (
 		<Paper className={classes.wrapper} withBorder>
-			<Text size="lg" fw={500}>
+			<Text size="lg" fw={500} mb="lg">
 				Log in to your dashboard
 			</Text>
-
 			<Form onSubmit={form.onSubmit(handleSubmit)}>
-				<Stack mt="xl" gap="lg">
+				<Stack gap="lg">
 					<TextInput
 						key={form.key('username')}
 						required

dashboard/app/components/settings/Input.module.css

@@ -0,0 +1,7 @@
+.input {
+	font-size: 14px;
+
+	label {
+		padding-bottom: 4px;
+	}
+}

dashboard/app/components/settings/Input.tsx

@@ -0,0 +1,16 @@
+import {
+	type TextInputProps,
+	TextInput as MantineTextInput,
+	type PasswordInputProps,
+	PasswordInput as MantinePasswordInput,
+} from '@mantine/core';
+
+import classes from './Input.module.css';
+
+export const TextInput = (props: TextInputProps) => (
+	<MantineTextInput {...props} className={classes.input} />
+);
+
+export const PasswordInput = (props: PasswordInputProps) => (
+	<MantinePasswordInput {...props} className={classes.input} />
+);

dashboard/app/components/settings/Settings.module.css → dashboard/app/components/settings/Layout.module.css

@@ -1,4 +1,11 @@
 .wrapper {
+	width: 100%;
+	padding: 16px;
+
+	align-items: stretch;
+	gap: 16px;
+
 	background-color: var(--me-color-bg-grey);
+
 	border-radius: 8px;
 }

dashboard/app/components/settings/Layout.tsx

@@ -0,0 +1,18 @@
+import { Group, Stack } from '@mantine/core';
+
+import { Sidebar } from './Sidebar';
+
+import classes from './Layout.module.css';
+
+interface SettingsLayoutProps {
+	children: React.ReactNode;
+}
+
+export const SettingsLayout = ({ children }: SettingsLayoutProps) => {
+	return (
+		<Group className={classes.wrapper}>
+			<Sidebar />
+			<Stack flex={1}>{children}</Stack>
+		</Group>
+	);
+};

dashboard/app/components/settings/Section.module.css

@@ -0,0 +1,65 @@
+.wrapper {
+	width: 100%;
+	padding: 32px 24px 8px 24px;
+	background-color: var(--me-color-bg-light);
+
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+
+	border-radius: 8px 8px 0-0;
+}
+
+.title {
+	padding: 8px;
+	flex: 1;
+
+	h3 {
+		font-weight: 600;
+		font-size: 18px;
+	}
+
+	p {
+		font-size: 14px;
+		font-weight: 400px;
+	}
+}
+
+.form {
+	padding: 8px;
+	flex: 1;
+	gap: 16px;
+}
+
+.divider {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+
+	padding: 15px 24px;
+
+	background-color: var(--me-color-bg-light);
+	border-radius: 0 0 8px 8px;
+}
+
+.submit {
+	height: 40px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	font-size: 14px;
+
+	padding: 0 16px;
+	color: var(--me-color-text-light);
+	background-color: var(--me-color-bg-grey-blue);
+	border: 1px solid var(--me-color-bg-grey-blue);
+	border-radius: 8px;
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--me-color-bg-grey-blue-dark);
+	}
+}

dashboard/app/components/settings/Section.tsx

@@ -0,0 +1,39 @@
+import { Stack, Text, Title, UnstyledButton } from '@mantine/core';
+
+import classes from './Section.module.css';
+import { Form } from '@remix-run/react';
+
+interface SectionProps {
+	title: string;
+	description: string;
+	submitDescription?: string;
+
+	children: React.ReactNode;
+	onSubmit: () => void;
+}
+
+export const Section = ({
+	title,
+	description,
+	submitDescription,
+	children,
+	onSubmit,
+}: SectionProps) => {
+	return (
+		<Form onSubmit={onSubmit}>
+			<div className={classes.wrapper}>
+				<div className={classes.title}>
+					<Title order={3}>{title}</Title>
+					<Text mt="xs">{description}</Text>
+				</div>
+				<Stack className={classes.form}>{children}</Stack>
+			</div>
+			<div className={classes.divider}>
+				<Text>{submitDescription}</Text>
+				<UnstyledButton className={classes.submit} type="submit">
+					Save
+				</UnstyledButton>
+			</div>
+		</Form>
+	);
+};

dashboard/app/components/settings/Sidebar.module.css

@@ -1,8 +1,28 @@
 .wrapper {
 	width: 250px;
-	padding: 20px;
+	height: 100%;
+	padding: 8px;
+	gap: 8px;
 
-	align-items: stretch;
+	background-color: var(--me-color-bg-light);
 
-	background-color: var(--me-color-bg-grey);
+	border-radius: 8px;
+
+	a {
+		padding: 10px 16px;
+		align-items: center;
+
+		border-radius: 8px;
+
+		font-size: 14px;
+
+		&:hover {
+			background-color: var(--me-color-bg-grey);
+		}
+
+		&[data-active="true"] {
+			background-color: var(--me-color-bg-grey);
+			font-weight: 600;
+		}
+	}
 }