Improved profile picture with initials

frontend/src/components/ProfilePicture.vue

@@ -8,7 +8,7 @@
 		onerror="this.src='/assets/notes.png'; this.onerror=''"
 	/>
 	<div class="profile-picture using-initials" :class="avatar.color" v-else>
-		{{ initials }}
+		<span>{{ initials }}</span>
 	</div>
 </template>
 
@@ -32,6 +32,8 @@ export default {
 	computed: {
 		initials() {
 			return this.name
+				.replaceAll(/[^A-Za-z ]+/g, "")
+				.replaceAll(/ +/g, " ")
 				.split(" ")
 				.map(word => word.charAt(0))
 				.splice(0, 2)
@@ -60,9 +62,13 @@ export default {
 		background-color: #ddd;
 		font-family: "Inter", sans-serif;
 		font-weight: 400;
-		font-size: 50px;
 		user-select: none;
 		-webkit-user-select: none;
+
+		span {
+			font-size: 40px; // 2/5th of .profile-picture height/width
+		}
+
 		&.blue {
 			background-color: var(--primary-color);
 			color: var(--white);

frontend/src/pages/Admin/tabs/Users.vue

@@ -209,7 +209,10 @@ body {
 .profile-picture {
 	max-width: 50px !important;
 	max-height: 50px !important;
-	font-size: 25px !important;
+}
+
+/deep/ .profile-picture.using-initials span {
+	font-size: 20px; // 2/5th of .profile-picture height/width
 }
 
 td {

frontend/src/pages/Settings/Tabs/Profile.vue

@@ -138,6 +138,9 @@ export default {
 			}
 		},
 		changeName() {
+			this.modifiedUser.name = this.modifiedUser.name
+				.replaceAll(/ +/g, " ")
+				.trim();
 			const { name } = this.modifiedUser;
 
 			if (!validation.isLength(name, 1, 64))
@@ -147,6 +150,10 @@ export default {
 				return new Toast(
 					"Invalid name format. Only letters, spaces, apostrophes and hyphens are allowed."
 				);
+			if (name.replaceAll(/[ .'-]/g, "").length === 0)
+				return new Toast(
+					"Invalid name format. Only letters, spaces, apostrophes and hyphens are allowed, and there has to be at least one letter."
+				);
 
 			this.$refs.saveButton.status = "disabled";
 
@@ -289,7 +296,10 @@ export default {
 			margin-right: 10px;
 			width: 50px;
 			height: 50px;
-			font-size: 25px;
+		}
+
+		/deep/ .profile-picture.using-initials span {
+			font-size: 20px; // 2/5th of .profile-picture height/width
 		}
 	}
 }

frontend/src/pages/Station/Sidebar/Users.vue

@@ -167,7 +167,12 @@ export default {
 					margin-right: 10px;
 					width: 35px;
 					height: 35px;
-					font-size: 15px;
+				}
+
+				/deep/ .profile-picture.using-initials span {
+					font-size: calc(
+						35px / 5 * 2
+					); // 2/5th of .profile-picture height/width
 				}
 			}
 		}

frontend/src/pages/Team.vue

@@ -344,8 +344,14 @@ h2 {
 				margin-right: 10px;
 				width: 45px;
 				height: 45px;
-				font-size: 20px;
 			}
+
+			/deep/ .profile-picture.using-initials span {
+				font-size: calc(
+					45px / 5 * 2
+				); // 2/5th of .profile-picture height/width
+			}
+
 			div {
 				display: flex;
 				flex-direction: column;