- {field.state.meta.errors[0]?.toString()} -
+- Current user agent: {platformService.userAgent} + Current default user agent: {platformService.userAgent}
{field.state.meta.errors && (Hello "/_app/credential3rd/detail/$id"!
+function Credential3rdDetailRouteComponent() {
+ const { id } = Route.useParams();
+ const navigate = useNavigate();
+ const [showPassword, setShowPassword] = useState(false);
+
+ const { loading, error, data } = useQuery
+
+
+
+
+
+
+
+ );
}
diff --git a/apps/webui/src/presentation/routes/_app/credential3rd/edit.$id.tsx b/apps/webui/src/presentation/routes/_app/credential3rd/edit.$id.tsx
new file mode 100644
index 0000000..4f89961
--- /dev/null
+++ b/apps/webui/src/presentation/routes/_app/credential3rd/edit.$id.tsx
@@ -0,0 +1,292 @@
+import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+import { DetailEmptyView } from '@/components/ui/detail-empty-view';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { QueryErrorView } from '@/components/ui/query-error-view';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { useAppForm } from '@/components/ui/tanstack-form';
+import { Textarea } from '@/components/ui/textarea';
+import {
+ type Credential3rdDetailDto,
+ Credential3rdUpdateSchema,
+ GET_CREDENTIAL_3RD_DETAIL,
+ UPDATE_CREDENTIAL_3RD,
+} from '@/domains/recorder/schema/credential3rd';
+import type {
+ Credential3rdTypeEnum,
+ GetCredential3rdDetailQuery,
+ UpdateCredential3rdMutation,
+ UpdateCredential3rdMutationVariables,
+} from '@/infra/graphql/gql/graphql';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useMutation, useQuery } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { ArrowLeft, Eye, EyeOff, Save, X } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+
+export const Route = createFileRoute('/_app/credential3rd/edit/$id')({
+ component: Credential3rdEditRouteComponent,
+ staticData: {
+ breadcrumb: { label: 'Edit' },
+ } satisfies RouteStateDataOption,
+});
+
+function FormView({
+ credential,
+ onCompleted,
+}: {
+ credential: Credential3rdDetailDto;
+ onCompleted: VoidFunction;
+}) {
+ const navigate = useNavigate();
+ const [showPassword, setShowPassword] = useState(false);
+ const togglePasswordVisibility = () => {
+ setShowPassword((prev) => !prev);
+ };
+
+ const handleBack = () => {
+ navigate({
+ to: '/credential3rd/manage',
+ });
+ };
+
+ const [updateCredential, { loading: updating }] = useMutation<
+ UpdateCredential3rdMutation['credential3rdUpdate'],
+ UpdateCredential3rdMutationVariables
+ >(UPDATE_CREDENTIAL_3RD, {
+ onCompleted,
+ onError: (error) => {
+ toast('Update credential failed', {
+ description: error.message,
+ });
+ },
+ });
+
+ const form = useAppForm({
+ defaultValues: {
+ credentialType: credential.credentialType,
+ username: credential.username,
+ password: credential.password,
+ userAgent: credential.userAgent,
+ },
+ validators: {
+ onBlur: Credential3rdUpdateSchema,
+ onSubmit: Credential3rdUpdateSchema,
+ },
+ onSubmit: (form) => {
+ const value = form.value;
+ updateCredential({
+ variables: {
+ data: value,
+ filters: {
+ id: {
+ eq: credential.id,
+ },
+ },
+ },
+ });
+ },
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+ Credential detail
++ View and manage credential #{credential.id} +
+
+
+
+
+
+ {credential.credentialType}
+
+
+
+ Credential information
+
+ View credential detail
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {credential.id}
+
+
+
+
+
+
+ {credential.credentialType}
+
+
+
+
+
+
+
+
+ {credential.username || 'Not set'}
+
+
+
+
+
+
+
+ {showPassword ? credential.password || '-' : '••••••••'}
+
+ {credential.password && (
+
+ )}
+
+
+
+
+
+
+
+ {credential.userAgent || '-'}
+
+
+
+
+
+
+
+
+
+
+ {format(
+ new Date(credential.createdAt),
+ 'yyyy-MM-dd HH:mm:ss'
+ )}
+
+
+
+
+
+
+
+ {format(
+ new Date(credential.updatedAt),
+ 'yyyy-MM-dd HH:mm:ss'
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Credential detail
++ View and manage credential #{credential.id} +
+
+
+
+
+
+
+ {credential.credentialType}
+
+
+
+ Credential information
+
+ Edit credential information
+
+
+