Added new languages, fixed accessibility for language selector

src/components/pages/Settings.vue

@@ -91,10 +91,12 @@
 					v-for="locale in locales"
 					:key="locale"
 					:class="{ 'locale-flag--current': currentLocale === locale }"
-					:title="locale"
+					:title="`${flags[locale].eng} (${flags[locale].name})`"
+					tabindex="0"
 					class="inline-flex items-center locale-flag"
 					@click="changeLocale(locale)"
-					v-html="flags[locale]"
+					@keyup.enter="changeLocale(locale)"
+					v-html="flags[locale].flag"
 				/>
 			</ul>
 		</div>

src/lang/en.js

@@ -222,7 +222,9 @@ const en = {
 		},
 		loginWithCredentials: {
 			title: 'Login with credentials',
-			login: 'Login'
+			login: 'Login',
+			email: 'E-mail',
+			password: 'Password'
 		},
 		appearance: {
 			title: 'Appearance',

src/lang/fil.js

@@ -1,4 +1,4 @@
-const ph = {
+const fil = {
 	globals: {
 		welcome: 'Welcome sa deemix',
 		back: 'bumalik',
@@ -386,4 +386,4 @@ const ph = {
 	}
 }
 
-export default ph
+export default fil

src/lang/index.js

@@ -1,3 +1,4 @@
+// Using ISO 639-1 where possible
 import it from '@/lang/it'
 import en from '@/lang/en'
 import es from '@/lang/es'
@@ -8,15 +9,16 @@ import pt from '@/lang/pt-pt'
 import pt_br from '@/lang/pt-br'
 import ru from '@/lang/ru'
 import tr from '@/lang/tr'
-import vn from '@/lang/vn'
+import vi from '@/lang/vi'
 import hr from '@/lang/hr'
 import ar from '@/lang/ar'
 import ko from '@/lang/ko'
-import ph from '@/lang/ph'
+import fil from '@/lang/fil'
 import zh_tw from '@/lang/zh-tw'
 import pl from '@/lang/pl'
-import gr from '@/lang/gr'
+import el from '@/lang/el'
 import sr from '@/lang/sr'
+import th from '@/lang/th'
 
 export const locales = {
 	it,
@@ -29,13 +31,14 @@ export const locales = {
 	pt_br,
 	ru,
 	tr,
-	vn,
+	vi,
 	hr,
 	ar,
 	ko,
-	ph,
+	fil,
 	zh_tw,
 	pl,
-	gr,
-	sr
+	el,
+	sr,
+	th
 }

src/lang/it.js

@@ -222,7 +222,9 @@ const it = {
 		},
 		loginWithCredentials: {
 			title: 'Login con credentiali',
-			login: 'Login'
+			login: 'Login',
+			email: 'E-mail',
+			password: 'Password'
 		},
 		appearance: {
 			title: 'Aspetto',

src/lang/vi.js

@@ -1,4 +1,4 @@
-const vn = {
+const vi = {
 	globals: {
 		welcome: 'Chào mừng đến với deemix',
 		back: 'trở lại',
@@ -354,4 +354,4 @@ const vn = {
 	}
 }
 
-export default vn
+export default vi

src/utils/flags.js

@@ -10,30 +10,34 @@ import ru from 'flag-icon-css/flags/4x3/ru.svg'
 import tr from 'flag-icon-css/flags/4x3/tr.svg'
 import vn from 'flag-icon-css/flags/4x3/vn.svg'
 import hr from 'flag-icon-css/flags/4x3/hr.svg'
-import ar from '@/assets/ar.svg'
 import ko from 'flag-icon-css/flags/4x3/kr.svg'
 import ph from 'flag-icon-css/flags/4x3/ph.svg'
 import tw from 'flag-icon-css/flags/4x3/tw.svg'
 import pl from 'flag-icon-css/flags/4x3/pl.svg'
 import rs from 'flag-icon-css/flags/4x3/rs.svg'
+import gr from 'flag-icon-css/flags/4x3/gr.svg'
+import th from 'flag-icon-css/flags/4x3/th.svg'
+import ar from '@/assets/ar.svg'
 
 export const flags = {
-	it,
-	en: gb,
-	es,
-	de,
-	fr,
-	id,
-	pt,
-	pt_br: br,
-	ru,
-	tr,
-	vn,
-	hr,
-	ar,
-	ko,
-	ph,
-	zh_tw: tw,
-	pl, 
-	sr: rs
+	it: { name: 'Italiano', eng: 'Italian', flag: it },
+	en: { name: 'English', eng: 'English', flag: gb },
+	es: { name: 'Español', eng: 'Spanish', flag: es },
+	de: { name: 'Deutsch', eng: 'German', flag: de },
+	fr: { name: 'Français', eng: 'French', flag: fr },
+	id: { name: 'Bahasa Indonesia', eng: 'Indonesian', flag: id },
+	pt: { name: 'Português', eng: 'Portuguese', flag: pt },
+	pt_br: { name: 'Português Brasileiro', eng: 'Portuguese of Brasil', flag: br },
+	ru: { name: 'Русский', eng: 'Russian', flag: ru },
+	tr: { name: 'Türkçe', eng: 'Turkish', flag: tr },
+	vi: { name: 'Tiếng Việt', eng: 'Vietnamese', flag: vn },
+	hr: { name: 'Hrvatski Jezik', eng: 'Croatian', flag: hr },
+	ar: { name: 'العربية', eng: 'Arabic', flag: ar },
+	ko: { name: '한국어', eng: 'Korean', flag: ko },
+	fil: { name: 'Wikang Filipino', eng: 'Filipino', flag: ph },
+	zh_tw: { name: '漢語', eng: 'Chinese', flag: tw },
+	pl: { name: 'Polszczyzna', eng: 'Polish', flag: pl },
+	el: { name: 'ελληνικά', eng: 'Greek', flag: gr },
+	sr: { name: 'српски језик', eng: 'Serbian', flag: rs },
+	th: { name: 'ไทย', eng: 'Thai', flag: th }
 }