fix: readonly inputs only for generated tokens

Author: Satont

src/components/Callback.vue

@@ -72,12 +72,12 @@ async function fetchTokens(code: string) {
         <div class="form-item">
           <span class="whitespace-nowrap">Access Token</span>
           <Skeleton v-if="!accessToken" class="w-full h-8 rounded-md"></Skeleton>
-          <PasswordInput v-else v-model="accessToken"></PasswordInput>
+          <PasswordInput v-else v-model="accessToken" readonly></PasswordInput>
         </div>
         <div class="form-item">
           <span class="whitespace-nowrap">Refresh Token</span>
           <Skeleton v-if="!refreshToken" class="w-full h-8 rounded-md"></Skeleton>
-          <PasswordInput v-else v-model="refreshToken"></PasswordInput>
+          <PasswordInput v-else v-model="refreshToken" readonly></PasswordInput>
         </div>
       </div>
     </DialogContent>

src/components/ui/input/password-input.vue

@@ -10,6 +10,10 @@ const value = defineModel<string>({ required: true })
 const type = ref('password')
 const { toast } = useToast()
 
+defineProps<{
+  readonly?: boolean
+}>()
+
 function switchType() {
   type.value = type.value === 'password' ? 'text' : 'password'
 }
@@ -29,7 +33,7 @@ async function copy() {
 
 <template>
   <div class="relative w-full items-center">
-    <Input :type class="pr-10 outline-none" v-model="value" autocomplete="off" readonly />
+    <Input :type class="pr-10 outline-none" v-model="value" autocomplete="off" :readonly />
 
     <div class="absolute end-0 inset-y-0 flex items-center justify-center px-2">
       <Button @click="switchType" size="icon" variant="ghost">