From fcc588839cc94384cc8f2ffacb7d32671b4fa258 Mon Sep 17 00:00:00 2001
From: Simos Sigma <simos.sigma@gmail.com>
Date: Wed, 2 Feb 2022 14:53:23 +0000
Subject: [PATCH] Update InfoArl.vue

---
 src/components/pages/InfoArl.vue | 62 +++++++++++++++-----------------
 1 file changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/components/pages/InfoArl.vue b/src/components/pages/InfoArl.vue
index 72634bd..fc7e1dd 100644
--- a/src/components/pages/InfoArl.vue
+++ b/src/components/pages/InfoArl.vue
@@ -1,48 +1,44 @@
 <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 class="mb-2 text-base">{{ $t('settings.login.arl.howTo') }}</p>
 
-		<h3 class="mt-6 text-3xl">Chrome (Easy way)</h3>
+		<h3 class="mt-6 text-3xl">{{ $t('settings.login.arl.chromeSteps.easyWay.title') }}</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>
+			<li>{{ $t('settings.login.arl.commonSteps.stepOne') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepTwo') }}</li>
+			<li>{{ $t('settings.login.arl.chromeSteps.easyWay.stepThree') }}</li>
+			<li>{{ $t('settings.login.arl.chromeSteps.easyWay.stepFour') }}</li>
+			<li>{{ $t('settings.login.arl.chromeSteps.easyWay.stepFive') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepLast') }}</li>
 		</ul>
 
-		<h3 class="mt-6 text-3xl">Chrome</h3>
+		<h3 class="mt-6 text-3xl">{{ $t('settings.login.arl.chromeSteps.title') }}</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>
+			<li>{{ $t('settings.login.arl.commonSteps.stepOne') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepTwo') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepThree') }}</li>
+			<li>{{ $t('settings.login.arl.chromeSteps.stepFour') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepFive') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepSix') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepSeven') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepEight') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepNine') }}</li>
 		</ul>
 
-		<p class="mb-2 text-base">Here's a <a href="https://youtu.be/O6PRT47_yds" target="_blank">video guide</a></p>
+		<p class="mb-2 text-base">{{ $t('settings.login.arl.chromeSteps.hereIs') }} <a href="https://youtu.be/O6PRT47_yds" target="_blank">{{ $t('settings.login.arl.chromeSteps.videoGuide') }}</a></p>
 
-		<h3 class="mt-6 text-3xl">Firefox</h3>
+		<h3 class="mt-6 text-3xl">{{ $t('settings.login.arl.firefoxSteps.title') }}</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>
+			<li>{{ $t('settings.login.arl.firefoxSteps.stepOne') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepTwo') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepThree') }}</li>
+			<li>{{ $t('settings.login.arl.firefoxSteps.stepFour') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepFive') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepSix') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepSeven') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepEight') }}</li>
+			<li>{{ $t('settings.login.arl.commonSteps.stepNine') }}</li>
 		</ul>
 	</div>
 </template>