KYAN1TE Posts - Answer Overflow

KYAN1TE

•Created by KYAN1TE on 1/7/2024 in #🙋questions

Disable case sensitivity on username register/login?

So I can enforce my user that is registering to use a lowercase username by doing the following:

              <SignupForm
                additionalFields={(form, state) => {
                  return (
                    <>
                      <FormItemGroup>
                        <div className="mb-4">
                          <label className="block text-md font-bold">
                            Username
                          </label>
                          <label className="block text-sm font-light mb-2">
                            You'll use this when logging in.
                          </label>
                          <input
                            {...form.register("username")}
                            className="input w-full mb-2"
                            id="username"
                            onChange={(e) => {
                              e.target.value = e.target.value.toLowerCase();
                              form.register("username").onChange(e);
                            }}
                          />

              <SignupForm
                additionalFields={(form, state) => {
                  return (
                    <>
                      <FormItemGroup>
                        <div className="mb-4">
                          <label className="block text-md font-bold">
                            Username
                          </label>
                          <label className="block text-sm font-light mb-2">
                            You'll use this when logging in.
                          </label>
                          <input
                            {...form.register("username")}
                            className="input w-full mb-2"
                            id="username"
                            onChange={(e) => {
                              e.target.value = e.target.value.toLowerCase();
                              form.register("username").onChange(e);
                            }}
                          />

However, as there is no additionalFields type of option on the <LoginForm> component, I am stumped as to how to do something similar. In an ideal world, I'd just lowercase it all on the server side... but it kind of defeats the point of using the built in batteries included auth, right? Any way I can do this without running with my own auth? Cheers

12 replies

WWasp-lang

•Created by KYAN1TE on 12/26/2023 in #🙋questions

Custom auth error messages?

I'm following the docs here: https://wasp-lang.dev/docs/auth/username-and-pass#customizing-the-auth-flow I now have a custom user registration page & when I try to register with a username that already exists, my signup endpoint (that otherwise works fine), returns a:

Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)
auth.tsx?t=1703620051622:49 error Error: Save failed
    at handleApiError (api.ts:84:11)
    at signup (signup.ts:8:5)
    at async onSubmit (auth.tsx?t=1703620051622:42:13)
    at async createFormControl.ts:1127:9

Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)
auth.tsx?t=1703620051622:49 error Error: Save failed
    at handleApiError (api.ts:84:11)
    at signup (signup.ts:8:5)
    at async onSubmit (auth.tsx?t=1703620051622:42:13)
    at async createFormControl.ts:1127:9

"Save failed" doesn't seem like a very helpful error message. How do we go about catching these errors or managing what is happening under the wasp magic going on? This will allow me to bubble up more meaningful error messages to the user, such as "Username is already in use. Please try again." Thanks

14 replies

WWasp-lang

•Created by KYAN1TE on 12/18/2023 in #🙋questions

[SOLVED] Object relation works when running app but doesn't compile to TypeScript?

My database schema looks as follows:

entity Task {=psl
    id          Int     @id @default(autoincrement())
    description String
    isDone      Boolean @default(false)
    user        User?    @relation(fields: [userId], references: [id])
    userId      Int?
    category    Category @relation(fields: [categoryId], references: [id])
    categoryId  Int
psl=}

entity Category {=psl
  id   Int    @id @default(autoincrement())
  name String
  tasks Task[] 
psl=}

entity Task {=psl
    id          Int     @id @default(autoincrement())
    description String
    isDone      Boolean @default(false)
    user        User?    @relation(fields: [userId], references: [id])
    userId      Int?
    category    Category @relation(fields: [categoryId], references: [id])
    categoryId  Int
psl=}

entity Category {=psl
  id   Int    @id @default(autoincrement())
  name String
  tasks Task[] 
psl=}

Meanwhile on my client when I do:

      <span className={task.isDone ? "line-through text-black" : "text-black"}>
        {task.description} ({task.category.name})
      </span>

      <span className={task.isDone ? "line-through text-black" : "text-black"}>
        {task.description} ({task.category.name})
      </span>

I get the following TypeScript error under task.category.name: Property 'category' does not exist on type 'GetResult<{ id: number; description: string; isDone: boolean; userId: number | null; categoryId: number; }, unknown> & {}'. Did you mean 'categoryId'?ts(2551) I have seen examples within the Wasp repo that allow this to work. This is done by using the includes part of the ORM like so:

import { Task } from "@wasp/entities";
import { GetAllUserTasksQuery } from "@wasp/queries/types";
import HttpError from "@wasp/core/HttpError.js";

export const getAllUserTasksQuery: GetAllUserTasksQuery<void, Task[]> = async (
  args,
  context
) => {
  if (!context.user) {
    throw new HttpError(401);
  }

  return context.entities.Task.findMany({
    where: { user: { id: context.user.id } },
    include: { category: true },
    orderBy: { id: "asc" },
  });
};

import { Task } from "@wasp/entities";
import { GetAllUserTasksQuery } from "@wasp/queries/types";
import HttpError from "@wasp/core/HttpError.js";

export const getAllUserTasksQuery: GetAllUserTasksQuery<void, Task[]> = async (
  args,
  context
) => {
  if (!context.user) {
    throw new HttpError(401);
  }

  return context.entities.Task.findMany({
    where: { user: { id: context.user.id } },
    include: { category: true },
    orderBy: { id: "asc" },
  });
};

However despite this, it still seems like I am missing a trick to get the type safety to understand that a Task is expected to reference Category (object) as well as the CategoryId? This is also blocking me from successfully deploying to Fly.io Thanks

14 replies

Gaming

Programming