SevicheCC/m-oauth
1
0
Fork 0
mirror of https://github.com/Sevichecc/m-oauth.git synced 2025-04-30 06:59:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

faat: add alert

Browse source
This commit is contained in:
SevicheCC 2023-06-07 16:48:23 +08:00
parent 5edd4f4f14
commit a45c6f4f73
Signed by: SevicheCC
GPG key ID: C577000000000000
5 changed files with 53 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/page.tsx
View file

@ -1,10 +1,8 @@
import InputForm from "@/components/InputForm";
import ClientOnly from "@/components/ClientOnly"; import ClientOnly from "@/components/ClientOnly";
import { import {
Card, Card,
CardContent, CardContent,
CardDescription, CardDescription,
CardFooter,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
@ -13,18 +11,10 @@ import FormContainer from "@/components/FormContainer";
export default function Home() { export default function Home() {
return ( return (
<main> <main>
<div className="flex flex-col gap-5"> <div className="flex flex-col">
<Card className="mt-5">
<CardHeader>
<CardTitle>M-OAuth</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<ClientOnly> <ClientOnly>
<FormContainer/> <FormContainer />
</ClientOnly> </ClientOnly>
</CardContent>
</Card>
</div> </div>
</main> </main>
); );

26
components/FormContainer.tsx
View file

@ -3,13 +3,19 @@ import { useState } from "react";
import InputForm from "@/components/InputForm"; import InputForm from "@/components/InputForm";
import ResultTable from "@/components/tables/ResultTable"; import ResultTable from "@/components/tables/ResultTable";
import useCreateApp from "@/hooks/useCreateApp"; import useCreateApp from "@/hooks/useCreateApp";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { FormSchema } from "@/components/InputForm"; import { FormSchema } from "@/components/InputForm";
export type AppInfo = Pick<FormSchema, "instanceUrl" | "scopes">; export type AppInfo = Pick<FormSchema, "instanceUrl" | "scopes">;
const FormContainer = () => { const FormContainer = () => {
const { credentials, createApp } = useCreateApp() const { credentials, createApp } = useCreateApp();
const [appInfo, setAppInfo] = useState<AppInfo>({ const [appInfo, setAppInfo] = useState<AppInfo>({
instanceUrl: "", instanceUrl: "",
@ -18,9 +24,25 @@ const FormContainer = () => {
return ( return (
<> <>
<Card className="mt-5">
<CardHeader>
<CardTitle>M-OAuth</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<InputForm createApp={createApp} setAppInfo={setAppInfo} /> <InputForm createApp={createApp} setAppInfo={setAppInfo} />
</CardContent>
</Card>
{credentials && ( {credentials && (
<Card className="mt-5">
<CardHeader>
<CardTitle>Result</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<ResultTable credentials={credentials} appInfo={appInfo} /> <ResultTable credentials={credentials} appInfo={appInfo} />
</CardContent>
</Card>
)} )}
</> </>
); );

25
components/tables/ResultTable.tsx
View file

@ -12,10 +12,11 @@ import {
import { Credentials } from "@/lib/types"; import { Credentials } from "@/lib/types";
import { CopyButton } from "@/components/ui/copybutton"; import { CopyButton } from "@/components/ui/copybutton";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";
import { getAuth } from "@/lib/utils"; import { getAuth } from "@/lib/utils";
import { AppInfo } from "../FormContainer"; import { AppInfo } from "../FormContainer";
import { KeyRound } from "lucide-react";
interface ResultTableProps { interface ResultTableProps {
credentials: Credentials; credentials: Credentials;
appInfo: AppInfo; appInfo: AppInfo;
@ -43,8 +44,9 @@ const ResultTable: React.FC<ResultTableProps> = ({ credentials, appInfo }) => {
vapid_key, vapid_key,
} = credentials; } = credentials;
const isLocal = redirect_uri === "urn:ietf:wg:oauth:2.0:oob";
return ( return (
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-5">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@ -64,11 +66,20 @@ const ResultTable: React.FC<ResultTableProps> = ({ credentials, appInfo }) => {
</TableBody> </TableBody>
)} )}
</Table> </Table>
{redirect_uri === "urn:ietf:wg:oauth:2.0:oob" && ( {isLocal ? (
<Button <Alert>
onClick={() => getAuth(instanceUrl, client_id, scopes)} <KeyRound className="h-4 w-4" />
variant="outline" <AlertTitle>Need an Access Token?</AlertTitle>
> <AlertDescription>
Set the Redirect URI as{" "}
<code className="mt-2 inline-block rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold">
urn:ietf:wg:oauth:2.0:oob
</code>{" "}
to obtain your access token.
</AlertDescription>
</Alert>
) : (
<Button onClick={() => getAuth(instanceUrl, client_id, scopes)}>
<ExternalLink className="mr-2 h-4 w-4" /> <ExternalLink className="mr-2 h-4 w-4" />
Generate Access Token Generate Access Token
</Button> </Button>

4
package.json
View file

@ -15,9 +15,7 @@
"@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@types/node": "20.2.5", "@types/node": "20.2.5",
"@types/react": "18.2.7", "@types/react": "18.2.7",
"@types/react-dom": "18.2.4", "@types/react-dom": "18.2.4",
@ -25,7 +23,7 @@
"class-variance-authority": "^0.6.0", "class-variance-authority": "^0.6.0",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"eslint-config-next": "13.4.4", "eslint-config-next": "13.4.4",
"lucide-react": "^0.230.0", "lucide-react": "^0.240.0",
"masto": "^5.11.3", "masto": "^5.11.3",
"next": "13.4.4", "next": "13.4.4",
"postcss": "^8.4.24", "postcss": "^8.4.24",

130
pnpm-lock.yaml
View file

@ -13,15 +13,9 @@ dependencies:
'@radix-ui/react-label': '@radix-ui/react-label':
specifier: ^2.0.2 specifier: ^2.0.2
version: 2.0.2(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) version: 2.0.2(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-separator':
specifier: ^1.0.3
version: 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot': '@radix-ui/react-slot':
specifier: ^1.0.2 specifier: ^1.0.2
version: 1.0.2(@types/react@18.2.7)(react@18.2.0) version: 1.0.2(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-tabs':
specifier: ^1.0.4
version: 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@types/node': '@types/node':
specifier: 20.2.5 specifier: 20.2.5
version: 20.2.5 version: 20.2.5
@ -44,8 +38,8 @@ dependencies:
specifier: 13.4.4 specifier: 13.4.4
version: 13.4.4(eslint@8.41.0)(typescript@5.0.4) version: 13.4.4(eslint@8.41.0)(typescript@5.0.4)
lucide-react: lucide-react:
specifier: ^0.230.0 specifier: ^0.240.0
version: 0.230.0(react@18.2.0) version: 0.240.0(react@18.2.0)
masto: masto:
specifier: ^5.11.3 specifier: ^5.11.3
version: 5.11.3 version: 5.11.3
@ -398,30 +392,6 @@ packages:
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)
dev: false dev: false
/@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.22.3
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot': 1.0.2(@types/react@18.2.7)(react@18.2.0)
'@types/react': 18.2.7
'@types/react-dom': 18.2.4
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.7)(react@18.2.0): /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.7)(react@18.2.0):
resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
peerDependencies: peerDependencies:
@ -450,20 +420,6 @@ packages:
react: 18.2.0 react: 18.2.0
dev: false dev: false
/@radix-ui/react-direction@1.0.1(@types/react@18.2.7)(react@18.2.0):
resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
dependencies:
'@babel/runtime': 7.22.3
'@types/react': 18.2.7
react: 18.2.0
dev: false
/@radix-ui/react-id@1.0.1(@types/react@18.2.7)(react@18.2.0): /@radix-ui/react-id@1.0.1(@types/react@18.2.7)(react@18.2.0):
resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
peerDependencies: peerDependencies:
@ -543,56 +499,6 @@ packages:
react-dom: 18.2.0(react@18.2.0) react-dom: 18.2.0(react@18.2.0)
dev: false dev: false
/@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.22.3
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-direction': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-id': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@types/react': 18.2.7
'@types/react-dom': 18.2.4
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.22.3
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@types/react': 18.2.7
'@types/react-dom': 18.2.4
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-slot@1.0.2(@types/react@18.2.7)(react@18.2.0): /@radix-ui/react-slot@1.0.2(@types/react@18.2.7)(react@18.2.0):
resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
peerDependencies: peerDependencies:
@ -608,34 +514,6 @@ packages:
react: 18.2.0 react: 18.2.0
dev: false dev: false
/@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.22.3
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-direction': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-id': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.7)(react@18.2.0)
'@types/react': 18.2.7
'@types/react-dom': 18.2.4
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.7)(react@18.2.0): /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.7)(react@18.2.0):
resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
peerDependencies: peerDependencies:
@ -2458,8 +2336,8 @@ packages:
yallist: 4.0.0 yallist: 4.0.0
dev: false dev: false
/lucide-react@0.230.0(react@18.2.0): /lucide-react@0.240.0(react@18.2.0):
resolution: {integrity: sha512-/Cbul7Jfq6aZ2RIsYZXH1jWkUVEP3lK8d5uBcggxf0u1oSkPcfKo/PIXhya5HEpmuA/RO6NmuNp3moOVloQEdA==} resolution: {integrity: sha512-75lFCbrvSs1ixJUwDN2XLcUTMUIRV8bN/TrBjZdcGHIZNoczLQRnb7zJSvzZhCFyMymT6pXNBB61oaE1JerlrA==}
peerDependencies: peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0 react: ^16.5.1 || ^17.0.0 || ^18.0.0
dependencies: dependencies: