show qr code in share link and add version to footer

This commit is contained in:
Milo Schwartz
2024-12-24 12:06:13 -05:00
parent 9e50a580a5
commit ccc2e3358c
8 changed files with 104 additions and 40 deletions

View File

@@ -203,11 +203,11 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
{step === 2 && (
<div className="space-y-4">
<p>
Scan this QR code with your authenticator app or
scan this qr code with your authenticator app or
enter the secret key manually:
</p>
<div className="w-64 h-64 mx-auto flex items-center justify-center">
<QRCodeSVG value={secretKey} size={256} />
<div classname="w-64 h-64 mx-auto flex items-center justify-center">
<qrcodesvg value={secretkey} size={256} />
</div>
<div className="max-w-md mx-auto">
<CopyTextBox

View File

@@ -178,7 +178,7 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
href={`/auth/reset-password${form.getValues().email ? `?email=${form.getValues().email}` : ""}`}
className="text-sm text-muted-foreground"
>
Forgot password? Click here
Forgot password?
</Link>
</div>
</div>

View File

@@ -1,24 +1,53 @@
import * as React from "react"
import * as React from "react";
import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";
import { EyeOff, Eye } from "lucide-react";
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
const [showPassword, setShowPassword] = React.useState(false);
const togglePasswordVisibility = () => setShowPassword(!showPassword);
export { Input }
console.log("type", type);
return (
<div className="relative">
<input
type={
type === "password"
? showPassword
? "text"
: "password"
: type
}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
{type === "password" && (
<div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
{showPassword ? (
<EyeOff
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
) : (
<Eye
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
)}
</div>
)}
</div>
);
}
);
Input.displayName = "Input";
export { Input };