feat: added wiki pages inside the app; todo: add a back button

src/components/pages/InfoArl.vue

@@ -1,8 +1,49 @@
 <template>
 	<div>
 		<h1 class="mb-8 text-5xl">{{ $t('settings.login.arl.question') }}</h1>
+		<p class="mb-2 text-base">
+			Deezer keeps track of login session by using a cookie called ARL.<br>
+			deemix uses that cookie to get the metadata that it needs to download the tracks from Deezer.<br>
+			ARLs last for 3 months, after that Deezer asks you to log in again. The same method is used in deemix<br>
+			Following one of the guides below you can get your own account ARL.
+		</p>
 
-		<p></p>
+		<h3 class="mt-6 text-3xl">Chrome (Easy way)</h3>
+		<ul class="mb-2 text-base">
+			<li>Open Chrome</li>
+			<li>Go to www.deezer.com and log into your account</li>
+			<li>Click on the little "lock" icon next the URL</li>
+			<li>Click on Cookies > deezer.com > cookies > arl</li>
+			<li>Select the string next to Content, and Copy</li>
+			<li>That's your ARL, now you can use it in the app</li>
+		</ul>
+
+		<h3 class="mt-6 text-3xl">Chrome</h3>
+		<ul class="mb-2 text-base">
+			<li>Open Chrome</li>
+			<li>Go to www.deezer.com and log into your account</li>
+			<li>After logging in press F12 to open up Developer Tools</li>
+			<li>Go under the Application tab (if you don't see it click the double arrow)</li>
+			<li>Open the cookie dropdown</li>
+			<li>Select www.deezer.com</li>
+			<li>Find the `arl` cookie (It should be 192 chars long) </li>
+			<li>That's your ARL, now you can use it in the app</li>
+		</ul>
+
+		<p class="mb-2 text-base">Here's a <a href="https://youtu.be/O6PRT47_yds" target="_blank">video guide</a></p>
+
+		<h3 class="mt-6 text-3xl">Firefox</h3>
+		<ul class="mb-2 text-base">
+			<li>Open Firefox</li>
+			<li>Go to www.deezer.com and log into your account</li>
+			<li>Afer logging in press F12 to open up Developer Tools</li>
+			<li>Go under the Storage tab (if you don't see it click the double arrow)</li>
+			<li>Open the cookie dropdown</li>
+			<li>Select www.deezer.com</li>
+			<li>Find the `arl` cookie (It should be 192 chars long)</li>
+			<li>Make sure only copy the value and not the entire cookie</li>
+			<li>That's your ARL, now you can use it in the app</li>
+		</ul>
 	</div>
 </template>
 

src/components/pages/InfoSpotifyFeatures.vue

@@ -1,6 +1,31 @@
 <template>
 	<div>
 		<h1 class="mb-8 text-5xl">{{ $t('settings.spotify.question') }}</h1>
+		<p class="mb-2 text-base">
+			"Spotify Features" is a set of features that lets you convert Spotify tracks and albums links into Deezer ones.
+			If you provide a Spotify Playlist link the app will autmatically convert all the links of the tracks inside it into deezer tracks.
+			Enabling this set of features will let you see your public Spotify playlists in the favorites tab as well.
+		</p>
+		<p class="mb-2 text-base">For security reasons you will need to provide your own Client ID and Secret</p>
+
+		<h2 class="mt-6 text-3xl">How do I get my Client ID and Secret?</h2>
+		<p class="mb-2 text-base">Connect to <a href="https://developer.spotify.com/dashboard" target="_blank">Spotify for Developers's Dashboard</a> and login with your Spotify account.</p>
+		<p class="mb-2 text-base">
+			Click on "Create an App".<br>
+			<img src="https://i.imgur.com/YFz7rHj.png" alt="Create an App button on Spotify for Developers's Dashboard">
+		</p>
+		<p class="mb-2 text-base">
+			Fill out the "App name" and "App description" fields and check both checkboxes. Then click on the "Create" button.<br>
+			<img src="https://i.imgur.com/A9cvDkK.png" alt="Create an app form">
+		</p>
+		<p class="mb-2 text-base">
+			Now you can see the Client ID. If you click on "Show Client Secret" the client secret will be revealed.<br>
+			<img src="https://i.imgur.com/foEfIhO.png" alt="Screen of client ID and Secret">
+		</p>
+		<p class="mb-2 text-base">Now you can copy-paste those results in the appropriate fields in the settings.</p>
+
+		<h2 class="mt-6 text-3xl">How do I get my Spotify Username?</h2>
+		<p class="mb-2 text-base">You can get your Spotify Username from the <a href="https://www.spotify.com/it/account/overview/" target="_blank">Overview page on Spotify's Website</a>.</p>
 	</div>
 </template>