feat: add token access to user

components/dashboard/settings/profile/generate-token.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { Label } from "@/components/ui/label";
+
+export const GenerateToken = () => {
+	const { data, refetch } = api.auth.get.useQuery();
+
+	const { mutateAsync: generateToken, isLoading: isLoadingToken } =
+		api.auth.generateToken.useMutation();
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
+				<div>
+					<CardTitle className="text-xl">API/CLI</CardTitle>
+					<CardDescription>
+						Generate a token to access the API/CLI
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-2">
+				<div className="flex flex-row gap-2 max-sm:flex-wrap justify-end items-end">
+					<div className="grid w-full gap-8">
+						<div className="flex flex-col gap-2">
+							<Label>Token</Label>
+							<ToggleVisibilityInput value={data?.token || ""} disabled />
+						</div>
+					</div>
+					<Button
+						type="button"
+						isLoading={isLoadingToken}
+						onClick={async () => {
+							await generateToken().then(() => {
+								refetch();
+								toast.success("Token generated");
+							});
+						}}
+					>
+						Generate
+					</Button>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

components/dashboard/settings/profile/profile-form.tsx

@@ -185,18 +185,6 @@ export const ProfileForm = () => {
 						</div>
 					</form>
 				</Form>
-				<div className="flex flex-row gap-4 pt-10">
-					<Input placeholder="Token" disabled value={data?.token || ""} />
-					<Button
-						type="button"
-						isLoading={isLoadingToken}
-						onClick={async () => {
-							await generateToken();
-						}}
-					>
-						Save
-					</Button>
-				</div>
 			</CardContent>
 		</Card>
 	);

components/dashboard/settings/show.tsx

@@ -32,7 +32,6 @@ export const ShowSettings = () => {
 					<ShowCertificates />
 					<WebDomain />
 					<WebServer />
-
 					<ShowUsers />
 				</>
 			)}