Add stremio login (#5)

src/components/Authentication.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+    stremioAPIBase: {
+        type: String,
+        required: true
+    },
+})
+
+const authKey = ref('')
+const email = ref('')
+const password = ref('')
+const loginButtonText = ref('Login')
+const emits = defineEmits(['auth-key'])
+
+async function loginUserPassword() {
+    try {
+        fetch(`${props.stremioAPIBase}login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                authKey: null,
+                email: email.value,
+                password: password.value,
+            })
+        }).then((resp) => {
+            resp.json().then((data) => {
+                console.log("Auth data:" + data)
+                authKey.value = data.result.authKey
+                loginButtonText.value = 'Logged in'
+                emitAuthKey()
+            })
+        })
+    } catch (err) {
+        console.error(err);
+        alert('Login failed: ' + err.message);
+    }
+}
+
+function emitAuthKey() {
+    emits('auth-key', authKey.value.replaceAll('"', '').trim())
+}
+
+</script>
+
+<template>
+    <legend>Step 0: Authenticate</legend>
+    <p class="grouped">
+        <input type="text" v-model="email" placeholder="Stremio E-mail">
+        <input type="password" v-model="password" placeholder="Stremio Password">
+        <button class="button primary" @click="loginUserPassword">
+            Login
+        </button>
+    </p>
+    <p>
+        <strong>OR</strong>
+    </p>
+    <p class="grouped">
+        <input type="password" v-model="authKey" v-on:input="emitAuthKey" placeholder="Paste Stremio AuthKey here...">
+    </p>
+</template>
+
+<style scoped>
+.sortable-list .item {
+    list-style: none;
+    display: flex;
+    cursor: move;
+    align-items: center;
+    border-radius: 5px;
+    padding: 10px 13px;
+    margin-bottom: 11px;
+    /* box-shadow: 0 2px 4px rgba(0,0,0,0.06); */
+    border: 1px solid #ccc;
+    justify-content: space-between;
+}
+
+.dark .sortable-list .item {
+    border: 1px solid #434242;
+}
+
+.item .details {
+    display: flex;
+    align-items: center;
+}
+
+.item .details img {
+    height: 60px;
+    width: 60px;
+    pointer-events: none;
+    margin-right: 12px;
+    object-fit: contain;
+    object-position: center;
+    border-radius: 30%;
+    background-color: #262626;
+
+}
+</style>

src/components/Configuration.vue

@@ -2,21 +2,17 @@
 import { ref } from 'vue'
 import draggable from 'vuedraggable'
 import AddonItem from './AddonItem.vue'
+import Authentication from './Authentication.vue'
 
 const stremioAPIBase = "https://api.strem.io/api/"
-
-const stremioAuthKey = ref('')
+const dragging = false
+let stremioAuthKey = ref('');
 let addons = ref([])
 let loadAddonsButtonText = ref('Load Addons')
-const dragging = false
-
-function getCleansedStremioAuthKey() {
-    return stremioAuthKey.value.replaceAll('"', '').trim();
-}
 
 function loadUserAddons() {
-    const cleansedAuthKey = getCleansedStremioAuthKey()
-    if (!cleansedAuthKey) {
+    const key = stremioAuthKey.value
+    if (!key) {
         console.error('No auth key provided')
         return
     }
@@ -29,7 +25,7 @@ function loadUserAddons() {
         method: 'POST',
         body: JSON.stringify({
             type: 'AddonCollectionGet',
-            authKey: cleansedAuthKey,
+            authKey: key,
             update: true,
         })
     }).then((resp) => {
@@ -50,8 +46,8 @@ function loadUserAddons() {
 }
 
 function syncUserAddons() {
-    const cleansedAuthKey = getCleansedStremioAuthKey()
-    if (!cleansedAuthKey) {
+    const key = stremioAuthKey.value
+    if (!key) {
         console.error('No auth key provided')
         return
     }
@@ -62,7 +58,7 @@ function syncUserAddons() {
         method: 'POST',
         body: JSON.stringify({
             type: 'AddonCollectionSet',
-            authKey: cleansedAuthKey,
+            authKey: key,
             addons: addons.value,
         })
     }).then((resp) => {
@@ -88,7 +84,6 @@ function removeAddon(idx) {
     addons.value.splice(idx, 1)
 }
 
-
 function getNestedObjectProperty(obj, path, defaultValue = null) {
     try {
         return path.split('.').reduce((acc, part) => acc && acc[part], obj)
@@ -97,6 +92,12 @@ function getNestedObjectProperty(obj, path, defaultValue = null) {
     }
 }
 
+function setAuthKey(authKey) {
+    stremioAuthKey.value = authKey
+    console.log('AuthKey set to: ', stremioAuthKey.value)
+}
+
+
 </script>
 
 <template>
@@ -104,16 +105,16 @@ function getNestedObjectProperty(obj, path, defaultValue = null) {
         <h2>Configure</h2>
         <form onsubmit="return false;">
             <fieldset>
-                <legend>Step 0: Paste Stremio AuthKey</legend>
-                <p class="grouped">
-                    <input type="password" v-model="stremioAuthKey" placeholder="Paste Stremio AuthKey here...">
-                    <button class="button primary" @click="loadUserAddons">
-                        {{ loadAddonsButtonText }}
-                    </button>
-                </p>
+                <Authentication :stremioAPIBase="stremioAPIBase" @auth-key="setAuthKey" />
             </fieldset>
             <fieldset id="form_step1">
-                <legend>Step 1: Re-Order Addons</legend>
+                <legend>Step 1: Load Addons</legend>
+                <button class="button primary" @click="loadUserAddons">
+                    {{ loadAddonsButtonText }}
+                </button>
+            </fieldset>
+            <fieldset id="form_step2">
+                <legend>Step 2: Re-Order Addons</legend>
                 <draggable :list="addons" item-key="transportUrl" class="sortable-list" ghost-class="ghost"
                     @start="dragging = true" @end="dragging = false">
                     <template #item="{ element, index }">
@@ -125,8 +126,8 @@ function getNestedObjectProperty(obj, path, defaultValue = null) {
                     </template>
                 </draggable>
             </fieldset>
-            <fieldset id="form_step2">
-                <legend>Step 2: Sync Addons</legend>
+            <fieldset id="form_step3">
+                <legend>Step 3: Sync Addons</legend>
                 <button type="button" class="button primary icon" @click="syncUserAddons">Sync to Stremio
                     <img src="https://icongr.am/feather/loader.svg?size=16&amp;color=ffffff" alt="icon">
                 </button>

src/components/FAQ.vue

@@ -15,6 +15,17 @@
                 configurations.
             </p>
         </details>
+        <details>
+            <summary>
+                Are my credentials safe?
+            </summary>
+            <p>
+                Yes. We only use your credentials to authenticate with the Stremio API. We do not store them in any way; as soon as you refresh the page they are gone.
+            </p>
+            <p>
+                If you're still in doubt, we highly encourage you to go read the source code. You'll see there's no hidden funny business going on.
+            </p>
+        </details>
         <details>
             <summary>
                 What is the developer console and how do I open it?

src/components/Summary.vue

@@ -2,29 +2,47 @@
   <section id="features">
     <h2>Why?</h2>
     <p>
-      Stremio currently doesn't allow users to change the order that their installed addons appear on the home
-      screen.
-      As a work around, it is common for users to remove and re-install addons in the order they want
-      them to appear. This is a tedious and cumbersome process. This addon uses the internal Stremio API to
-      manipulate addon order without having to add/remove them.
+      Stremio currently doesn't allow users to change the order that their
+      installed addons appear on the home screen. As a work around, it is common
+      for users to remove and re-install addons in the order they want them to
+      appear. This is a tedious and cumbersome process. This addon uses the
+      internal Stremio API to manipulate addon order without having to
+      add/remove them.
     </p>
     <p>
-      This is a <strong>workaround</strong> and not a <strong>solution</strong>. It is not recommended to
-      use this tool unless you are comfortable with the risks involved.
+      This is a <strong>workaround</strong> and not a <strong>solution</strong>.
+      It is not recommended to use this tool unless you are comfortable with the
+      risks involved.
       <strong>No support or warranty is given.</strong>
     </p>
     <h3>How?</h3>
     <ol>
-      <li>Login to <a href="https://web.stremio.com/" target="_blank">https://web.stremio.com/</a> using your Stremio
-        credentials in your browser.</li>
-      <li>
-        Open the developer console <a href="#faq">(?)</a> and paste the follow code snippet:
-        <code>JSON.parse(localStorage.getItem("profile")).auth.key</code>
-      </li>
-      <li>Take the output value and paste it into the form below.</li>
+      <li>Connect your Stremio account. We support 2 different authentication methods:</li>
+      <ul>
+        <li>Login using your Stremio account (Facebook login is <strong>not supported</strong>)</li>
+        <li>Login using an authentication key</li>
+        <ul>
+          <li>
+            Login to
+            <a href="https://web.stremio.com/" target="_blank"
+              >https://web.stremio.com/</a
+            >
+            using your Stremio credentials in your browser.
+          </li>
+          <li>
+            Open the developer console <a href="#faq">(?)</a> and paste the
+            follow code snippet:
+            <code>JSON.parse(localStorage.getItem("profile")).auth.key</code>
+          </li>
+          <li>Take the output value and paste it into the form below.</li>
+        </ul>
+      </ul>
       <li>Click 'Load Addons' to load your profiles addons.</li>
       <li>Re-order your addons as you like.</li>
-      <li>Click the 'Sync To Stremio' button to sync the changes back to your profile.</li>
+      <li>
+        Click the 'Sync To Stremio' button to sync the changes back to your
+        profile.
+      </li>
     </ol>
   </section>
 </template>