FIX: Better passphrase display on mobile devices

frontend/src/components/MacAuthCard.vue

@@ -47,25 +47,18 @@
         <template v-slot:cell(wpa_key)="data">
                 <span v-if="data.item.wpa_key !== null">
                   <b-button-group class="fullwidth">
-                    <b-button :id="'show-wpa-key-' + bcd.name + '-' + data.index" variant="outline-primary"
-                              tabindex="0" href="#">
-                      <font-awesome-icon icon="fa-solid fa-eye"></font-awesome-icon>
-                    </b-button>
                     <b-button @click="showQR(data.item)"
                               :id="'show-wpa-key-' + bcd.name + '-' + data.index+'-qr'"
                               variant="outline-primary"
                               tabindex="0" href="#">
-                      <font-awesome-icon icon="fa-solid fa-qrcode"></font-awesome-icon>
+                      <font-awesome-icon icon="fa-solid fa-eye"></font-awesome-icon>
                     </b-button>
                     <b-tooltip :target="'show-wpa-key-' + bcd.name + '-' + data.index+'-qr'"
-                               triggers="hover" variant="primary" placement="right">
-                      WiFi-QR-Code anzeigen
+                               triggers="hover" variant="primary" placement="bottom">
+                      WiFi-Passwort und WiFi-QR-Code anzeigen
                     </b-tooltip>
                   </b-button-group>
-                <b-popover :target="'show-wpa-key-' + bcd.name + '-' + data.index"
-                           triggers="focus" custom-class="popover-wide">
-                  <CopyField :text="data.item.wpa_key" code/>
-                </b-popover></span>
+                </span>
           <span v-else class="text-center"><p><font-awesome-icon icon="fa-solid fa-eye-slash">
                   </font-awesome-icon></p></span>
         </template>
@@ -103,11 +96,10 @@
 </template>
 
 <script>
-import CopyField from '@/components/CopyField'
 
 export default {
   name: 'MacAuthCard',
-  components: { CopyField },
+  components: {},
   data() {
     return {
       macauth_fields: [

frontend/src/views/macauth/MACAuth.vue

@@ -40,6 +40,8 @@
         <p class="text-center">
           <qrcode-vue v-if="qr_item" :value="'WIFI:S:KIT-IoT;T:WPA;P:'+encodeQr(qr_item.wpa_key)+';;'"></qrcode-vue>
         </p>
+        <p><b>Passwort:</b></p>
+        <CopyField :text="qr_item.wpa_key" code/>
       </b-modal>
     </Loading>
   </div>
@@ -55,10 +57,11 @@ import MACAuthService from '@/api-services.gen/macauth.client'
 import PaginatorList from '@/components/PaginatorList'
 import QrcodeVue from 'qrcode.vue'
 import MacAuthCard from '../../components/MacAuthCard'
+import CopyField from '@/components/CopyField'
 
 export default {
   name: 'macauth',
-  components: { MacAuthCard, PaginatorList, DBEditor, Loading, QrcodeVue },
+  components: { MacAuthCard, PaginatorList, DBEditor, Loading, QrcodeVue, CopyField },
   data() {
     return {
       qr_item: null,