feat: added placeholder login form

src/components/pages/Settings.vue

@@ -60,6 +60,23 @@
 			</div>
 		</div>
 
+		<div class="settings-group">
+			<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.loginWithCredentials.title') }}</h3>
+
+			<form class="my-5 space-y-5" @submit.prevent="loginWithCredentials" ref="loginWithCredentialsForm">
+				<label>
+					<span>Username</span>
+					<input type="text" name="username">
+				</label>
+				<label>
+					<span>Password</span>
+					<input type="password" name="password">
+				</label>
+
+				<button class="btn btn-primary" type="submit">{{ $t('settings.loginWithCredentials.login') }}</button>
+			</form>
+		</div>
+
 		<div class="settings-group">
 			<h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3>
 
@@ -783,7 +800,8 @@ import { copyToClipboard } from '@/utils/utils'
 
 import BaseAccordion from '@/components/globals/BaseAccordion.vue'
 import TemplateVariablesList from '@components/settings/TemplateVariablesList.vue'
-import { fetchData, sendToServer } from '@/utils/api'
+import { fetchData } from '@/utils/api'
+import { getFormItem } from '@/utils/forms'
 
 export default {
 	components: {
@@ -967,6 +985,14 @@ export default {
 				this.loggedInViaDeezer(res.arl)
 			}
 		},
+		loginWithCredentials() {
+			const fromLoginForm = getFormItem(this.$refs.loginWithCredentialsForm)
+
+			const { username } = fromLoginForm('username')
+			const { password } = fromLoginForm('password')
+
+			// console.log({ username,password })
+		},
 		appLogin(e) {
 			socket.emit('applogin')
 		},

src/lang/en.js

@@ -218,6 +218,10 @@ const en = {
 			logout: 'Logout',
 			login: 'Login via deezer.com'
 		},
+		loginWithCredentials: {
+			title: 'Login with credentials',
+			login: 'Login'
+		},
 		appearance: {
 			title: 'Appearance',
 			slimDownloadTab: 'Slim download tab',

src/lang/it.js

@@ -220,6 +220,10 @@ const it = {
 			logout: 'Disconnettiti',
 			login: 'Accedi tramite deezer.com'
 		},
+		loginWithCredentials: {
+			title: 'Login con credentiali',
+			login: 'Login'
+		},
 		appearance: {
 			title: 'Aspetto',
 			slimDownloadTab: 'Tab dei download slim',

src/utils/forms.js

@@ -0,0 +1,12 @@
+/**
+ * @param {HTMLFormElement} formEl
+ * @returns {function(item: string): {}}
+ * @since	1.6.1
+ */
+export const getFormItem = formEl => item => {
+	const element = formEl.elements.namedItem(item)
+
+	return {
+		[item]: element.value
+	}
+}