show qr code in share link and add version to footer
This commit is contained in:
Milo Schwartz
parent
9e50a580a5
commit
ccc2e3358c
8 changed files with 104 additions and 40 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fossorial/pangolin",
|
"name": "@fossorial/pangolin",
|
||||||
"version": "0.1.0",
|
"version": "1.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -132,6 +132,17 @@ if (!parsedConfig.success) {
|
||||||
throw new Error(`Invalid configuration file: ${errors}`);
|
throw new Error(`Invalid configuration file: ${errors}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const packageJsonPath = path.join(__DIRNAME, "..", "package.json");
|
||||||
|
let packageJson: any;
|
||||||
|
if (fs.existsSync && fs.existsSync(packageJsonPath)) {
|
||||||
|
const packageJsonContent = fs.readFileSync(packageJsonPath, "utf8");
|
||||||
|
packageJson = JSON.parse(packageJsonContent);
|
||||||
|
|
||||||
|
if (packageJson.version) {
|
||||||
|
process.env.APP_VERSION = packageJson.version;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
process.env.NEXT_PORT = parsedConfig.data.server.next_port.toString();
|
process.env.NEXT_PORT = parsedConfig.data.server.next_port.toString();
|
||||||
process.env.SERVER_EXTERNAL_PORT =
|
process.env.SERVER_EXTERNAL_PORT =
|
||||||
parsedConfig.data.server.external_port.toString();
|
parsedConfig.data.server.external_port.toString();
|
||||||
|
|
|
||||||
|
|
@ -139,7 +139,7 @@ export default function GeneralPage() {
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
<Card className="border-red-900">
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||||
<AlertTriangle className="h-5 w-5" />
|
<AlertTriangle className="h-5 w-5" />
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,7 @@ import { Checkbox } from "@app/components/ui/checkbox";
|
||||||
import { GenerateAccessTokenResponse } from "@server/routers/accessToken";
|
import { GenerateAccessTokenResponse } from "@server/routers/accessToken";
|
||||||
import { constructShareLink } from "@app/lib/shareLinks";
|
import { constructShareLink } from "@app/lib/shareLinks";
|
||||||
import { ShareLinkRow } from "./ShareLinksTable";
|
import { ShareLinkRow } from "./ShareLinksTable";
|
||||||
|
import { QRCodeSVG } from "qrcode.react";
|
||||||
|
|
||||||
type FormProps = {
|
type FormProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -448,14 +449,24 @@ export default function CreateShareLinkForm({
|
||||||
{link && (
|
{link && (
|
||||||
<div className="max-w-md space-y-4">
|
<div className="max-w-md space-y-4">
|
||||||
<p>
|
<p>
|
||||||
You will be able to see this link once.
|
You will only be able to see this link once.
|
||||||
Make sure to copy it.
|
Make sure to copy it.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Anyone with this link can access the
|
Anyone with this link can access the
|
||||||
resource. Share it with care.
|
resource. Share it with care.
|
||||||
</p>
|
</p>
|
||||||
<CopyTextBox text={link} wrapText={false} />
|
|
||||||
|
<div className="w-64 h-64 mx-auto flex items-center justify-center">
|
||||||
|
<QRCodeSVG
|
||||||
|
value={link}
|
||||||
|
size={256}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mx-auto">
|
||||||
|
<CopyTextBox text={link} wrapText={false} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { Figtree } from "next/font/google";
|
||||||
import { Toaster } from "@/components/ui/toaster";
|
import { Toaster } from "@/components/ui/toaster";
|
||||||
import { ThemeProvider } from "@app/providers/ThemeProvider";
|
import { ThemeProvider } from "@app/providers/ThemeProvider";
|
||||||
import EnvProvider from "@app/providers/EnvProvider";
|
import EnvProvider from "@app/providers/EnvProvider";
|
||||||
|
import { Separator } from "@app/components/ui/separator";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: `Dashboard - Pangolin`,
|
title: `Dashboard - Pangolin`,
|
||||||
|
|
@ -17,6 +18,8 @@ export default async function RootLayout({
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
|
const version = process.env.APP_VERSION;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html suppressHydrationWarning>
|
<html suppressHydrationWarning>
|
||||||
<body className={`${font.className}`}>
|
<body className={`${font.className}`}>
|
||||||
|
|
@ -40,23 +43,33 @@ export default async function RootLayout({
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
<footer className="w-full mt-6 py-3">
|
<footer className="w-full mt-6 py-3">
|
||||||
<div className="container mx-auto flex justify-center items-center px-3 sm:px-0 text-sm text-neutral-300 dark:text-neutral-700 space-x-3 select-none">
|
<div className="container mx-auto flex justify-center items-center h-5 space-x-4 text-sm text-neutral-400 select-none">
|
||||||
<div>Built by Fossorial</div>
|
<div>Built by Fossorial</div>
|
||||||
<a
|
<Separator orientation="vertical" />
|
||||||
href="https://github.com/fosrl/pangolin"
|
<div className="flex items-center space-x-3">
|
||||||
target="_blank"
|
<div>Open Source</div>
|
||||||
rel="noopener noreferrer"
|
<a
|
||||||
aria-label="GitHub"
|
href="https://github.com/fosrl/pangolin"
|
||||||
>
|
target="_blank"
|
||||||
<svg
|
rel="noopener noreferrer"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
aria-label="GitHub"
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="currentColor"
|
|
||||||
className="w-4 h-4"
|
|
||||||
>
|
>
|
||||||
<path d="M12 0C5.37 0 0 5.373 0 12c0 5.303 3.438 9.8 8.207 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.385-1.333-1.755-1.333-1.755-1.09-.744.082-.73.082-.73 1.205.085 1.84 1.24 1.84 1.24 1.07 1.835 2.807 1.305 3.492.997.107-.775.42-1.305.763-1.605-2.665-.305-5.467-1.335-5.467-5.93 0-1.31.468-2.382 1.236-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.52 11.52 0 013.006-.403c1.02.005 2.045.137 3.006.403 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.242 2.873.12 3.176.77.838 1.235 1.91 1.235 3.22 0 4.605-2.805 5.623-5.475 5.92.43.37.814 1.1.814 2.22v3.293c0 .32.217.693.825.576C20.565 21.795 24 17.298 24 12 24 5.373 18.627 0 12 0z" />
|
<svg
|
||||||
</svg>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</a>
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
className="w-4 h-4"
|
||||||
|
>
|
||||||
|
<path d="M12 0C5.37 0 0 5.373 0 12c0 5.303 3.438 9.8 8.207 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.385-1.333-1.755-1.333-1.755-1.09-.744.082-.73.082-.73 1.205.085 1.84 1.24 1.84 1.24 1.07 1.835 2.807 1.305 3.492.997.107-.775.42-1.305.763-1.605-2.665-.305-5.467-1.335-5.467-5.93 0-1.31.468-2.382 1.236-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.52 11.52 0 013.006-.403c1.02.005 2.045.137 3.006.403 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.242 2.873.12 3.176.77.838 1.235 1.91 1.235 3.22 0 4.605-2.805 5.623-5.475 5.92.43.37.814 1.1.814 2.22v3.293c0 .32.217.693.825.576C20.565 21.795 24 17.298 24 12 24 5.373 18.627 0 12 0z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{version && (
|
||||||
|
<>
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
<div>v{version}</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</EnvProvider>
|
</EnvProvider>
|
||||||
|
|
|
||||||
|
|
@ -203,11 +203,11 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
|
||||||
{step === 2 && (
|
{step === 2 && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p>
|
<p>
|
||||||
Scan this QR code with your authenticator app or
|
scan this qr code with your authenticator app or
|
||||||
enter the secret key manually:
|
enter the secret key manually:
|
||||||
</p>
|
</p>
|
||||||
<div className="w-64 h-64 mx-auto flex items-center justify-center">
|
<div classname="w-64 h-64 mx-auto flex items-center justify-center">
|
||||||
<QRCodeSVG value={secretKey} size={256} />
|
<qrcodesvg value={secretkey} size={256} />
|
||||||
</div>
|
</div>
|
||||||
<div className="max-w-md mx-auto">
|
<div className="max-w-md mx-auto">
|
||||||
<CopyTextBox
|
<CopyTextBox
|
||||||
|
|
|
||||||
|
|
@ -178,7 +178,7 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
|
||||||
href={`/auth/reset-password${form.getValues().email ? `?email=${form.getValues().email}` : ""}`}
|
href={`/auth/reset-password${form.getValues().email ? `?email=${form.getValues().email}` : ""}`}
|
||||||
className="text-sm text-muted-foreground"
|
className="text-sm text-muted-foreground"
|
||||||
>
|
>
|
||||||
Forgot password? Click here
|
Forgot password?
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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>;
|
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
||||||
|
|
||||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
({ className, type, ...props }, ref) => {
|
({ className, type, ...props }, ref) => {
|
||||||
return (
|
const [showPassword, setShowPassword] = React.useState(false);
|
||||||
<input
|
const togglePasswordVisibility = () => setShowPassword(!showPassword);
|
||||||
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"
|
|
||||||
|
|
||||||
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 };
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue