fix(web-ui): modernize UI (#4631)

src_assets/common/assets/web/pin.html

@@ -11,9 +11,22 @@
     <h1 class="my-4 text-center">{{ $t('pin.pin_pairing') }}</h1>
     <form class="form d-flex flex-column align-items-center" id="form" @submit.prevent="registerDevice">
       <div class="card flex-column d-flex p-4 mb-4">
-        <input type="text" pattern="\d*" :placeholder="`${$t('navbar.pin')}`" autofocus id="pin-input" class="form-control mt-2" required />
-        <input type="text" :placeholder="`${$t('pin.device_name')}`" id="name-input" class="form-control my-4" required />
-        <button class="btn btn-primary">{{ $t('pin.send') }}</button>
+        <div class="input-group mt-2">
+          <span class="input-group-text">
+            <hash :size="18" class="icon"></hash>
+          </span>
+          <input type="text" pattern="\d*" :placeholder="`${$t('navbar.pin')}`" autofocus id="pin-input" class="form-control" required />
+        </div>
+        <div class="input-group my-4">
+          <span class="input-group-text">
+            <monitor :size="18" class="icon"></monitor>
+          </span>
+          <input type="text" :placeholder="`${$t('pin.device_name')}`" id="name-input" class="form-control" required />
+        </div>
+        <button class="btn btn-primary">
+          <forward :size="18" class="icon"></forward>
+          {{ $t('pin.send') }}
+        </button>
       </div>
       <div class="alert alert-warning">
         <b>{{ $t('_common.warning') }}</b> {{ $t('pin.warning_msg') }}
@@ -27,10 +40,18 @@
   import { createApp } from 'vue'
   import { initApp } from './init'
   import Navbar from './Navbar.vue'
+  import {
+    Forward,
+    Hash,
+    Monitor,
+  } from 'lucide-vue-next'
 
   let app = createApp({
     components: {
-      Navbar
+      Navbar,
+      Forward,
+      Hash,
+      Monitor,
     },
     inject: ['i18n'],
     methods: {
@@ -40,10 +61,10 @@
         document.querySelector("#status").innerHTML = "";
         let b = JSON.stringify({pin: pin, name: name});
         fetch("./api/pin", {
-          method: "POST", 
+          method: "POST",
           headers: {
             'Content-Type': 'application/json'
-          }, 
+          },
           body: b
         })
           .then((response) => response.json())