feat(webapp): migrate from @mdi/font to @mdi/js

Use tree shakeable version instead of big webfont.
desec-io · Jan 10, 2024 · 82814f8 · 82814f8
1 parent 8ce07b2
commit 82814f8
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 24 deletions.
diff --git a/www/webapp/package.json b/www/webapp/package.json
@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.3",
-    "@mdi/font": "^7.2.96",
     "@mdi/js": "~7.3.67",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",

diff --git a/www/webapp/src/components/ActivateAccountActionHandler.vue b/www/webapp/src/components/ActivateAccountActionHandler.vue
@@ -7,7 +7,7 @@
             <v-text-field
                     v-model="payload.captcha.solution"
                     label="Type CAPTCHA text here"
-                    prepend-icon="mdi-account-check"
+                    :prepend-icon="mdiAccountCheck"
                     outlined
                     required
                     :disabled="working"
@@ -38,12 +38,12 @@
             </audio>
             <br/>
             <v-btn-toggle>
-              <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>mdi-refresh</v-icon></v-btn>
+              <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
             </v-btn-toggle>
             &nbsp;
             <v-btn-toggle v-model="captcha_kind">
-              <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
-              <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-ear-hearing</v-icon></v-btn>
+              <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEye }}</v-icon></v-btn>
+              <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEarHearing }}</v-icon></v-btn>
             </v-btn-toggle>
           </v-col>
         </v-row>
@@ -66,6 +66,7 @@
 <script>
   import axios from 'axios';
   import GenericActionHandler from "./GenericActionHandler.vue"
+  import {mdiAccountCheck, mdiEarHearing, mdiEye, mdiRefresh} from "@mdi/js";
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
@@ -82,6 +83,11 @@
       captcha: null,
       captcha_required: false,
 
+      mdiAccountCheck: mdiAccountCheck,
+      mdiEarHearing: mdiEarHearing,
+      mdiEye: mdiEye,
+      mdiRefresh: mdiRefresh,
+
       /* captcha field */
       captchaSolution: '',
       captcha_rules: [v => !!v || 'Please enter the text displayed in the picture so we are (somewhat) convinced you are human'],

diff --git a/www/webapp/src/components/ResetPasswordActionHandler.vue b/www/webapp/src/components/ResetPasswordActionHandler.vue
@@ -3,7 +3,7 @@
     <div class="text-center" v-if="!success">
         <v-text-field
                 v-model="payload.new_password"
-                :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
+                :append-icon="show ? mdiEyeOff : mdiEye"
                 label="New password"
                 required
                 :disabled="working"
@@ -31,11 +31,14 @@
 
 <script>
   import GenericActionHandler from "./GenericActionHandler.vue"
+  import {mdiEye, mdiEyeOff} from "@mdi/js";
 
   export default {
     name: 'ResetPasswordActionHandler',
     extends: GenericActionHandler,
     data: () => ({
+      mdiEyeOff: mdiEyeOff,
+      mdiEye: mdiEye,
       rules: {
         required: value => !!value || 'Required.',
         min: v => (v !== undefined && v.length >= 8) || 'Min 8 characters',

diff --git a/www/webapp/src/main.js b/www/webapp/src/main.js
@@ -9,7 +9,6 @@ import "@fontsource/roboto/400.css" /* regular */
 import "@fontsource/roboto/400-italic.css" /* regular-italic */
 import "@fontsource/roboto/500.css" /* medium */
 import "@fontsource/roboto/700.css" /* bold */
-import '@mdi/font/css/materialdesignicons.css'
 import {createPinia, PiniaVuePlugin} from "pinia";
 
 

diff --git a/www/webapp/src/views/ChangeEmail.vue b/www/webapp/src/views/ChangeEmail.vue
@@ -46,7 +46,7 @@
                             />
                             <v-text-field
                                     v-model="password"
-                                    :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
+                                    :append-icon="show ? mdiEyeOff : mdiEye"
                                     prepend-icon="mdi-blank"
                                     outlined
                                     label="Password"
@@ -62,7 +62,7 @@
                             <v-text-field
                                     v-model="new_email"
                                     label="New Email"
-                                    prepend-icon="mdi-email"
+                                    :prepend-icon="mdiEmail"
                                     outlined
                                     required
                                     :rules="[rules.required, rules.email]"
@@ -92,8 +92,9 @@
 <script>
   import { HTTP, withWorking ,digestError} from '@/utils';
   import {email_pattern} from '@/validation';
-  
+
   import ErrorAlert from "@/components/ErrorAlert.vue";
+  import {mdiEmail, mdiEye, mdiEyeOff} from "@mdi/js";
 
   export default {
     name: 'ChangeEmail',
@@ -112,6 +113,10 @@
       },
       show: false,
 
+      mdiEmail: mdiEmail,
+      mdiEyeOff: mdiEyeOff,
+      mdiEye: mdiEye,
+
       /* password field */
       password: '',
       password_errors: [],

diff --git a/www/webapp/src/views/DeleteAccount.vue b/www/webapp/src/views/DeleteAccount.vue
@@ -44,7 +44,7 @@
                             />
                             <v-text-field
                                     v-model="password"
-                                    :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
+                                    :append-icon="show ? mdiEyeOff : mdiEye"
                                     prepend-icon="mdi-blank"
                                     outlined
                                     label="Password"
@@ -78,11 +78,14 @@
 <script>
   import { HTTP, withWorking, digestError } from '@/utils';
   import ErrorAlert from "@/components/ErrorAlert.vue";
+  import {mdiEye, mdiEyeOff} from "@mdi/js";
 
   export default {
     name: 'DeleteAccount',
     components: {ErrorAlert},
     data: () => ({
+      mdiEyeOff: mdiEyeOff,
+      mdiEye: mdiEye,
       valid: false,
       working: false,
       done: false,

diff --git a/www/webapp/src/views/HomePage.vue b/www/webapp/src/views/HomePage.vue
@@ -491,7 +491,7 @@ export default {
         id: 'news-20231226001',
         start: new Date(Date.UTC(2023, 12 - 1, 26)),  // first day of showing
         end: new Date(Date.UTC(2024, 1 - 1, 8)),  // first day of not showing
-        icon: 'mdi-heart-broken',
+        icon: mdiHeartBroken,
         teaser: "Due to a recent spike in abusive domain registrations, new accounts need manual verification before " +
             "domains can be created. Please contact support explaining your use case to enable domain creation.",
       },

diff --git a/www/webapp/src/views/LoginPage.vue b/www/webapp/src/views/LoginPage.vue
@@ -40,7 +40,7 @@
               <v-text-field
                 v-model="password"
                 label="Password"
-                :append-icon="hide_password ? 'mdi-eye' : 'mdi-eye-off'"
+                :append-icon="hide_password ? mdiEyeOff : mdiEye"
                 :type="hide_password ? 'password' : 'text'"
                 outlined
                 required
@@ -89,6 +89,7 @@
 import { HTTP, digestError } from '@/utils';
 import ErrorAlert from "@/components/ErrorAlert.vue";
 import {useUserStore} from "@/store/user";
+import {mdiEye, mdiEyeOff} from "@mdi/js";
 
 export default {
   name: 'LoginPage',
@@ -97,6 +98,8 @@ export default {
   },
   data: () => ({
     user: useUserStore(),
+    mdiEyeOff: mdiEyeOff,
+    mdiEye: mdiEye,
     valid: false,
     working: false,
     email: '',

diff --git a/www/webapp/src/views/ResetPassword.vue b/www/webapp/src/views/ResetPassword.vue
@@ -42,7 +42,7 @@
                             <v-text-field
                                     v-model="email"
                                     label="Email"
-                                    prepend-icon="mdi-email"
+                                    :prepend-icon="mdiEmail"
                                     outlined
                                     required
                                     :rules="email_rules"
@@ -59,7 +59,7 @@
                                     <v-text-field
                                             v-model="captchaSolution"
                                             label="Type CAPTCHA text here"
-                                            prepend-icon="mdi-account-check"
+                                            :prepend-icon="mdiAccountCheck"
                                             outlined
                                             required
                                             :rules="captcha_rules"
@@ -89,12 +89,12 @@
                                     </audio>
                                     <br/>
                                     <v-btn-toggle>
-                                      <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>mdi-refresh</v-icon></v-btn>
+                                      <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
                                     </v-btn-toggle>
                                     &nbsp;
                                     <v-btn-toggle v-model="captcha_kind">
-                                      <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
-                                      <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-ear-hearing</v-icon></v-btn>
+                                      <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEye }}</v-icon></v-btn>
+                                      <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEarHearing }}</v-icon></v-btn>
                                     </v-btn-toggle>
                                   </v-col>
                                 </v-row>
@@ -122,6 +122,7 @@
   import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
   import ErrorAlert from '@/components/ErrorAlert.vue';
+  import {mdiAccountCheck, mdiEarHearing, mdiEmail, mdiEye, mdiRefresh} from "@mdi/js";
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
@@ -141,6 +142,12 @@
       errors: [],
       captcha: null,
 
+      mdiAccountCheck: mdiAccountCheck,
+      mdiEarHearing: mdiEarHearing,
+      mdiEmail: mdiEmail,
+      mdiEye: mdiEye,
+      mdiRefresh: mdiRefresh,
+
       /* email field */
       email: '',
       email_rules: [v => !!email_pattern.test(v || '') || 'We need an email address for account recovery and technical support.'],

diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
@@ -32,7 +32,7 @@
               <v-text-field
                       v-model="email"
                       label="Email"
-                      prepend-icon="mdi-email"
+                      :prepend-icon="mdiEmail"
                       outlined
                       required
                       :rules="email_rules"
@@ -48,7 +48,7 @@
                       hint="You can also use our REST API or web interface to create domains."
                       label="Do you want to set up a domain right away?"
                       persistent-hint
-                      prepend-icon="mdi-dns"
+                      :prepend-icon="mdiDns"
               >
                 <v-radio label="Configure your own domain (Managed DNS or dynDNS)." value="custom" tabindex="2"></v-radio>
                 <v-radio :label="`Register a new domain under ${LOCAL_PUBLIC_SUFFIXES[0]} (dynDNS).`" value="dynDNS" tabindex="2"></v-radio>
@@ -82,7 +82,7 @@
                     <v-text-field
                         v-model="captchaSolution"
                         label="Type CAPTCHA text here"
-                        prepend-icon="mdi-account-check"
+                        :prepend-icon="mdiAccountCheck"
                         outlined
                         required
                         :rules="captcha_rules"
@@ -112,12 +112,12 @@
                     </audio>
                     <br/>
                     <v-btn-toggle>
-                      <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>mdi-refresh</v-icon></v-btn>
+                      <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
                     </v-btn-toggle>
                     &nbsp;
                     <v-btn-toggle v-model="captcha_kind">
-                      <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
-                      <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-ear-hearing</v-icon></v-btn>
+                      <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEye }}</v-icon></v-btn>
+                      <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>{{ mdiEarHearing }}</v-icon></v-btn>
                     </v-btn-toggle>
                   </v-col>
                 </v-row>
@@ -177,6 +177,7 @@
   import {domain_pattern, email_pattern} from '@/validation';
   import {digestError} from '@/utils';
   import ErrorAlert from "@/components/ErrorAlert.vue";
+  import {mdiAccountCheck, mdiDns, mdiEarHearing, mdiEmail, mdiEye, mdiRefresh} from "@mdi/js";
 
   const LOCAL_PUBLIC_SUFFIXES = import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');
 
@@ -199,6 +200,13 @@
       captcha: null,
       LOCAL_PUBLIC_SUFFIXES: LOCAL_PUBLIC_SUFFIXES,
 
+      mdiAccountCheck: mdiAccountCheck,
+      mdiDns: mdiDns,
+      mdiEarHearing: mdiEarHearing,
+      mdiEmail: mdiEmail,
+      mdiEye: mdiEye,
+      mdiRefresh: mdiRefresh,
+
       /* email field */
       email: '',
       email_rules: [v => !!email_pattern.test(v || '') || 'We need an email address for account recovery and technical support.'],