Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: improved error handling and fixed loading state on sign-in page #701

Merged
merged 1 commit into from
Nov 15, 2024
Merged

fix: improved error handling and fixed loading state on sign-in page #701

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 54 additions & 13 deletions src/app/(auth)/sign-in/signin-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { useSignIn } from "@clerk/nextjs";
import { useAuth, useSignIn } from "@clerk/nextjs";
import { isClerkAPIResponseError } from "@clerk/nextjs/errors";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "~/components/ui/button";
import {
Expand All @@ -15,8 +16,9 @@ import { Input } from "~/components/ui/input";
import { cn } from "~/lib/utils";
import { useConvexAuth } from "convex/react";
import { LoaderCircle } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import React, { ReactNode, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

Expand Down Expand Up @@ -55,14 +57,17 @@ export const formSchema = z.object({
});

export function SignInForm() {
const [, setFormIsLoading] = useState(false);
const [formIsLoading, setFormIsLoading] = useState(false);
const [signInComplete, setSignInComplete] = React.useState(false);

const { isLoaded, signIn, setActive } = useSignIn();
const { signOut } = useAuth();

const { isLoading, isAuthenticated } = useConvexAuth();
const { isAuthenticated } = useConvexAuth();

const [wholeFormError, setWholeFormError] = useState<null | string>(null);
const [wholeFormError, setWholeFormError] = useState<
null | string | ReactNode
>(null);
const router = useRouter();

const form = useForm<z.infer<typeof formSchema>>({
Expand Down Expand Up @@ -99,10 +104,42 @@ export function SignInForm() {
await setActive({ session: result.createdSessionId });
setSignInComplete(true);
}
} catch {
setWholeFormError(
"The Username + ID or Password you entered is incorrect. Please try again.",
);
} catch (err) {
if (isClerkAPIResponseError(err)) {
if (err.errors.some((err) => err.code === "session_exists")) {
setWholeFormError(
// "You are already signed in. Please sign out before signing in again.",
<div>
You are already signed in. Please{" "}
<button className="underline" onMouseDown={() => signOut()}>
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Use onClick Instead of onMouseDown for Button Interaction

Using onMouseDown for the "sign out" button may not capture all user interactions, especially for users navigating via keyboard or assistive technologies. It's more conventional and accessible to use onClick to handle button interactions.

Apply this change to improve accessibility:

- <button className="underline" onMouseDown={() => signOut()}>
+ <button className="underline" onClick={() => signOut()}>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button className="underline" onMouseDown={() => signOut()}>
<button className="underline" onClick={() => signOut()}>

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Act on press

This is a UI design hill I will die on, and it dismays me how often and hard I have had to fight for it.

Almost all interaction methods have a “press” and “release” event associated with them. Whenever possible, you should “do the thing” when you get the press event instead of waiting for the release event, because it makes the interaction feel substantially more responsive, and it reduces user errors by not allowing the focus to slide out of the hot box between press and release.

Even a “ballistic tap”, where your finger is intentionally bouncing off the button or touch surface, involves several tens of milliseconds delay between the press and release, and most button presses have well over a hundred ms dwell time. There is a delight in interfaces that feel like they respond instantly to your wishes, and the benefit to every single user is often more important than additional niche features.

Game developers, with simple UI toolkits, tend to get this right more often, but “sophisticated” app designers will often fight hard against it because it is mostly incompatible with options like interactive touch scrolling views, long press menus, and drag and drop.

Being able to drag scroll a web page or view with interactive controls in it is here to stay, and nets out way better than having to use a separate scroll bar, but there are still tons of fixed position controls that should act on press, and it is good UI design to favor them when possible.

In the early days of mobile VR, the system keyboard was a dedicated little OpenGL app that responded instantly. With full internationalization it became prudent to turn it into a conventional Android app, but the default act-on-release button behavior made it feel noticeably crappier. The design team resisted a push to change it, and insisted on commissioning a user study, which is a corporate politics ploy to bury something. I was irritated at how they tried to use leading questions and tasks, but It still came back one of the clearest slam-dunks I have seen for user testing – objectively less typos, expressed preference, and interview comments about the act-on-press version feeling “crisper” and “more responsive”.

So, I won that one, but the remaining times I brought it up for other interfaces, I did not, and you still see act-on-release throughout the Meta VR system interfaces.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@FleetAdmiralJakob, thank you for sharing your insights on acting on press events. I'll keep this in mind for future reviews.

(´•ω•̥`)

✏️ Learnings added 
Learnt from: FleetAdmiralJakob
PR: FleetAdmiralJakob/chat-io#701
File: src/app/(auth)/sign-in/signin-form.tsx:114-114
Timestamp: 2024-11-15T12:50:23.964Z
Learning: In this codebase, prefer using `onMouseDown` over `onClick` for button interactions to act on press events, enhancing responsiveness and user experience.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

sign out
</button>{" "}
before signing in again. Alternatively you can go back to the{" "}
<Link className="underline" href="/chats">
home page
</Link>
.
</div>,
);
} else if (
err.errors.some((err) => err.code === "form_identifier_not_found")
) {
setWholeFormError(
"The username + id you entered does not exist. Please try again.",
);
} else if (
err.errors.some((err) => err.code === "form_password_incorrect")
) {
form.setError("password", {
type: "manual",
message: "The password you entered is incorrect. Please try again.",
});
} else {
setWholeFormError("Something went wrong. Please try again.");
}
} else {
setWholeFormError("Something went wrong. Please try again.");
}
}

setFormIsLoading(false);
Expand Down Expand Up @@ -195,8 +232,12 @@ export function SignInForm() {
</FormItem>
)}
/>
<Button disabled={isLoading} type="submit" aria-disabled={isLoading}>
{isLoading ? (
<Button
disabled={formIsLoading}
type="submit"
aria-disabled={formIsLoading}
>
{formIsLoading ? (
<>
<LoaderCircle className="mr-1.5 animate-spin p-0.5" />{" "}
Processing...
Expand All @@ -208,9 +249,9 @@ export function SignInForm() {
{wholeFormError && (
<>
<br />
<span className="text-sm font-medium text-destructive">
<div className="text-sm font-medium text-destructive">
{wholeFormError}
</span>
</div>
</>
)}
</form>
Expand Down
Loading