frontend: Use our new icons

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/src/components/Icon.vue b/frontend/src/components/Icon.vue
new file mode 100644 (file)
index 0000000..9235414
--- /dev/null
+++ b/frontend/src/components/Icon.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+       defineProps<{
+               icon: string,
+
+               isSmall?: boolean,
+               isLeft?: boolean,
+       }>()
+</script>
+
+<template>
+       <span class="icon" :class="{ 'is-small' : isSmall, 'is-left' : isLeft, }">
+               <FontAwesomeIcon :icon="icon" />
+       </span>
+</template>

diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index da2266fd55dad29b3334b63f4ecaf91b45e460dc..41b5f457f10c6587d62f6663c0c4b00eaa61efde 100644 (file)
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -14,6 +14,7 @@
        const auth = useAuth();
 
        // Import components
+       import Icon from "@/components/Icon.vue";
        import Notification from "../components/Notification.vue"
 
        // Error string shown to the user in case something went wrong
@@ -58,9 +59,7 @@
                                                                <input class="input" type="text" v-model="username"
                                                                                :placeholder="t('Username')" required>
 
-                                                               <span class="icon is-small is-left">
-                                                                       <i class="fas fa-user"></i>
-                                                               </span>
+                                                               <Icon icon="user" is-small is-left />
                                                        </p>
                                                </div>
 
@@ -69,9 +68,7 @@
                                                                <input class="input" type="password" v-model="password"
                                                                                :placeholder="t('Password')" required autocomplete="off">
 
-                                                               <span class="icon is-small is-left">
-                                                                       <i class="fas fa-lock"></i>
-                                                               </span>
+                                                               <Icon icon="lock" is-small is-left />
                                                        </p>
                                                </div>