fix: ensured headings where appropriate, some css fixes

Signed-off-by: Jonathan <theflametrooper@gmail.com>

.gitignore

@@ -30,6 +30,7 @@ frontend/dist/config/default.json
 
 npm
 node_modules
+package-lock.json
 
 # Logs
 log/

frontend/.eslintrc

@@ -4,8 +4,7 @@
 		"browser": true,
 		"amd": true,
 		"node": true,
-		"es6": true,
-		"jquery": true
+		"es6": true
 	},
 	"parserOptions": {
 		"ecmaVersion": 2018,
@@ -15,9 +14,11 @@
 	"extends": [
 		"airbnb-base",
 		"plugin:vue/essential",
-		"plugin:prettier/recommended",
-		"eslint:recommended"
+		"eslint:recommended",
+		"prettier",
+		"prettier/vue"
 	],
+	"plugins": [ "prettier" ],
 	"globals": {
 		"lofig": "writable",
 		"grecaptcha": "readonly"
@@ -30,6 +31,8 @@
 		"radix": 0,
 		"no-multi-assign": 0,
 		"no-shadow": 0,
-		"no-new": 0
+		"no-new": 0,
+		"import/no-unresolved": 0,
+		"prettier/prettier": ["error"]
 	}
 }

frontend/.prettierrc

@@ -1,5 +1,8 @@
 {
     "singleQuote": false,
     "tabWidth": 4,
-    "useTabs": true
+    "useTabs": true,
+    "trailingComma": "none",
+    "arrowParens": "avoid",
+    "endOfLine":"auto"
 }

frontend/App.vue

@@ -60,7 +60,7 @@ export default {
 		...mapActions("user/preferences", ["changeNightmode"])
 	},
 	watch: {
-		socketConnected: connected => {
+		socketConnected(connected) {
 			console.log(connected);
 			if (!connected)
 				new Toast({
@@ -214,8 +214,27 @@ html {
 body {
 	background-color: $light-grey;
 	color: $dark-grey;
-	font-family: "Roboto", Helvetica, Arial, sans-serif;
 	height: 100%;
+	font-family: "Karla", Helvetica, Arial, sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.sidebar-title {
+	font-family: "Hind", Helvetica, Arial, sans-serif;
+}
+
+.modal-card-title {
+	font-weight: 600;
+	font-family: "Hind", Helvetica, Arial, sans-serif;
+}
+
+p {
+	font-family: "Karla", Helvetica, Arial, sans-serif;
 }
 
 .upper-container {
@@ -388,8 +407,4 @@ button.delete:focus {
 		}
 	}
 }
-
-.center {
-	text-align: center;
-}
 </style>

frontend/components/404.vue

@@ -3,9 +3,7 @@
 		<metadata title="404" />
 
 		<h3><strong>404</strong>&nbsp;Not Found</h3>
-		<router-link class="button is-black" to="/">
-			Back to Home
-		</router-link>
+		<router-link class="button is-black" to="/"> Back to Home </router-link>
 	</div>
 </template>
 

frontend/components/Admin/NewStatistics.vue

@@ -6,9 +6,7 @@
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
 				<header class="card-header">
-					<p class="card-header-title">
-						Average Logs
-					</p>
+					<p class="card-header-title">Average Logs</p>
 				</header>
 				<div class="card-content">
 					<div class="content">
@@ -52,9 +50,7 @@
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
 				<header class="card-header">
-					<p class="card-header-title">
-						Average Logs
-					</p>
+					<p class="card-header-title">Average Logs</p>
 				</header>
 				<div class="card-content">
 					<div class="content">
@@ -87,9 +83,7 @@
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
 				<header class="card-header">
-					<p class="card-header-title">
-						Average Logs
-					</p>
+					<p class="card-header-title">Average Logs</p>
 				</header>
 				<div class="card-content">
 					<div class="content">
@@ -221,7 +215,7 @@ export default {
 }
 
 body {
-	font-family: "Roboto", sans-serif;
+	font-family: "Hind", sans-serif;
 }
 
 .user-avatar {

frontend/components/Admin/News.vue

@@ -44,9 +44,7 @@
 
 			<div class="card is-fullwidth">
 				<header class="card-header">
-					<p class="card-header-title">
-						Create News
-					</p>
+					<p class="card-header-title">Create News</p>
 				</header>
 				<div class="card-content">
 					<div class="content">

frontend/components/Admin/Punishments.vue

@@ -17,12 +17,8 @@
 						v-for="(punishment, index) in sortedPunishments"
 						:key="index"
 					>
-						<td v-if="punishment.type === 'banUserId'">
-							User ID
-						</td>
-						<td v-else>
-							IP Address
-						</td>
+						<td v-if="punishment.type === 'banUserId'">User ID</td>
+						<td v-else>IP Address</td>
 						<td>{{ punishment.value }}</td>
 						<td>{{ punishment.reason }}</td>
 						<td>
@@ -47,38 +43,20 @@
 			</table>
 			<div class="card is-fullwidth">
 				<header class="card-header">
-					<p class="card-header-title">
-						Ban an IP
-					</p>
+					<p class="card-header-title">Ban an IP</p>
 				</header>
 				<div class="card-content">
 					<div class="content">
 						<label class="label">Expires In</label>
 						<select v-model="ipBan.expiresAt">
-							<option value="1h">
-								1 Hour
-							</option>
-							<option value="12h">
-								12 Hours
-							</option>
-							<option value="1d">
-								1 Day
-							</option>
-							<option value="1w">
-								1 Week
-							</option>
-							<option value="1m">
-								1 Month
-							</option>
-							<option value="3m">
-								3 Months
-							</option>
-							<option value="6m">
-								6 Months
-							</option>
-							<option value="1y">
-								1 Year
-							</option>
+							<option value="1h">1 Hour</option>
+							<option value="12h">12 Hours</option>
+							<option value="1d">1 Day</option>
+							<option value="1w">1 Week</option>
+							<option value="1m">1 Month</option>
+							<option value="3m">3 Months</option>
+							<option value="6m">6 Months</option>
+							<option value="1y">1 Year</option>
 						</select>
 						<label class="label">IP</label>
 						<p class="control is-expanded">
@@ -218,7 +196,7 @@ export default {
 }
 
 body {
-	font-family: "Roboto", sans-serif;
+	font-family: "Hind", sans-serif;
 }
 
 td {

frontend/components/Admin/Songs.vue

@@ -228,7 +228,10 @@ export default {
 			this.socket.emit("songs.getSong", this.$route.query.songId, res => {
 				if (res.status === "success") {
 					this.edit(res.data);
-					this.closeModal({ sector: "admin", modal: "viewReport" });
+					this.closeModal({
+						sector: "admin",
+						modal: "viewReport"
+					});
 				} else
 					new Toast({
 						content: "Song with that ID not found",
@@ -270,7 +273,7 @@ export default {
 }
 
 body {
-	font-family: "Roboto", sans-serif;
+	font-family: "Hind", sans-serif;
 }
 
 .optionsColumn {

frontend/components/Admin/Stations.vue

@@ -70,9 +70,7 @@
 		<div class="container">
 			<div class="card is-fullwidth">
 				<header class="card-header">
-					<p class="card-header-title">
-						Create official station
-					</p>
+					<p class="card-header-title">Create official station</p>
 				</header>
 				<div class="card-content">
 					<div class="content">

frontend/components/Admin/Statistics.vue

@@ -6,9 +6,7 @@
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
 				<header class="card-header">
-					<p class="card-header-title">
-						Average Logs
-					</p>
+					<p class="card-header-title">Average Logs</p>
 				</header>
 				<div class="card-content">
 					<div class="content">
@@ -365,7 +363,7 @@ export default {
 }
 
 body {
-	font-family: "Roboto", sans-serif;
+	font-family: "Hind", sans-serif;
 }
 
 .user-avatar {

frontend/components/Admin/Users.vue

@@ -31,15 +31,9 @@
 						<td v-if="user.services.github">
 							{{ user.services.github.id }}
 						</td>
-						<td v-else>
-							Not Linked
-						</td>
-						<td v-if="user.hasPassword">
-							Yes
-						</td>
-						<td v-else>
-							Not Linked
-						</td>
+						<td v-else>Not Linked</td>
+						<td v-if="user.hasPassword">Yes</td>
+						<td v-else>Not Linked</td>
 						<td>{{ user.username }}</td>
 						<td>{{ user.role }}</td>
 						<td>{{ user.email.address }}</td>
@@ -143,7 +137,7 @@ export default {
 }
 
 body {
-	font-family: "Roboto", sans-serif;
+	font-family: "Hind", sans-serif;
 }
 
 .user-avatar {

frontend/components/MainFooter.vue

@@ -49,13 +49,9 @@
 					<router-link title="The Musare Team" to="/team">
 						Team
 					</router-link>
-					<router-link title="News" to="/news">
-						News
-					</router-link>
-				</p>
-				<p>
-					© Copyright Musare 2015 - 2020
+					<router-link title="News" to="/news"> News </router-link>
 				</p>
+				<p>© Copyright Musare 2015 - 2020</p>
 			</div>
 		</div>
 	</footer>

frontend/components/Modals/AddSongToPlaylist.vue

@@ -8,9 +8,7 @@
 				{{ currentSong.artists }}
 			</h5>
 			<aside class="menu">
-				<p class="menu-label">
-					Playlists
-				</p>
+				<p class="menu-label">Playlists</p>
 				<ul class="menu-list">
 					<li v-for="(playlist, index) in playlistsArr" :key="index">
 						<div class="playlist">

frontend/components/Modals/EditStation.vue

@@ -165,39 +165,56 @@
 					>
 						<button
 							v-bind:class="privacyButtons[editing.privacy].style"
-							style="text-transform: capitalize;"
+							style="text-transform: capitalize"
 							@click="updatePrivacyLocal(editing.privacy)"
 						>
-							<i class="material-icons">{{ privacyButtons[editing.privacy].iconName }}</i>
+							<i class="material-icons">{{
+								privacyButtons[editing.privacy].iconName
+							}}</i>
 							{{ editing.privacy }}
 						</button>
 						<transition name="slide-down">
 							<button
 								class="green"
-								v-if="privacyDropdownActive && editing.privacy !== 'public'"
+								v-if="
+									privacyDropdownActive &&
+										editing.privacy !== 'public'
+								"
 								@click="updatePrivacyLocal('public')"
 							>
-								<i class="material-icons">{{ privacyButtons["public"].iconName }}</i>
+								<i class="material-icons">{{
+									privacyButtons["public"].iconName
+								}}</i>
 								Public
 							</button>
 						</transition>
 						<transition name="slide-down">
 							<button
 								class="orange"
-								v-if="privacyDropdownActive && editing.privacy !== 'unlisted'"
+								v-if="
+									privacyDropdownActive &&
+										editing.privacy !== 'unlisted'
+								"
 								@click="updatePrivacyLocal('unlisted')"
 							>
-								<i class="material-icons">{{ privacyButtons["unlisted"].iconName }}</i>
+								<i class="material-icons">{{
+									privacyButtons["unlisted"].iconName
+								}}</i>
 								Unlisted
 							</button>
 						</transition>
 						<transition name="slide-down">
 							<button
 								class="red"
-								v-if="privacyDropdownActive && editing.privacy !== 'private'"
+								v-if="
+									privacyDropdownActive &&
+										editing.privacy !== 'private'
+								"
 								@click="updatePrivacyLocal('private')"
 							>
-								<i class="material-icons">{{ privacyButtons["private"].iconName }}</i>
+								<i class="material-icons">{{
+									privacyButtons["private"].iconName
+								}}</i>
 								Private
 							</button>
 						</transition>
@@ -214,11 +231,19 @@
 						<button
 							v-bind:class="{
 								blue: !editing.partyMode,
-								yellow: editing.partyMode,
+								yellow: editing.partyMode
 							}"
-							@click="editing.partyMode ? updatePartyModeLocal(true) : updatePartyModeLocal(false)"
+							@click="
+								editing.partyMode
+									? updatePartyModeLocal(true)
+									: updatePartyModeLocal(false)
+							"
 						>
-							<i class="material-icons">{{ editing.partyMode ? "emoji_people" : "playlist_play" }}</i>
+							<i class="material-icons">{{
+								editing.partyMode
+									? "emoji_people"
+									: "playlist_play"
+							}}</i>
 							{{ editing.partyMode ? "Party" : "Playlist" }}
 						</button>
 						<transition name="slide-down">
@@ -258,17 +283,25 @@
 						<button
 							v-bind:class="{
 								green: editing.locked,
-								red: !editing.locked,
+								red: !editing.locked
 							}"
-							@click="editing.locked ? updateQueueLockLocal(true) : updateQueueLockLocal(false)"
+							@click="
+								editing.locked
+									? updateQueueLockLocal(true)
+									: updateQueueLockLocal(false)
+							"
 						>
-							<i class="material-icons">{{ editing.locked ? "lock" : "lock_open" }}</i>
+							<i class="material-icons">{{
+								editing.locked ? "lock" : "lock_open"
+							}}</i>
 							{{ editing.locked ? "Locked" : "Unlocked" }}
 						</button>
 						<transition name="slide-down">
 							<button
 								class="green"
-								v-if="queueLockDropdownActive && !editing.locked"
+								v-if="
+									queueLockDropdownActive && !editing.locked
+								"
 								@click="updateQueueLockLocal(true)"
 							>
 								<i class="material-icons">lock</i>
@@ -384,18 +417,18 @@ export default {
 				"Dubstep"
 			],
 			privacyButtons: {
-				"public": {
+				public: {
 					style: "green",
-					iconName: "public",
+					iconName: "public"
 				},
-				"private": {
+				private: {
 					style: "red",
-					iconName: "lock",
+					iconName: "lock"
 				},
-				"unlisted": {
+				unlisted: {
 					style: "orange",
-					iconName: "link",
-				},
+					iconName: "link"
+				}
 			}
 		};
 	},
@@ -1090,7 +1123,7 @@ export default {
 }
 
 .slide-down-enter-active {
-	transition: transform .25s;
+	transition: transform 0.25s;
 }
 
 .slide-down-enter {

frontend/components/Modals/Login.vue

@@ -11,9 +11,7 @@
 		/>
 		<div class="modal-card">
 			<header class="modal-card-head">
-				<p class="modal-card-title">
-					Login
-				</p>
+				<p class="modal-card-title">Login</p>
 				<button
 					class="delete"
 					@click="

frontend/components/Modals/Playlists/Edit.vue

@@ -4,9 +4,7 @@
 			<nav class="level">
 				<div class="level-item has-text-centered">
 					<div>
-						<p class="heading">
-							Total Length
-						</p>
+						<p class="heading">Total Length</p>
 						<p class="title">
 							{{ totalLength() }}
 						</p>

frontend/components/Modals/Register.vue

@@ -11,9 +11,7 @@
 		/>
 		<div class="modal-card">
 			<header class="modal-card-head">
-				<p class="modal-card-title">
-					Register
-				</p>
+				<p class="modal-card-title">Register</p>
 				<button
 					class="delete"
 					@click="

frontend/components/Modals/Report.vue

@@ -9,9 +9,7 @@
 						@click="highlight('previousSong')"
 					>
 						<header class="card-header">
-							<p class="card-header-title">
-								Previous Song
-							</p>
+							<p class="card-header-title">Previous Song</p>
 						</header>
 						<div class="card-content">
 							<article class="media">
@@ -52,9 +50,7 @@
 						@click="highlight('currentSong')"
 					>
 						<header class="card-header">
-							<p class="card-header-title">
-								Current Song
-							</p>
+							<p class="card-header-title">Current Song</p>
 						</header>
 						<div class="card-content">
 							<article class="media">

frontend/components/Modals/WhatIsNew.vue

@@ -31,9 +31,7 @@
 					</ul>
 				</div>
 				<div v-show="news.improvements.length > 0" class="sect">
-					<div class="sect-head-improvements">
-						Improvements
-					</div>
+					<div class="sect-head-improvements">Improvements</div>
 					<ul class="sect-body">
 						<li
 							v-for="(improvement, index) in news.improvements"
@@ -44,9 +42,7 @@
 					</ul>
 				</div>
 				<div v-show="news.bugs.length > 0" class="sect">
-					<div class="sect-head-bugs">
-						Bugs Smashed
-					</div>
+					<div class="sect-head-bugs">Bugs Smashed</div>
 					<ul class="sect-body">
 						<li v-for="(bug, index) in news.bugs" :key="index">
 							{{ bug }}

frontend/components/Sidebars/Playlist.vue

@@ -1,9 +1,7 @@
 <template>
 	<div class="sidebar" transition="slide">
 		<div class="inner-wrapper">
-			<div class="title">
-				Playlists
-			</div>
+			<div class="sidebar-title">Playlists</div>
 
 			<aside v-if="playlists.length > 0" class="menu">
 				<ul class="menu-list">
@@ -29,9 +27,7 @@
 				</ul>
 			</aside>
 
-			<div v-else class="none-found">
-				No Playlists found
-			</div>
+			<div v-else class="has-text-centered">No Playlists found</div>
 
 			<a
 				class="button create-playlist"
@@ -148,7 +144,7 @@ export default {
 	.sidebar {
 		background-color: $night-mode-secondary;
 
-		.title {
+		.sidebar-title {
 			color: #fff;
 		}
 
@@ -194,12 +190,13 @@ export default {
 	transform: translateX(100%);
 }
 
-.title {
+.sidebar-title {
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
 	color: $white;
 	font-weight: 600;
+	font-size: 20px;
 }
 
 .create-playlist {
@@ -220,8 +217,4 @@ export default {
 .create-playlist:focus {
 	background: $primary-color;
 }
-
-.none-found {
-	text-align: center;
-}
 </style>

frontend/components/Sidebars/SongsList.vue

@@ -1,12 +1,10 @@
 <template>
 	<div class="sidebar" transition="slide">
 		<div class="inner-wrapper">
-			<div v-if="station.type === 'community'" class="title">
+			<div v-if="station.type === 'community'" class="sidebar-title">
 				Queue
 			</div>
-			<div v-else class="title">
-				Playlist
-			</div>
+			<div v-else class="sidebar-title">Playlist</div>
 
 			<article v-if="!noSong" class="media">
 				<figure v-if="currentSong.thumbnail" class="media-left">
@@ -31,7 +29,7 @@
 					{{ utils.formatTime(currentSong.duration) }}
 				</div>
 			</article>
-			<p v-if="noSong" class="center">
+			<p v-if="noSong" class="has-text-centered">
 				There is currently no song playing.
 			</p>
 			<hr v-if="noSong" />
@@ -40,7 +38,7 @@
 				<div class="media-content">
 					<div
 						class="content"
-						style="display: block;padding-top: 10px;"
+						style="display: block; padding-top: 10px"
 					>
 						<strong class="songTitle">{{ song.title }}</strong>
 						<small>{{ song.artists.join(", ") }}</small>
@@ -62,7 +60,7 @@
 							<i
 								v-if="isOwnerOnly() || isAdminOnly()"
 								class="material-icons"
-								style="vertical-align: middle;"
+								style="vertical-align: middle"
 								@click="removeFromQueue(song.songId)"
 								>delete_forever</i
 							>
@@ -188,7 +186,7 @@ export default {
 	.sidebar {
 		background-color: $night-mode-secondary;
 
-		.title {
+		.sidebar-title {
 			color: #fff;
 		}
 
@@ -227,12 +225,13 @@ export default {
 	transform: translateX(100%);
 }
 
-.title {
+.sidebar-title {
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
 	color: $white;
 	font-weight: 600;
+	font-size: 20px;
 }
 
 .media {

frontend/components/Sidebars/UsersList.vue

@@ -1,10 +1,8 @@
 <template>
 	<div class="sidebar" transition="slide">
 		<div class="inner-wrapper">
-			<div class="title">
-				Users
-			</div>
-			<h5 class="center">Total users: {{ userCount }}</h5>
+			<div class="sidebar-title">Users</div>
+			<h5 class="has-text-centered">Total users: {{ userCount }}</h5>
 			<aside class="menu">
 				<ul class="menu-list">
 					<li v-for="(username, index) in users" :key="index">
@@ -39,7 +37,7 @@ export default {
 	.sidebar {
 		background-color: $night-mode-secondary;
 
-		.title {
+		.sidebar-title {
 			color: #fff;
 		}
 
@@ -76,12 +74,13 @@ export default {
 	transform: translateX(100%);
 }
 
-.title {
+.sidebar-title {
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
 	color: $white;
 	font-weight: 600;
+	font-size: 20px;
 }
 
 .menu {

frontend/components/Station/Station.vue

@@ -12,7 +12,7 @@
 		<add-to-playlist v-if="modals.addSongToPlaylist" />
 		<edit-playlist v-if="modals.editPlaylist" />
 		<create-playlist v-if="modals.createPlaylist" />
-		<edit-station v-show="modals.editStation" store="station" />
+		<edit-station v-if="modals.editStation" store="station" />
 		<report v-if="modals.report" />
 
 		<transition name="slide">
@@ -103,7 +103,7 @@
 						id="preview-progress"
 						class="seeker-bar-container white"
 					>
-						<div class="seeker-bar light-blue" style="width: 0%;" />
+						<div class="seeker-bar light-blue" style="width: 0%" />
 					</div>
 				</div>
 				<div
@@ -112,9 +112,7 @@
 					<div v-if="station.type === 'community'" class="title">
 						Queue
 					</div>
-					<div v-else class="title">
-						Playlist
-					</div>
+					<div v-else class="title">Playlist</div>
 					<article v-if="!noSong" class="media">
 						<figure class="media-left">
 							<p class="image is-64x64">
@@ -139,7 +137,7 @@
 							{{ utils.formatTime(currentSong.duration) }}
 						</div>
 					</article>
-					<p v-if="noSong" class="center">
+					<p v-if="noSong" class="has-text-centered">
 						There is currently no song playing.
 					</p>
 
@@ -211,7 +209,7 @@
 							</h4>
 							<div class="columns is-mobile">
 								<form
-									style="margin-top: 12px; margin-bottom: 0;"
+									style="margin-top: 12px; margin-bottom: 0"
 									action="#"
 									class="column is-7-desktop is-4-mobile"
 								>
@@ -254,7 +252,7 @@
 									>
 										<li
 											id="like"
-											style="margin-right: 10px;"
+											style="margin-right: 10px"
 											@click="toggleLike()"
 										>
 											<span class="flow-text">{{
@@ -363,11 +361,14 @@
 												currentSong.dislikes !== -1
 										"
 										id="ratings"
-										style="display: inline-block;"
+										style="display: inline-block"
 									>
 										<li
 											id="dislike"
-											style="display: inline-block;margin-right: 10px;"
+											style="
+												display: inline-block;
+												margin-right: 10px;
+											"
 											@click="toggleDislike()"
 										>
 											<span class="flow-text">{{
@@ -389,7 +390,7 @@
 										</li>
 										<li
 											id="like"
-											style="display: inline-block;"
+											style="display: inline-block"
 											@click="toggleLike()"
 										>
 											<span class="flow-text">{{

frontend/components/Station/StationHeader.vue

@@ -11,7 +11,7 @@
 			</div>
 
 			<div class="nav-center stationDisplayName">
-				{{ station.displayName }}
+				<h4>{{ station.displayName }}</h4>
 			</div>
 
 			<span class="nav-toggle" v-on:click="controlBar = !controlBar">

frontend/components/User/Settings.vue

@@ -208,7 +208,7 @@
 				<br />
 				<button
 					class="button is-warning"
-					style="margin-top: 30px;"
+					style="margin-top: 30px"
 					@click="removeSessions()"
 				>
 					Log out everywhere
@@ -282,16 +282,17 @@ export default {
 		};
 	},
 	watch: {
+		// prettier-ignore
 		// eslint-disable-next-line func-names
-		"user.username": function(value) {
-			if (!validation.isLength(value, 2, 32)) {
-				this.validation.username.message =
-					"Username must have between 2 and 32 characters.";
-				this.validation.username.valid = false;
-			} else if (
-				!validation.regex.azAZ09_.test(value) &&
-				value !== this.originalUser.username // Sometimes a username pulled from GitHub won't succeed validation
-			) {
+		"user.username": function (value) {
+		if (!validation.isLength(value, 2, 32)) {
+			this.validation.username.message =
+				"Username must have between 2 and 32 characters.";
+			this.validation.username.valid = false;
+		} else if (
+			!validation.regex.azAZ09_.test(value) &&
+			value !== this.originalUser.username // Sometimes a username pulled from GitHub won't succeed validation
+		) {
 				this.validation.username.message =
 					"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _.";
 				this.validation.username.valid = false;
@@ -300,8 +301,9 @@ export default {
 				this.validation.username.valid = true;
 			}
 		},
+		// prettier-ignore
 		// eslint-disable-next-line func-names
-		"user.email.address": function(value) {
+		"user.email.address": function (value) {
 			if (!validation.isLength(value, 3, 254)) {
 				this.validation.email.message =
 					"Email must have between 3 and 254 characters.";

frontend/components/User/Show.vue

@@ -25,7 +25,7 @@
 								>admin</span
 							>
 						</div>
-						<p class="username">@{{ user.username }}</p>
+						<h2 class="username">@{{ user.username }}</h2>
 					</div>
 				</div>
 				<div
@@ -575,6 +575,7 @@ export default {
 		font-size: 24px;
 		line-height: 28px;
 		color: $dark-grey;
+		margin: 0;
 	}
 
 	.buttons {

frontend/components/pages/About.vue

@@ -4,11 +4,10 @@
 		<main-header />
 		<div class="container">
 			<div class="content-wrapper">
+				<h2 class="has-text-centered is-marginless">About</h2>
 				<div class="card is-fullwidth">
 					<header class="card-header">
-						<p class="card-header-title">
-							The project
-						</p>
+						<p class="card-header-title">The project</p>
 					</header>
 					<div class="card-content">
 						<div class="content">
@@ -23,9 +22,7 @@
 				</div>
 				<div class="card is-fullwidth">
 					<header class="card-header">
-						<p class="card-header-title">
-							How you can help
-						</p>
+						<p class="card-header-title">How you can help</p>
 					</header>
 					<div class="card-content">
 						<div class="content">

frontend/components/pages/Home.vue

@@ -5,7 +5,7 @@
 			<main-header />
 			<div class="group">
 				<div class="group-title">
-					Stations&nbsp;
+					<h1>Stations&nbsp;</h1>
 					<a
 						v-if="loggedIn"
 						href="#"
@@ -544,15 +544,15 @@ html {
 	width: 100%;
 	margin: 64px 0 0 0;
 	padding-bottom: 240px;
+
 	.group-title {
-		float: left;
-		clear: none;
-		width: 100%;
-		height: 64px;
-		line-height: 48px;
-		text-align: center;
-		font-size: 48px;
-		margin-bottom: 25px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		a {
+			display: flex;
+		}
 	}
 }
 </style>

frontend/components/pages/News.vue

@@ -31,23 +31,18 @@
 						</ul>
 					</div>
 					<div v-show="item.improvements.length > 0" class="sect">
-						<div class="sect-head-improvements">
-							Improvements
-						</div>
+						<div class="sect-head-improvements">Improvements</div>
 						<ul class="sect-body">
 							<li
-								v-for="(improvement,
-								index) in item.improvements"
-								:key="index"
+								v-for="(improvement, ind) in item.improvements"
+								:key="ind"
 							>
 								{{ improvement }}
 							</li>
 						</ul>
 					</div>
 					<div v-show="item.bugs.length > 0" class="sect">
-						<div class="sect-head-bugs">
-							Bugs Smashed
-						</div>
+						<div class="sect-head-bugs">Bugs Smashed</div>
 						<ul class="sect-body">
 							<li v-for="(bug, index) in item.bugs" :key="index">
 								{{ bug }}
@@ -69,7 +64,7 @@
 					</div>
 				</div>
 			</div>
-			<h3 v-if="noFound" class="center">
+			<h3 v-if="noFound" class="has-text-centered">
 				No news items were found.
 			</h3>
 		</div>

frontend/components/pages/Team.vue

@@ -3,18 +3,14 @@
 		<metadata title="Team" />
 		<main-header />
 		<div class="content-wrapper">
-			<h3 class="center">
-				Our Team
-			</h3>
+			<h2 class="has-text-centered is-marginless">Our Team</h2>
 			<br />
 			<div class="columns">
 				<div
 					class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
 				>
 					<header class="card-header">
-						<p class="card-header-title">
-							Kris
-						</p>
+						<p class="card-header-title">Kris</p>
 					</header>
 					<div class="card-content">
 						<div class="content">
@@ -49,9 +45,7 @@
 					class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
 				>
 					<header class="card-header">
-						<p class="card-header-title">
-							Jonathan
-						</p>
+						<p class="card-header-title">Jonathan</p>
 					</header>
 					<div class="card-content">
 						<div class="content">
@@ -82,9 +76,7 @@
 					class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
 				>
 					<header class="card-header">
-						<p class="card-header-title">
-							Antonio
-						</p>
+						<p class="card-header-title">Antonio</p>
 					</header>
 					<div class="card-content">
 						<div class="content">
@@ -110,11 +102,9 @@
 				</div>
 			</div>
 			<div id="special-thanks">
-				<h4 class="center">
-					Special Thanks
-				</h4>
+				<h4 class="has-text-centered">Special Thanks</h4>
 				<br />
-				<p class="center thanks">
+				<p class="has-text-centered thanks">
 					Special thanks to Owen Diffey, Zachery, Adryd, Cameron
 					Kline, Wesley McCann,
 					<strong>Akira Laine (Co-Founder)</strong>, Johannes Andersen

frontend/dist/index.tpl.html

@@ -32,7 +32,11 @@
 	<meta name='theme-color' content='#03a9f4'>
 	<meta name='google' content='nositelinkssearchbox' />
 
-	<link href='https://fonts.googleapis.com/css?family=Roboto:100,400|Pacifico' rel='stylesheet'>
+	<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'>
+	<link rel="preconnect" href="https://fonts.gstatic.com">
+	<link href="https://fonts.googleapis.com/css2?family=Hind:wght@500&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
+
 	<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
 	<link rel='stylesheet' href='/index.css'>

frontend/package-lock.json

@@ -3965,9 +3965,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
-      "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz",
+      "integrity": "sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==",
       "dev": true,
       "requires": {
         "get-stdin": "^6.0.0"
@@ -4131,21 +4131,59 @@
       }
     },
     "eslint-plugin-prettier": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz",
-      "integrity": "sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz",
+      "integrity": "sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==",
       "dev": true,
       "requires": {
         "prettier-linter-helpers": "^1.0.0"
       }
     },
     "eslint-plugin-vue": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz",
-      "integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.1.0.tgz",
+      "integrity": "sha512-9dW7kj8/d2IkDdgNpvIhJdJ3XzU3x4PThXYMzWt49taktYnGyrTY6/bXCYZ/VtQKU9kXPntPrZ41+8Pw0Nxblg==",
       "dev": true,
       "requires": {
-        "vue-eslint-parser": "^5.0.0"
+        "eslint-utils": "^2.1.0",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.3.2",
+        "vue-eslint-parser": "^7.1.1"
+      },
+      "dependencies": {
+        "eslint-utils": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+          "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+          "dev": true,
+          "requires": {
+            "eslint-visitor-keys": "^1.1.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
       }
     },
     "eslint-scope": {
@@ -9788,46 +9826,17 @@
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
     "vue-eslint-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
-      "integrity": "sha512-JlHVZwBBTNVvzmifwjpZYn0oPWH2SgWv5dojlZBsrhablDu95VFD+hriB1rQGwbD+bms6g+rAFhQHk6+NyiS6g==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.1.tgz",
+      "integrity": "sha512-8FdXi0gieEwh1IprIBafpiJWcApwrU+l2FEj8c1HtHFdNXMd0+2jUSjBVmcQYohf/E72irwAXEXLga6TQcB3FA==",
       "dev": true,
       "requires": {
-        "debug": "^4.1.0",
-        "eslint-scope": "^4.0.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "espree": "^4.1.0",
+        "debug": "^4.1.1",
+        "eslint-scope": "^5.0.0",
+        "eslint-visitor-keys": "^1.1.0",
+        "espree": "^6.2.1",
         "esquery": "^1.0.1",
-        "lodash": "^4.17.11"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
-          "dev": true
-        },
-        "eslint-scope": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.1.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "espree": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
-          "integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
-          "dev": true,
-          "requires": {
-            "acorn": "^6.0.2",
-            "acorn-jsx": "^5.0.0",
-            "eslint-visitor-keys": "^1.0.0"
-          }
-        }
+        "lodash": "^4.17.15"
       }
     },
     "vue-hot-reload-api": {

frontend/package.json

@@ -23,11 +23,11 @@
     "babel-loader": "^8.0.6",
     "css-loader": "^3.0.0",
     "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-loader": "^2.2.1",
     "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^7.1.0",
     "fetch": "^1.1.0",
     "node-sass": "^4.14.1",
     "prettier": "1.18.2",

frontend/store/index.js

@@ -1,21 +1,21 @@
-import Vue from "vue";
-import Vuex from "vuex";
-
-import user from "./modules/user";
-import modals from "./modules/modals";
-import sidebars from "./modules/sidebars";
-import station from "./modules/station";
-import admin from "./modules/admin";
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-	modules: {
-		user,
-		modals,
-		sidebars,
-		station,
-		admin
-	},
-	strict: false
-});
+import Vue from "vue";
+import Vuex from "vuex";
+
+import user from "./modules/user";
+import modals from "./modules/modals";
+import sidebars from "./modules/sidebars";
+import station from "./modules/station";
+import admin from "./modules/admin";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+	modules: {
+		user,
+		modals,
+		sidebars,
+		station,
+		admin
+	},
+	strict: false
+});

frontend/store/modules/modals.js

@@ -1,69 +1,69 @@
-/* eslint no-param-reassign: 0 */
-
-const state = {
-	modals: {
-		header: {
-			login: false,
-			register: false
-		},
-		home: {
-			createCommunityStation: false
-		},
-		station: {
-			addSongToQueue: false,
-			editPlaylist: false,
-			createPlaylist: false,
-			addSongToPlaylist: false,
-			editStation: false,
-			report: false
-		},
-		admin: {
-			editNews: false,
-			editUser: false,
-			editSong: false,
-			viewReport: false,
-			viewPunishment: false
-		}
-	},
-	currentlyActive: {}
-};
-
-const getters = {};
-
-const actions = {
-	closeModal: ({ commit }, data) => {
-		if (data.modal === "register") window.location.reload();
-		commit("closeModal", data);
-	},
-	openModal: ({ commit }, data) => {
-		commit("openModal", data);
-	},
-	closeCurrentModal: ({ commit }) => {
-		commit("closeCurrentModal");
-	}
-};
-
-const mutations = {
-	closeModal(state, data) {
-		const { sector, modal } = data;
-		state.modals[sector][modal] = false;
-	},
-	openModal(state, data) {
-		const { sector, modal } = data;
-		state.modals[sector][modal] = true;
-		state.currentlyActive = { sector, modal };
-	},
-	closeCurrentModal(state) {
-		const { sector, modal } = state.currentlyActive;
-		state.modals[sector][modal] = false;
-		state.currentlyActive = {};
-	}
-};
-
-export default {
-	namespaced: true,
-	state,
-	getters,
-	actions,
-	mutations
-};
+/* eslint no-param-reassign: 0 */
+
+const state = {
+	modals: {
+		header: {
+			login: false,
+			register: false
+		},
+		home: {
+			createCommunityStation: false
+		},
+		station: {
+			addSongToQueue: false,
+			editPlaylist: false,
+			createPlaylist: false,
+			addSongToPlaylist: false,
+			editStation: false,
+			report: false
+		},
+		admin: {
+			editNews: false,
+			editUser: false,
+			editSong: false,
+			viewReport: false,
+			viewPunishment: false
+		}
+	},
+	currentlyActive: {}
+};
+
+const getters = {};
+
+const actions = {
+	closeModal: ({ commit }, data) => {
+		if (data.modal === "register") window.location.reload();
+		commit("closeModal", data);
+	},
+	openModal: ({ commit }, data) => {
+		commit("openModal", data);
+	},
+	closeCurrentModal: ({ commit }) => {
+		commit("closeCurrentModal");
+	}
+};
+
+const mutations = {
+	closeModal(state, data) {
+		const { sector, modal } = data;
+		state.modals[sector][modal] = false;
+	},
+	openModal(state, data) {
+		const { sector, modal } = data;
+		state.modals[sector][modal] = true;
+		state.currentlyActive = { sector, modal };
+	},
+	closeCurrentModal(state) {
+		const { sector, modal } = state.currentlyActive;
+		state.modals[sector][modal] = false;
+		state.currentlyActive = {};
+	}
+};
+
+export default {
+	namespaced: true,
+	state,
+	getters,
+	actions,
+	mutations
+};

frontend/store/modules/station.js

@@ -1,97 +1,97 @@
-/* eslint no-param-reassign: 0 */
-
-const state = {
-	station: {},
-	privatePlaylistQueueSelected: null,
-	editing: {},
-	userCount: 0,
-	users: [],
-	currentSong: {},
-	previousSong: null,
-	songsList: [],
-	paused: true,
-	noSong: true
-};
-
-const getters = {};
-
-const actions = {
-	joinStation: ({ commit }, station) => {
-		commit("joinStation", station);
-	},
-	editStation: ({ commit }, station) => {
-		commit("editStation", station);
-	},
-	updateUserCount: ({ commit }, userCount) => {
-		commit("updateUserCount", userCount);
-	},
-	updateUsers: ({ commit }, users) => {
-		commit("updateUsers", users);
-	},
-	updateCurrentSong: ({ commit }, currentSong) => {
-		commit("updateCurrentSong", currentSong);
-	},
-	updatePreviousSong: ({ commit }, previousSong) => {
-		commit("updatePreviousSong", previousSong);
-	},
-	updateSongsList: ({ commit }, songsList) => {
-		commit("updateSongsList", songsList);
-	},
-	updatePaused: ({ commit }, paused) => {
-		commit("updatePaused", paused);
-	},
-	updateNoSong: ({ commit }, noSong) => {
-		commit("updateNoSong", noSong);
-	},
-	updatePrivatePlaylistQueueSelected: ({ commit }, status) => {
-		commit("updatePrivatePlaylistQueueSelected", status);
-	}
-};
-
-const mutations = {
-	joinStation(state, station) {
-		state.station = { ...station };
-	},
-	editStation(state, station) {
-		state.editing = { ...station };
-	},
-	updateUserCount(state, userCount) {
-		state.userCount = userCount;
-	},
-	updateUsers(state, users) {
-		state.users = users;
-	},
-	updateCurrentSong(state, currentSong) {
-		if (currentSong.likes === -1 && currentSong.dislikes === -1) {
-			currentSong.skipDuration = 0;
-			currentSong.simpleSong = true;
-		} else {
-			currentSong.simpleSong = false;
-		}
-
-		state.currentSong = currentSong;
-	},
-	updatePreviousSong(state, previousSong) {
-		state.previousSong = previousSong;
-	},
-	updateSongsList(state, songsList) {
-		state.songsList = songsList;
-	},
-	updatePaused(state, paused) {
-		state.paused = paused;
-	},
-	updateNoSong(state, noSong) {
-		state.noSong = noSong;
-	},
-	updatePrivatePlaylistQueueSelected(state, status) {
-		state.privatePlaylistQueueSelected = status;
-	}
-};
-
-export default {
-	namespaced: true,
-	state,
-	getters,
-	actions,
-	mutations
-};
+/* eslint no-param-reassign: 0 */
+
+const state = {
+	station: {},
+	privatePlaylistQueueSelected: null,
+	editing: {},
+	userCount: 0,
+	users: [],
+	currentSong: {},
+	previousSong: null,
+	songsList: [],
+	paused: true,
+	noSong: true
+};
+
+const getters = {};
+
+const actions = {
+	joinStation: ({ commit }, station) => {
+		commit("joinStation", station);
+	},
+	editStation: ({ commit }, station) => {
+		commit("editStation", station);
+	},
+	updateUserCount: ({ commit }, userCount) => {
+		commit("updateUserCount", userCount);
+	},
+	updateUsers: ({ commit }, users) => {
+		commit("updateUsers", users);
+	},
+	updateCurrentSong: ({ commit }, currentSong) => {
+		commit("updateCurrentSong", currentSong);
+	},
+	updatePreviousSong: ({ commit }, previousSong) => {
+		commit("updatePreviousSong", previousSong);
+	},
+	updateSongsList: ({ commit }, songsList) => {
+		commit("updateSongsList", songsList);
+	},
+	updatePaused: ({ commit }, paused) => {
+		commit("updatePaused", paused);
+	},
+	updateNoSong: ({ commit }, noSong) => {
+		commit("updateNoSong", noSong);
+	},
+	updatePrivatePlaylistQueueSelected: ({ commit }, status) => {
+		commit("updatePrivatePlaylistQueueSelected", status);
+	}
+};
+
+const mutations = {
+	joinStation(state, station) {
+		state.station = { ...station };
+	},
+	editStation(state, station) {
+		state.editing = { ...station };
+	},
+	updateUserCount(state, userCount) {
+		state.userCount = userCount;
+	},
+	updateUsers(state, users) {
+		state.users = users;
+	},
+	updateCurrentSong(state, currentSong) {
+		if (currentSong.likes === -1 && currentSong.dislikes === -1) {
+			currentSong.skipDuration = 0;
+			currentSong.simpleSong = true;
+		} else {
+			currentSong.simpleSong = false;
+		}
+
+		state.currentSong = currentSong;
+	},
+	updatePreviousSong(state, previousSong) {
+		state.previousSong = previousSong;
+	},
+	updateSongsList(state, songsList) {
+		state.songsList = songsList;
+	},
+	updatePaused(state, paused) {
+		state.paused = paused;
+	},
+	updateNoSong(state, noSong) {
+		state.noSong = noSong;
+	},
+	updatePrivatePlaylistQueueSelected(state, status) {
+		state.privatePlaylistQueueSelected = status;
+	}
+};
+
+export default {
+	namespaced: true,
+	state,
+	getters,
+	actions,
+	mutations
+};