refactor: replaced button anchors with buttons, and removed hash anchors with

frontend/src/components/AddToPlaylistDropdown.vue

@@ -25,7 +25,6 @@
 			<div class="nav-dropdown-items" v-if="playlists.length > 0">
 				<button
 					class="nav-item"
-					href="#"
 					v-for="(playlist, index) in playlists"
 					:key="playlist._id"
 					@click.prevent="toggleSongInPlaylist(index)"

frontend/src/components/layout/MainFooter.vue

@@ -29,7 +29,7 @@
 export default {
 	data() {
 		return {
-			github: "#"
+			github: ""
 		};
 	},
 	async mounted() {

frontend/src/components/layout/MainHeader.vue

@@ -43,15 +43,11 @@
 				<router-link class="nav-item" to="/settings"
 					>Settings</router-link
 				>
-				<a class="nav-item" href="#" @click="logout()">Logout</a>
+				<a class="nav-item" @click="logout()">Logout</a>
 			</span>
 			<span v-if="!loggedIn && !hideLoggedOut" class="grouped">
-				<a class="nav-item" href="#" @click="openModal('login')"
-					>Login</a
-				>
-				<a class="nav-item" href="#" @click="openModal('register')"
-					>Register</a
-				>
+				<a class="nav-item" @click="openModal('login')">Login</a>
+				<a class="nav-item" @click="openModal('register')">Register</a>
 			</span>
 			<div class="nav-item" id="nightmode-toggle">
 				<p class="is-expanded checkbox-control">

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -83,13 +83,13 @@
 					/>
 				</p>
 				<p class="control">
-					<a
+					<button
 						class="button is-info"
 						@click.prevent="searchForSongs()"
-						href="#"
-						><i class="material-icons icon-with-button">search</i
-						>Search</a
 					>
+						<i class="material-icons icon-with-button">search</i
+						>Search
+					</button>
 				</p>
 			</div>
 
@@ -128,13 +128,12 @@
 					</template>
 				</search-query-item>
 
-				<a
+				<button
 					class="button is-primary load-more-button"
 					@click.prevent="loadMoreSongs()"
-					href="#"
 				>
 					Load more...
-				</a>
+				</button>
 			</div>
 		</div>
 	</div>

frontend/src/components/modals/EditPlaylist/Tabs/ImportPlaylists.vue

@@ -20,13 +20,12 @@
 						<option :value="true">Import only music</option>
 					</select>
 				</span>
-				<a
+				<button
 					class="button is-info"
 					@click.prevent="importPlaylist()"
-					href="#"
-					><i class="material-icons icon-with-button">publish</i
-					>Import</a
 				>
+					<i class="material-icons icon-with-button">publish</i>Import
+				</button>
 			</p>
 		</div>
 	</div>

frontend/src/components/modals/EditPlaylist/Tabs/Settings.vue

@@ -22,12 +22,12 @@
 					/>
 				</p>
 				<p class="control">
-					<a
+					<button
 						class="button is-info"
 						@click.prevent="renamePlaylist()"
-						href="#"
-						>Rename</a
 					>
+						Rename
+					</button>
 				</p>
 			</div>
 		</div>
@@ -47,12 +47,12 @@
 					</select>
 				</div>
 				<p class="control">
-					<a
+					<button
 						class="button is-info"
 						@click.prevent="updatePrivacy()"
-						href="#"
-						>Update Privacy</a
 					>
+						Update Privacy
+					</button>
 				</p>
 			</div>
 		</div>

frontend/src/components/modals/EditPlaylist/index.vue

@@ -210,7 +210,7 @@
 			</div>
 		</template>
 		<template #footer>
-			<a
+			<button
 				class="button is-default"
 				v-if="
 					userId === playlist.createdBy ||
@@ -218,10 +218,9 @@
 					playlist.privacy === 'public'
 				"
 				@click="downloadPlaylist()"
-				href="#"
 			>
 				Download Playlist
-			</a>
+			</button>
 			<div class="right">
 				<confirm
 					v-if="playlist.type === 'station'"

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -57,13 +57,9 @@
 				/>
 			</p>
 			<p class="control">
-				<a
-					class="button is-info"
-					@click="searchDiscogsForPage(1)"
-					href="#"
-					><i class="material-icons icon-with-button">search</i
-					>Search</a
-				>
+				<button class="button is-info" @click="searchDiscogsForPage(1)">
+					<i class="material-icons icon-with-button">search</i>Search
+				</button>
 			</p>
 		</div>
 

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -13,13 +13,12 @@
 				/>
 			</p>
 			<p class="control">
-				<a
+				<button
 					class="button is-info"
 					@click.prevent="searchForSongs()"
-					href="#"
-					><i class="material-icons icon-with-button">search</i
-					>Search</a
 				>
+					<i class="material-icons icon-with-button">search</i>Search
+				</button>
 			</p>
 		</div>
 
@@ -49,13 +48,12 @@
 				</template>
 			</search-query-item>
 
-			<a
+			<button
 				class="button is-primary load-more-button"
 				@click.prevent="loadMoreSongs()"
-				href="#"
 			>
 				Load more...
-			</a>
+			</button>
 		</div>
 	</div>
 </template>

frontend/src/components/modals/Login.vue

@@ -56,7 +56,6 @@
 						<p class="content-box-optional-helper">
 							<router-link
 								id="forgot-password"
-								href="#"
 								to="/reset_password"
 								@click="closeLoginModal()"
 							>
@@ -83,12 +82,12 @@
 
 				<footer class="modal-card-foot">
 					<div id="actions">
-						<a
+						<button
 							class="button is-primary"
-							href="#"
 							@click="submitModal()"
-							>Login</a
 						>
+							Login
+						</button>
 						<a
 							class="button is-github"
 							:href="apiDomain + '/auth/github/authorize'"
@@ -108,7 +107,7 @@
 						<router-link to="/register" v-if="isPage">
 							Don't have an account?
 						</router-link>
-						<a v-else href="#" @click="changeToRegisterModal()">
+						<a v-else @click="changeToRegisterModal()">
 							Don't have an account?
 						</a>
 					</p>

frontend/src/components/modals/Register.vue

@@ -115,12 +115,12 @@
 				</section>
 				<footer class="modal-card-foot">
 					<div id="actions">
-						<a
+						<button
 							class="button is-primary"
-							href="#"
 							@click="submitModal()"
-							>Register</a
 						>
+							Register
+						</button>
 						<a
 							class="button is-github"
 							:href="apiDomain + '/auth/github/authorize'"
@@ -140,7 +140,7 @@
 						<router-link to="/login" v-if="isPage">
 							Already have an account?
 						</router-link>
-						<a v-else href="#" @click="changeToLoginModal()">
+						<a v-else @click="changeToLoginModal()">
 							Already have an account?
 						</a>
 					</p>

frontend/src/components/modals/Report.vue

@@ -187,15 +187,11 @@
 				</div>
 			</template>
 			<template #footer>
-				<a class="button is-success" @click="create()" href="#">
+				<button class="button is-success" @click="create()">
 					<i class="material-icons save-changes">done</i>
 					<span>&nbsp;Create</span>
-				</a>
-				<a
-					class="button is-danger"
-					href="#"
-					@click="closeModal('report')"
-				>
+				</button>
+				<a class="button is-danger" @click="closeModal('report')">
 					<span>&nbsp;Cancel</span>
 				</a>
 			</template>

frontend/src/components/modals/RequestSong.vue

@@ -23,14 +23,13 @@
 						/>
 					</p>
 					<p class="control">
-						<a
+						<button
 							class="button is-info"
 							@click.prevent="searchForSongs()"
-							href="#"
-							><i class="material-icons icon-with-button"
-								>search</i
-							>Search</a
 						>
+							<i class="material-icons icon-with-button">search</i
+							>Search
+						</button>
 					</p>
 				</div>
 
@@ -73,13 +72,12 @@
 						</template>
 					</search-query-item>
 
-					<a
+					<button
 						class="button is-default load-more-button"
 						@click.prevent="loadMoreSongs()"
-						href="#"
 					>
 						Load more...
-					</a>
+					</button>
 				</div>
 
 				<!-- Import a playlist from youtube -->
@@ -118,14 +116,14 @@
 									</option>
 								</select>
 							</span>
-							<a
+							<button
 								class="button is-info"
 								@click.prevent="importPlaylist()"
-								href="#"
-								><i class="material-icons icon-with-button"
-									>publish</i
-								>Import</a
 							>
+								<i class="material-icons icon-with-button"
+									>publish</i
+								>Import
+							</button>
 						</p>
 					</div>
 				</div>

frontend/src/components/modals/ViewReport.vue

@@ -90,7 +90,7 @@
 				</i>
 				Edit Song
 			</a>
-			<a class="button is-success" href="#" @click="resolve()">
+			<button class="button is-success" @click="resolve()">
 				<i
 					class="material-icons icon-with-button"
 					content="Resolve"
@@ -99,7 +99,7 @@
 					done_all
 				</i>
 				Resolve
-			</a>
+			</button>
 		</template>
 	</modal>
 </template>

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

@@ -95,9 +95,7 @@
 					</div>
 				</div>
 				<footer class="card-footer">
-					<a class="card-footer-item" @click="banIP()" href="#"
-						>Ban IP</a
-					>
+					<a class="card-footer-item" @click="banIP()">Ban IP</a>
 				</footer>
 			</div>
 		</div>

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

@@ -48,9 +48,8 @@
 							</ul>
 						</td>
 						<td id="options-column">
-							<a
+							<button
 								class="button is-primary"
-								href="#"
 								@click="view(report._id)"
 								content="Expand"
 								v-tippy
@@ -59,10 +58,9 @@
 									open_in_full
 								</i>
 								Expand
-							</a>
-							<a
+							</button>
+							<button
 								class="button is-success"
-								href="#"
 								@click="resolve(report._id)"
 								content="Resolve"
 								v-tippy
@@ -71,7 +69,7 @@
 									done_all
 								</i>
 								Resolve
-							</a>
+							</button>
 						</td>
 					</tr>
 				</tbody>

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

@@ -118,12 +118,12 @@
 										placeholder="Genre"
 										@keyup.enter="addGenre()"
 									/>
-									<a
+									<button
 										class="button is-info"
-										href="#"
 										@click="addGenre()"
-										>Add genre</a
 									>
+										Add genre
+									</button>
 								</p>
 								<span
 									v-for="(genre, index) in newStation.genres"
@@ -146,12 +146,12 @@
 										placeholder="Blacklisted Genre"
 										@keyup.enter="addBlacklistedGenre()"
 									/>
-									<a
+									<button
 										class="button is-info"
-										href="#"
 										@click="addBlacklistedGenre()"
-										>Add blacklisted genre</a
 									>
+										Add blacklisted genre
+									</button>
 								</p>
 								<span
 									v-for="(
@@ -171,10 +171,7 @@
 					</div>
 				</div>
 				<footer class="card-footer">
-					<a
-						class="card-footer-item"
-						href="#"
-						@click="createStation()"
+					<a class="card-footer-item" @click="createStation()"
 						>Create</a
 					>
 				</footer>

frontend/src/pages/ResetPassword.vue

@@ -31,9 +31,7 @@
 							</p>
 
 							<p class="content-box-optional-helper">
-								<a href="#" @click="step = 2"
-									>Already have a code?</a
-								>
+								<a @click="step = 2">Already have a code?</a>
 							</p>
 
 							<div class="content-box-inputs">
@@ -53,18 +51,18 @@
 										/>
 									</p>
 									<p class="control">
-										<a
+										<button
 											class="button is-info"
-											href="#"
 											@click="submitEmail()"
-											><i
+										>
+											<i
 												class="
 													material-icons
 													icon-with-button
 												"
 												>mail</i
-											>Request</a
-										>
+											>Request
+										</button>
 									</p>
 								</div>
 								<transition name="fadein-helpbox">
@@ -92,7 +90,6 @@
 
 							<p class="content-box-optional-helper">
 								<a
-									href="#"
 									@click="
 										email.value ? submitEmail() : (step = 1)
 									"
@@ -115,18 +112,18 @@
 										/>
 									</p>
 									<p class="control">
-										<a
+										<button
 											class="button is-info"
-											href="#"
 											@click="verifyCode()"
-											><i
+										>
+											<i
 												class="
 													material-icons
 													icon-with-button
 												"
 												>vpn_key</i
-											>Verify</a
-										>
+											>Verify
+										</button>
 									</p>
 								</div>
 							</div>
@@ -228,14 +225,13 @@
 									/>
 								</transition>
 
-								<a
+								<button
 									id="change-password-button"
 									class="button is-success"
-									href="#"
 									@click="changePassword()"
 								>
-									Change password</a
-								>
+									Change password
+								</button>
 							</div>
 						</div>
 
@@ -248,10 +244,7 @@
 								>check_circle</i
 							>
 							<h2>Password successfully {{ mode }}</h2>
-							<router-link
-								class="button is-dark"
-								href="#"
-								to="/settings"
+							<router-link class="button is-dark" to="/settings"
 								><i class="material-icons icon-with-button"
 									>undo</i
 								>Return to Settings</router-link
@@ -268,10 +261,7 @@
 								Password {{ mode }} failed, please try again
 								later
 							</h2>
-							<router-link
-								class="button is-dark"
-								href="#"
-								to="/settings"
+							<router-link class="button is-dark" to="/settings"
 								><i class="material-icons icon-with-button"
 									>undo</i
 								>Return to Settings</router-link

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

@@ -90,7 +90,7 @@
 
 			<hr class="section-horizontal-rule" />
 
-			<router-link to="/set_password" class="button is-default" href="#"
+			<router-link to="/set_password" class="button is-default"
 				><i class="material-icons icon-with-button">create</i>Set
 				Password
 			</router-link>

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

@@ -88,14 +88,13 @@
 		<p v-else class="nothing-here-text scrollable-list">
 			No Playlists found
 		</p>
-		<a
+		<button
 			class="button create-playlist tab-actionable-button"
-			href="#"
 			@click="openModal('createPlaylist')"
 		>
 			<i class="material-icons icon-with-button">create</i>
 			<span> Create Playlist </span>
-		</a>
+		</button>
 	</div>
 </template>
 

frontend/src/pages/Station/index.vue

@@ -80,7 +80,7 @@
 									>
 										check_circle
 									</i>
-									<a href="#">
+									<a>
 										<!-- Favorite Station Button -->
 										<i
 											v-if="