From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 4 Jul 2025 15:21:52 +0000 (+0000)
Subject: frontend: Use our new icons
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=11dde16288a83f370cabb56908c5b6441dd0f091;p=pbs.git

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
index 00000000..9235414d
--- /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 da2266fd..41b5f457 100644
--- 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>