🐛 Fix spells page

DysonNetwork.Pass/Client/src/views/spells.vue

@@ -9,42 +9,62 @@
       <div v-else-if="!!spell">
         <p class="mb-2">Magic spell for {{ spellTypes[spell.type] ?? 'unknown' }}</p>
         <div class="flex items-center gap-1">
-          <n-icon size="18"><account-circle-outlined /></n-icon>
+          <n-icon size="18">
+            <account-circle-outlined/>
+          </n-icon>
           <b>@{{ spell.account.name }}</b>
         </div>
         <div class="flex items-center gap-1">
-          <n-icon size="18"><play-arrow-filled /></n-icon>
+          <n-icon size="18">
+            <play-arrow-filled/>
+          </n-icon>
           <span>Available at</span>
           <b>{{ new Date(spell.created_at ?? spell.affected_at).toLocaleString() }}</b>
         </div>
         <div class="flex items-center gap-1" v-if="spell.expired_at">
-          <n-icon size="18"><date-range-filled /></n-icon>
+          <n-icon size="18">
+            <date-range-filled/>
+          </n-icon>
           <span>Until</span>
           <b>{{ spell.expired_at.toString() }}</b>
         </div>
         <div class="mt-4">
-          <n-input v-if="spell.type == 3" v-model:value="newPassword" />
+          <n-input
+            v-if="spell.type == 3"
+            v-model:value="newPassword"
+            placeholder="New password"
+            type="password"
+            show-password-on="mousedown"
+            class="mb-3"
+          >
+            <template #prefix>
+              <n-icon :component="LockOutlined"/>
+            </template>
+          </n-input>
           <n-button type="primary" :loading="submitting" @click="applySpell">
-            <template #icon><check-filled /></template>
+            <template #icon>
+              <check-filled/>
+            </template>
             Apply
           </n-button>
         </div>
       </div>
-      <n-spin v-else size="small" />
+      <n-spin v-else size="small"/>
     </n-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NCard, NAlert, NSpin, NIcon, NButton, NInput } from 'naive-ui'
+import {NCard, NAlert, NSpin, NIcon, NButton, NInput} from 'naive-ui'
 import {
   AccountCircleOutlined,
   PlayArrowFilled,
   DateRangeFilled,
   CheckFilled,
+  LockOutlined
 } from '@vicons/material'
-import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import {onMounted, ref} from 'vue'
+import {useRoute} from 'vue-router'
 
 const route = useRoute()
 
@@ -79,8 +99,8 @@ async function applySpell() {
   submitting.value = true
   const resp = await fetch(`/api/spells/${encodeURIComponent(spellWord)}/apply`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: newPassword.value ? JSON.stringify({ new_password: newPassword.value }) : null,
+    headers: {'Content-Type': 'application/json'},
+    body: newPassword.value ? JSON.stringify({new_password: newPassword.value}) : null,
   })
   if (resp.status === 200) {
     done.value = true