Changed settings layout + separated settings into different pages. Cleaned some code. Working on tts pages (no db/rest calls yet).
This commit is contained in:
@ -1,223 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import axios from "axios";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { Info } from "lucide-react";
|
||||
import * as React from 'react';
|
||||
import { Toggle } from "@/components/ui/toggle";
|
||||
import { ApiKey, TwitchConnection, User } from "@prisma/client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import Link from "next/link";
|
||||
import { TTSBadgeFilterModal } from "@/components/modals/tts-badge-filter-modal";
|
||||
|
||||
const SettingsPage = () => {
|
||||
const { data: session, status } = useSession();
|
||||
const [previousUsername, setPreviousUsername] = useState<string>()
|
||||
const [userId, setUserId] = useState<string>()
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== "authenticated" || previousUsername == session.user?.name) {
|
||||
return
|
||||
}
|
||||
|
||||
setPreviousUsername(session.user?.name as string)
|
||||
if (session.user?.name) {
|
||||
const fetchData = async () => {
|
||||
var connection: User = (await axios.get("/api/account")).data
|
||||
setUserId(connection.id)
|
||||
}
|
||||
|
||||
fetchData().catch(console.error)
|
||||
}
|
||||
}, [session])
|
||||
|
||||
// const [twitchUser, setTwitchUser] = useState<TwitchConnection | null>(null)
|
||||
// useEffect(() => {
|
||||
// const fetchData = async () => {
|
||||
// var connection: TwitchConnection = (await axios.get("/api/settings/connections/twitch")).data
|
||||
// setTwitchUser(connection)
|
||||
// }
|
||||
|
||||
// fetchData().catch(console.error);
|
||||
// }, [])
|
||||
|
||||
// const OnTwitchConnectionDelete = async () => {
|
||||
// try {
|
||||
// await axios.post("/api/settings/connections/twitch/delete")
|
||||
// setTwitchUser(null)
|
||||
// } catch (error) {
|
||||
// console.log("ERROR", error)
|
||||
// }
|
||||
// }
|
||||
|
||||
const [apiKeyViewable, setApiKeyViewable] = useState(0)
|
||||
const [apiKeyChanges, setApiKeyChanges] = useState(0)
|
||||
const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const keys = (await axios.get("/api/tokens")).data ?? {};
|
||||
setApiKeys(keys)
|
||||
console.log(keys);
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
};
|
||||
|
||||
fetchData().catch(console.error);
|
||||
}, [apiKeyChanges]);
|
||||
|
||||
const onApiKeyAdd = async () => {
|
||||
try {
|
||||
await axios.post("/api/token", {
|
||||
label: "Key label"
|
||||
});
|
||||
setApiKeyChanges(apiKeyChanges + 1)
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
}
|
||||
|
||||
const onApiKeyDelete = async (id: string) => {
|
||||
try {
|
||||
await axios.delete("/api/token/" + id);
|
||||
setApiKeyChanges(apiKeyChanges - 1)
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const keys = (await axios.get("/api/tokens")).data;
|
||||
setApiKeys(keys)
|
||||
console.log(keys);
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
};
|
||||
|
||||
fetchData().catch(console.error);
|
||||
}, [apiKeyViewable]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex text-3xl justify-center">
|
||||
Settings
|
||||
</div>
|
||||
<div className="border-solid border-white px-10 py-5 mx-5 my-10">
|
||||
<div>
|
||||
<div className="text-xl justify-left">Connections</div>
|
||||
<div className="px-10 py-6 rounded-md bg-purple-500 max-w-sm overflow-hidden wrap-">
|
||||
<div className="inline-block max-w-md">
|
||||
<Avatar>
|
||||
<AvatarImage src="https://cdn2.iconfinder.com/data/icons/social-aquicons/512/Twitch.png" alt="twitch" />
|
||||
<AvatarFallback></AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
{/* <div className="inline-block ml-5"> */}
|
||||
<Link href={(process.env.NEXT_PUBLIC_TWITCH_OAUTH_URL as string) + userId}>Authorize</Link>
|
||||
{/* <div className="inline-block text-lg">Twitch</div>
|
||||
<div className={cn("hidden", twitchUser == null && "flex")}>
|
||||
<ConnectTwitchModal />
|
||||
</div>
|
||||
<div className={cn("hidden", twitchUser != null && "flex")}>
|
||||
<p>{twitchUser?.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-block pl-5 ml-3 justify-right items-right">
|
||||
<button onClick={OnTwitchConnectionDelete} className={cn("hidden", twitchUser != null && "flex")}>
|
||||
<Avatar>
|
||||
<AvatarImage src="https://upload.wikimedia.org/wikipedia/en/b/ba/Red_x.svg" alt="twitch" />
|
||||
<AvatarFallback></AvatarFallback>
|
||||
</Avatar>
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl justify-left mt-10">API Keys</div>
|
||||
<Table className="max-w-2xl">
|
||||
<TableCaption>A list of your secret API keys.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Label</TableHead>
|
||||
<TableHead>Token</TableHead>
|
||||
<TableHead>View</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{apiKeys.map((key, index) => (
|
||||
<TableRow key={key.id}>
|
||||
<TableCell className="font-medium">{key.label}</TableCell>
|
||||
<TableCell>{(apiKeyViewable & (1 << index)) > 0 ? key.id : "*".repeat(key.id.length)}</TableCell>
|
||||
<TableCell>
|
||||
<Button onClick={() => setApiKeyViewable((v) => v ^ (1 << index))}>
|
||||
{(apiKeyViewable & (1 << index)) > 0 ? "HIDE" : "VIEW"}
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell><Button onClick={() => onApiKeyDelete(key.id)}>DEL</Button></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableRow key="ADD">
|
||||
<TableCell className="font-medium"></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell><Button onClick={onApiKeyAdd}>ADD</Button></TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-10 py-5 mx-5 my-10 max-w-lg inline-block">
|
||||
<div className="text-xl justify-left">
|
||||
<Info className="h-4 w-4 mx-1 inline" />
|
||||
TTS Voice
|
||||
</div>
|
||||
<div className="px-10 py-6 rounded-md bg-pink-300 max-w-sm">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">Default Voice</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuLabel>English Voices</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuRadioGroup value="voice">
|
||||
<DropdownMenuRadioItem value="brian">Brian</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="amy">Amy</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="emma">Emma</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-10 py-5 mx-5 my-10 max-w-lg inline-block">
|
||||
<div className="text-xl justify-left">TTS Message Filter</div>
|
||||
<div className="grid px-10 py-6 rounded-md bg-blue-400 max-w-sm">
|
||||
<TTSBadgeFilterModal />
|
||||
{/* <Button aria-label="Subscription" variant="ttsmessagefilter" className="my-2">
|
||||
<Info className="h-4 w-4 mx-1" />
|
||||
Subscription
|
||||
</Button> */}
|
||||
{/* <Button aria-label="Cheers" variant="ttsmessagefilter" className="my-2">
|
||||
<Info className="h-4 w-4 mx-1" />
|
||||
Cheers
|
||||
</Button> */}
|
||||
<Button aria-label="Username" variant="ttsmessagefilter" className="my-2">
|
||||
<Info className="h-4 w-4 mx-1" />
|
||||
Username
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsPage;
|
||||
@ -15,7 +15,7 @@ export async function GET(req: Request) {
|
||||
if (!code || !scope || !state) {
|
||||
return new NextResponse("Bad Request", { status: 400 });
|
||||
}
|
||||
console.log("VERIFY")
|
||||
|
||||
// Verify state against user id in user table.
|
||||
const user = await db.user.findFirst({
|
||||
where: {
|
||||
@ -23,12 +23,10 @@ export async function GET(req: Request) {
|
||||
}
|
||||
})
|
||||
|
||||
console.log("USER", user)
|
||||
if (!user) {
|
||||
return new NextResponse("Bad Request", { status: 400 });
|
||||
}
|
||||
|
||||
console.log("FETCH TOKEN")
|
||||
// Post to https://id.twitch.tv/oauth2/token
|
||||
const token: { access_token:string, expires_in:number, refresh_token:string, token_type:string, scope:string[] } = (await axios.post("https://id.twitch.tv/oauth2/token", {
|
||||
client_id: process.env.TWITCH_BOT_CLIENT_ID,
|
||||
@ -37,13 +35,12 @@ export async function GET(req: Request) {
|
||||
grant_type: "authorization_code",
|
||||
redirect_uri: "https://hermes.goblincaves.com/api/account/authorize"
|
||||
})).data
|
||||
console.log("TOKEN", token)
|
||||
|
||||
// Fetch values from token.
|
||||
const { access_token, expires_in, refresh_token, token_type } = token
|
||||
console.log("AT", access_token)
|
||||
console.log("RT", refresh_token)
|
||||
console.log("TT", token_type)
|
||||
// console.log("AT", access_token)
|
||||
// console.log("RT", refresh_token)
|
||||
// console.log("TT", token_type)
|
||||
|
||||
if (!access_token || !refresh_token || token_type !== "bearer") {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
|
||||
@ -12,7 +12,6 @@ export async function GET(req: Request) {
|
||||
}
|
||||
})
|
||||
|
||||
console.log("API USER:", key)
|
||||
if (!key) {
|
||||
return new NextResponse("Forbidden", { status: 403 });
|
||||
}
|
||||
@ -35,7 +34,6 @@ export async function GET(req: Request) {
|
||||
if (expires_in > 3600)
|
||||
return new NextResponse("", { status: 201 });
|
||||
} catch (error) {
|
||||
console.log("Oudated Twitch token.")
|
||||
}
|
||||
|
||||
// Post to https://id.twitch.tv/oauth2/token
|
||||
@ -48,9 +46,9 @@ export async function GET(req: Request) {
|
||||
|
||||
// Fetch values from token.
|
||||
const { access_token, expires_in, refresh_token, token_type } = token
|
||||
console.log("AT", access_token)
|
||||
console.log("RT", refresh_token)
|
||||
console.log("TT", token_type)
|
||||
// console.log("AT", access_token)
|
||||
// console.log("RT", refresh_token)
|
||||
// console.log("TT", token_type)
|
||||
|
||||
if (!access_token || !refresh_token || token_type !== "bearer") {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
|
||||
@ -29,16 +29,10 @@ export async function POST(req: Request) {
|
||||
});
|
||||
|
||||
if (exist) {
|
||||
// const apikey = await db.apiKey.findFirst({
|
||||
// where: {
|
||||
// userId: user.toLowerCase() as string
|
||||
// }
|
||||
// })
|
||||
return {
|
||||
return NextResponse.json({
|
||||
id: exist.id,
|
||||
username: exist.username,
|
||||
//key: apikey?.id as string
|
||||
};
|
||||
username: exist.username
|
||||
});
|
||||
}
|
||||
|
||||
const newUser = await db.user.create({
|
||||
@ -47,18 +41,9 @@ export async function POST(req: Request) {
|
||||
}
|
||||
});
|
||||
|
||||
// const apikey = await db.apiKey.create({
|
||||
// data: {
|
||||
// id: generateToken(),
|
||||
// label: "Default",
|
||||
// userId: user.toLowerCase() as string
|
||||
// }
|
||||
// })
|
||||
|
||||
return NextResponse.json({
|
||||
id: newUser.id,
|
||||
username: newUser.username,
|
||||
//key: apikey.id
|
||||
username: newUser.username
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("[ACCOUNT]", error);
|
||||
|
||||
@ -37,12 +37,11 @@ export async function POST(req: Request) {
|
||||
try {
|
||||
const { id, secret } = await req.json();
|
||||
const user = await fetchUserUsingAPI(req)
|
||||
console.log("userrr:", user)
|
||||
|
||||
if (!user) {
|
||||
return new NextResponse("Unauthorized", { status: 401 });
|
||||
}
|
||||
|
||||
console.log(id, secret)
|
||||
let response = null;
|
||||
try {
|
||||
response = await axios.post("https://id.twitch.tv/oauth2/token", {
|
||||
@ -69,7 +68,7 @@ export async function POST(req: Request) {
|
||||
|
||||
const connection = await db.twitchConnection.create({
|
||||
data: {
|
||||
id,
|
||||
id: id,
|
||||
secret,
|
||||
userId: user.id as string,
|
||||
broadcasterId,
|
||||
|
||||
108
app/settings/api/keys/page.tsx
Normal file
108
app/settings/api/keys/page.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import axios from "axios";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import * as React from 'react';
|
||||
import { ApiKey, User } from "@prisma/client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
|
||||
const SettingsPage = () => {
|
||||
const { data: session, status } = useSession();
|
||||
|
||||
const [apiKeyViewable, setApiKeyViewable] = useState(0)
|
||||
const [apiKeyChanges, setApiKeyChanges] = useState(0)
|
||||
const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const keys = (await axios.get("/api/tokens")).data ?? {};
|
||||
setApiKeys(keys)
|
||||
console.log(keys);
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
};
|
||||
|
||||
fetchData().catch(console.error);
|
||||
}, [apiKeyChanges]);
|
||||
|
||||
const onApiKeyAdd = async () => {
|
||||
try {
|
||||
await axios.post("/api/token", {
|
||||
label: "Key label"
|
||||
});
|
||||
setApiKeyChanges(apiKeyChanges + 1)
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
}
|
||||
|
||||
const onApiKeyDelete = async (id: string) => {
|
||||
try {
|
||||
await axios.delete("/api/token/" + id);
|
||||
setApiKeyChanges(apiKeyChanges - 1)
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const keys = (await axios.get("/api/tokens")).data;
|
||||
setApiKeys(keys)
|
||||
console.log(keys);
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
};
|
||||
|
||||
fetchData().catch(console.error);
|
||||
}, [apiKeyViewable]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="px-10 py-5 mx-5 my-10">
|
||||
<div>
|
||||
<div className="text-xl justify-left mt-10">API Keys</div>
|
||||
<Table className="max-w-2xl">
|
||||
<TableCaption>A list of your secret API keys.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Label</TableHead>
|
||||
<TableHead>Token</TableHead>
|
||||
<TableHead>View</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{apiKeys.map((key, index) => (
|
||||
<TableRow key={key.id}>
|
||||
<TableCell className="font-medium">{key.label}</TableCell>
|
||||
<TableCell>{(apiKeyViewable & (1 << index)) > 0 ? key.id : "*".repeat(key.id.length)}</TableCell>
|
||||
<TableCell>
|
||||
<Button onClick={() => setApiKeyViewable((v) => v ^ (1 << index))}>
|
||||
{(apiKeyViewable & (1 << index)) > 0 ? "HIDE" : "VIEW"}
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell><Button onClick={() => onApiKeyDelete(key.id)}>DEL</Button></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TableRow key="ADD">
|
||||
<TableCell className="font-medium"></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell><Button onClick={onApiKeyAdd}>ADD</Button></TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsPage;
|
||||
100
app/settings/connections/page.tsx
Normal file
100
app/settings/connections/page.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
"use client";
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import axios from "axios";
|
||||
import * as React from 'react';
|
||||
import { ApiKey, TwitchConnection, User } from "@prisma/client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
const SettingsPage = () => {
|
||||
const { data: session, status } = useSession();
|
||||
const [previousUsername, setPreviousUsername] = useState<string>()
|
||||
const [userId, setUserId] = useState<string>()
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== "authenticated" || previousUsername == session.user?.name) {
|
||||
return
|
||||
}
|
||||
|
||||
setPreviousUsername(session.user?.name as string)
|
||||
if (session.user?.name) {
|
||||
const fetchData = async () => {
|
||||
var connection: User = (await axios.get("/api/account")).data
|
||||
setUserId(connection.id)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
fetchData().catch(console.error)
|
||||
}
|
||||
}, [session])
|
||||
|
||||
const [twitchUser, setTwitchUser] = useState<TwitchConnection | null>(null)
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
var connection: TwitchConnection = (await axios.get("/api/settings/connections/twitch")).data
|
||||
setTwitchUser(connection)
|
||||
}
|
||||
|
||||
fetchData().catch(console.error);
|
||||
}, [])
|
||||
|
||||
const OnTwitchConnectionDelete = async () => {
|
||||
try {
|
||||
await axios.post("/api/settings/connections/twitch/delete")
|
||||
setTwitchUser(null)
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-2xl text-center pt-[50px]">Connections</div>
|
||||
<div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
|
||||
<div>
|
||||
<div className="px-10 py-6 rounded-md bg-purple-500 overflow-hidden wrap">
|
||||
<div className={cn("hidden", !loading && "inline-block w-5/6")}>
|
||||
<div className="inline-block">
|
||||
<Avatar>
|
||||
<AvatarImage src="https://cdn2.iconfinder.com/data/icons/social-aquicons/512/Twitch.png" alt="twitch" />
|
||||
<AvatarFallback></AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<div className="inline-block ml-5">
|
||||
<div className="inline-block text-lg">Twitch</div>
|
||||
<div className={cn("hidden", twitchUser == null && "text-s flex")}>
|
||||
<Link href={(process.env.NEXT_PUBLIC_TWITCH_OAUTH_URL as string) + userId}>Connect your Twitch account!</Link>
|
||||
</div>
|
||||
<div className={cn("hidden", twitchUser != null && "text-s flex")}>
|
||||
<p>{twitchUser?.broadcasterId}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn("hidden", !loading && "inline-block")}>
|
||||
<button onClick={OnTwitchConnectionDelete} className={cn("hidden", twitchUser != null && "flex")}>
|
||||
<Avatar>
|
||||
<AvatarImage src="https://upload.wikimedia.org/wikipedia/en/b/ba/Red_x.svg" alt="delete" />
|
||||
<AvatarFallback></AvatarFallback>
|
||||
</Avatar>
|
||||
</button>
|
||||
</div>
|
||||
<Skeleton className={cn("visible rounded-full flex items-center bg-transparent", !loading && "hidden")}>
|
||||
<Skeleton className="h-12 w-12 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="pl-[10px] h-5 w-[100px]" />
|
||||
<Skeleton className="pl-[10px] h-4 w-[200px]" />
|
||||
</div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsPage;
|
||||
25
app/settings/layout.tsx
Normal file
25
app/settings/layout.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import SettingsNavigation from "@/components/navigation/settings";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { headers } from 'next/headers';
|
||||
import React from "react";
|
||||
|
||||
const SettingsLayout = async (
|
||||
{ children } : { children:React.ReactNode } ) => {
|
||||
const headersList = headers();
|
||||
const header_url = headersList.get('x-url') || "";
|
||||
console.log("HEADER URL: " + header_url)
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className={cn("hidden md:flex h-full w-[250px] z-30 flex-col fixed inset-y-0", header_url.endsWith("/settings") && "md:flex h-full w-full z-30 flex-col fixed inset-y-0")}>
|
||||
<SettingsNavigation />
|
||||
</div>
|
||||
|
||||
<main className={cn("md:pl-[250px] h-full", header_url.endsWith("/settings") && "hidden")}>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsLayout;
|
||||
10
app/settings/page.tsx
Normal file
10
app/settings/page.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
"use client";
|
||||
|
||||
const SettingsPage = () => {
|
||||
return (
|
||||
<div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsPage;
|
||||
250
app/settings/tts/filters/page.tsx
Normal file
250
app/settings/tts/filters/page.tsx
Normal file
@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import axios from "axios";
|
||||
import * as React from 'react';
|
||||
import { Calendar, Check, ChevronsUpDown, MoreHorizontal, Plus, Tags, Trash, User } from "lucide-react"
|
||||
import { ApiKey, TwitchConnection } from "@prisma/client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import * as z from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { DropdownMenuContent, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const TTSFiltersPage = () => {
|
||||
const { data: session, status } = useSession();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
const [moreOpen, setMoreOpen] = useState<number>(0)
|
||||
const [tag, setTag] = useState("blacklisted")
|
||||
const [open, setOpen] = useState<boolean>(false)
|
||||
const [userTags, setUserTag] = useState<{ username: string, tag: string }[]>([{ username: "test", tag:"blacklisted" }, { username: "hello world", tag:"moderator" }])
|
||||
const router = useRouter();
|
||||
|
||||
const labels = [
|
||||
"blacklisted",
|
||||
"priority"
|
||||
]
|
||||
|
||||
// Username blacklist
|
||||
const usernameFilteredFormSchema = z.object({
|
||||
username: z.string().trim().min(4).max(25).regex(new RegExp("[a-zA-Z0-9][a-zA-Z0-9_]{3, 24}"), "Must be a valid twitch username.")
|
||||
});
|
||||
|
||||
|
||||
const usernameFilteredForm = useForm({
|
||||
resolver: zodResolver(usernameFilteredFormSchema),
|
||||
defaultValues: {
|
||||
username: ""
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// const userFiltersData = (await axios.get("/api/settings/tts/filters/users")).data ?? {};
|
||||
// setApiKeys(userFiltersData)
|
||||
// console.log(userFiltersData);
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
};
|
||||
|
||||
fetchData().catch(console.error);
|
||||
}, []);
|
||||
|
||||
const onApiKeyAdd = async () => {
|
||||
///let usernames = blacklistedUsers.split("\n");
|
||||
//console.log(usernames)
|
||||
// try {
|
||||
// await axios.post("/api/settings/tts/filters/users", {
|
||||
// usernames: []
|
||||
// });
|
||||
// setUserFilters(userFilters.concat(usernames))
|
||||
// } catch (error) {
|
||||
// console.log("ERROR", error)
|
||||
// }
|
||||
}
|
||||
|
||||
const onApiKeyDelete = async (username: string) => {
|
||||
try {
|
||||
await axios.delete("/api/settings/tts/filters/users/" + username);
|
||||
//setUserFilters(userFilters.filter((u) => u != username))
|
||||
} catch (error) {
|
||||
console.log("ERROR", error)
|
||||
}
|
||||
}
|
||||
|
||||
const isLoading = usernameFilteredForm.formState.isSubmitting;
|
||||
|
||||
const addTwitchUser = (values: z.infer<typeof usernameFilteredFormSchema>) => {
|
||||
let response = null;
|
||||
console.log("TEST")
|
||||
console.log(values)
|
||||
|
||||
// try {
|
||||
// response = await axios.post("/api/settings/tts/filter/badges", values);
|
||||
// } catch (error) {
|
||||
// console.log("[CONNECTIONS/TWITCH/POST]", error);
|
||||
// return;
|
||||
// }
|
||||
|
||||
userTags.push({ username: values.username, tag: tag })
|
||||
setUserTag(userTags)
|
||||
usernameFilteredForm.reset();
|
||||
router.refresh();
|
||||
//window.location.reload();
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-2xl text-center pt-[50px]">TTS Filters</div>
|
||||
<div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
|
||||
<div>
|
||||
{userTags.map((user, index) => (
|
||||
<div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
|
||||
<p className="text-sm font-medium leading-none">
|
||||
<span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
|
||||
{user.tag}
|
||||
</span>
|
||||
<span className="text-muted-foreground">{user.username}</span>
|
||||
</p>
|
||||
<DropdownMenu open={(moreOpen & (1 << index)) > 0} onOpenChange={() => setMoreOpen((v) => v ^ (1 << index))}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[200px]">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<Tags className="mr-2 h-4 w-4" />
|
||||
Apply label
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent className="p-0">
|
||||
<Command>
|
||||
<CommandInput
|
||||
placeholder="Filter label..."
|
||||
autoFocus={true}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>No label found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{labels.map((label) => (
|
||||
<CommandItem
|
||||
key={label}
|
||||
value={label}
|
||||
onSelect={(value) => {
|
||||
userTags[index].tag = value
|
||||
setUserTag(userTags)
|
||||
setMoreOpen(0)
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => {
|
||||
userTags.splice(index, 1)
|
||||
setUserTag(userTags)
|
||||
}} className="text-red-600">
|
||||
<Trash className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
<Form {...usernameFilteredForm}>
|
||||
<form onSubmit={usernameFilteredForm.handleSubmit(addTwitchUser)}>
|
||||
<div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
|
||||
<Label className=" mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
|
||||
{tag}
|
||||
</Label>
|
||||
<FormField
|
||||
control={usernameFilteredForm.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-grow">
|
||||
<FormControl>
|
||||
<Input id="username" placeholder="Enter a twitch username" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button variant="ghost" size="sm" type="submit">
|
||||
<Plus />
|
||||
</Button>
|
||||
<DropdownMenu open={open} onOpenChange={setOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" {...usernameFilteredForm}>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[200px]">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<Tags className="mr-2 h-4 w-4" />
|
||||
Apply label
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent className="p-0">
|
||||
<Command>
|
||||
<CommandInput
|
||||
placeholder="Filter label..."
|
||||
autoFocus={true}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>No label found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{labels.map((label) => (
|
||||
<CommandItem
|
||||
value={label}
|
||||
onSelect={(value) => {
|
||||
setTag(value)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TTSFiltersPage;
|
||||
110
app/settings/tts/voices/page.tsx
Normal file
110
app/settings/tts/voices/page.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import axios from "axios";
|
||||
import * as React from 'react';
|
||||
import { Check, ChevronsUpDown } from "lucide-react"
|
||||
import { ApiKey, TwitchConnection, User } from "@prisma/client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
const TTSFiltersPage = () => {
|
||||
const { data: session, status } = useSession();
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [value, setValue] = useState<string>("")
|
||||
|
||||
const voices = [
|
||||
{
|
||||
value: "brian",
|
||||
label: "Brian",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "sveltekit",
|
||||
label: "SvelteKit",
|
||||
gender: "Male"
|
||||
},
|
||||
{
|
||||
value: "nuxt.js",
|
||||
label: "Nuxt.js",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "remix",
|
||||
label: "Remix",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
{
|
||||
value: "astro",
|
||||
label: "Astro",
|
||||
gender: "Male",
|
||||
language: "en"
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-2xl text-center pt-[50px]">TTS Voices</div>
|
||||
<div className="px-10 py-10 w-full h-full flex-grow inset-y-1/2">
|
||||
<div>
|
||||
<div id="defaultvoice" className="inline-block text-lg">Default Voice</div>
|
||||
<Label htmlFor="defaultvoice" className=" pl-[10px] inline-block">Voice used without any voice modifiers</Label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-[200px] justify-between"
|
||||
>
|
||||
{value
|
||||
? voices.find((voice) => voice.value === value)?.label
|
||||
: "Select voice..."}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search voice..." />
|
||||
<CommandEmpty>No framework found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{voices.map((voice) => (
|
||||
<CommandItem
|
||||
key={voice.value}
|
||||
value={voice.value}
|
||||
onSelect={(currentValue) => {
|
||||
setValue(currentValue === value ? "" : currentValue)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
value === voice.value ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{voice.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TTSFiltersPage;
|
||||
Reference in New Issue
Block a user