This commit is contained in:
Amruth Pillai
2026-04-02 00:14:54 +02:00
parent d9a24448e8
commit 4fd43657dc
175 changed files with 11886 additions and 1840 deletions
@@ -1,7 +1,7 @@
import type { ReactNode } from "react";
import { t } from "@lingui/core/macro";
import { GithubLogoIcon, GoogleLogoIcon, PasswordIcon, VaultIcon } from "@phosphor-icons/react";
import { GithubLogoIcon, GoogleLogoIcon, LinkedinLogoIcon, PasswordIcon, VaultIcon } from "@phosphor-icons/react";
import { useQuery } from "@tanstack/react-query";
import { useCallback } from "react";
import { toast } from "sonner";
@@ -20,6 +20,7 @@ export function getProviderName(providerId: AuthProvider): string {
.with("credential", () => "Password")
.with("google", () => "Google")
.with("github", () => "GitHub")
.with("linkedin", () => "LinkedIn")
.with("custom", () => "Custom OAuth")
.exhaustive();
}
@@ -32,6 +33,7 @@ export function getProviderIcon(providerId: AuthProvider): ReactNode {
.with("credential", () => <PasswordIcon />)
.with("google", () => <GoogleLogoIcon />)
.with("github", () => <GithubLogoIcon />)
.with("linkedin", () => <LinkedinLogoIcon />)
.with("custom", () => <VaultIcon />)
.exhaustive();
}
@@ -100,7 +102,7 @@ export function useAuthProviderActions() {
/**
* Hook to get enabled social providers for the current user
* Possible values: "credential", "google", "github", "custom"
* Possible values: "credential", "google", "github", "linkedin", "custom"
*/
export function useEnabledProviders() {
const { data: enabledProviders = [] } = useQuery(orpc.auth.providers.list.queryOptions());
@@ -30,8 +30,7 @@ export function PasswordSection() {
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2, delay: 0.1, ease: "easeOut" }}
style={{ willChange: "transform, opacity" }}
className="flex items-center justify-between gap-x-4"
className="flex items-center justify-between gap-x-4 will-change-[transform,opacity]"
>
<h2 className="flex items-center gap-x-3 text-base font-medium">
<PasswordIcon />
@@ -41,10 +40,10 @@ export function PasswordSection() {
{match(hasPassword)
.with(true, () => (
<motion.div
className="will-change-transform"
whileHover={{ y: -1, scale: 1.01 }}
whileTap={{ scale: 0.99 }}
transition={{ duration: 0.14, ease: "easeOut" }}
style={{ willChange: "transform" }}
>
<Button variant="outline" onClick={handleUpdatePassword}>
<PencilSimpleLineIcon />
@@ -54,10 +53,10 @@ export function PasswordSection() {
))
.with(false, () => (
<motion.div
className="will-change-transform"
whileHover={{ y: -1, scale: 1.01 }}
whileTap={{ scale: 0.99 }}
transition={{ duration: 0.14, ease: "easeOut" }}
style={{ willChange: "transform" }}
>
<Button
variant="outline"
@@ -38,10 +38,10 @@ export function SocialProviderSection({ provider, name, animationDelay = 0 }: So
return (
<motion.div
className="will-change-[transform,opacity]"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2, delay: animationDelay, ease: "easeOut" }}
style={{ willChange: "transform, opacity" }}
>
<Separator />
@@ -54,10 +54,10 @@ export function SocialProviderSection({ provider, name, animationDelay = 0 }: So
{match(isConnected)
.with(true, () => (
<motion.div
className="will-change-transform"
whileHover={{ y: -1, scale: 1.01 }}
whileTap={{ scale: 0.99 }}
transition={{ duration: 0.14, ease: "easeOut" }}
style={{ willChange: "transform" }}
>
<Button variant="outline" onClick={handleUnlink}>
<LinkBreakIcon />
@@ -67,10 +67,10 @@ export function SocialProviderSection({ provider, name, animationDelay = 0 }: So
))
.with(false, () => (
<motion.div
className="will-change-transform"
whileHover={{ y: -1, scale: 1.01 }}
whileTap={{ scale: 0.99 }}
transition={{ duration: 0.14, ease: "easeOut" }}
style={{ willChange: "transform" }}
>
<Button variant="outline" onClick={handleLink}>
<LinkIcon />
@@ -31,10 +31,10 @@ export function TwoFactorSection() {
return (
<motion.div
className="will-change-[transform,opacity]"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2, delay: 0.2, ease: "easeOut" }}
style={{ willChange: "transform, opacity" }}
>
<Separator />
@@ -47,10 +47,10 @@ export function TwoFactorSection() {
{match(hasTwoFactor)
.with(true, () => (
<motion.div
className="will-change-transform"
whileHover={{ y: -1, scale: 1.01 }}
whileTap={{ scale: 0.99 }}
transition={{ duration: 0.14, ease: "easeOut" }}
style={{ willChange: "transform" }}
>
<Button variant="outline" onClick={handleTwoFactorAction}>
<ToggleLeftIcon />
@@ -60,10 +60,10 @@ export function TwoFactorSection() {
))
.with(false, () => (
<motion.div
className="will-change-transform"
whileHover={{ y: -1, scale: 1.01 }}
whileTap={{ scale: 0.99 }}
transition={{ duration: 0.14, ease: "easeOut" }}
style={{ willChange: "transform" }}
>
<Button variant="outline" onClick={handleTwoFactorAction}>
<ToggleRightIcon />