vueify login page

CHANGELOG.md

@@ -11,6 +11,7 @@
   - `/config` - Help & Info ([#4374](https://github.com/pymedusa/Medusa/pull/4374))
   - `/addShows` - Add Shows ([#4564](https://github.com/pymedusa/Medusa/pull/4564))
   - `/addRecommended` - Add Recommended Shows ([#4564](https://github.com/pymedusa/Medusa/pull/4564))
+  - `/login` - Login ([#4634](https://github.com/pymedusa/Medusa/pull/4634))
 - Removed the old `/ui` route ([#4565](https://github.com/pymedusa/Medusa/pull/4565))
 - Added a simple "Loading..." message while the page is loading ([#4629](https://github.com/pymedusa/Medusa/pull/4629))
 - Expanded episode status management capabilities, added support for Downloaded, Archived ([#4647](https://github.com/pymedusa/Medusa/pull/4647))

medusa/server/web/core/authentication.py

@@ -57,12 +57,14 @@ class LoginHandler(BaseHandler):
     def get(self, *args, **kwargs):
         """
         Render the Login page
+
+        [Converted to VueRouter]
         """
         if self.get_current_user():
             self.redirect('/{page}/'.format(page=app.DEFAULT_PAGE))
         else:
-            t = PageTemplate(rh=self, filename='login.mako')
-            self.finish(t.render(title='Login', header='Login', topmenu='login'))
+            t = PageTemplate(rh=self, filename='index.mako')
+            self.finish(t.render(topmenu='login'))
 
     def post(self, *args, **kwargs):
         """

themes-default/slim/package.json

@@ -116,6 +116,7 @@
       "api",
       "jQuery",
       "axios",
+      "webRoot",
       "apiRoot",
       "apiKey"
     ],

themes-default/slim/static/js/api.js

@@ -1,11 +1,11 @@
-const baseUrl = $('body').attr('api-root');
-const idToken = $('body').attr('api-key');
+const baseUrl = document.body.getAttribute('web-root');
+const idToken = document.body.getAttribute('api-key');
 
 /**
  * Api client based on the axios client, to communicate with medusa's web routes, which return json data.
  */
 const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
-    baseURL: baseUrl.replace('api/v2/', ''),
+    baseURL: baseUrl + '/',
     timeout: 10000,
     headers: {
         Accept: 'application/json',
@@ -17,7 +17,7 @@ const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
  * Api client based on the axios client, to communicate with medusa's api v1.
  */
 const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
-    baseURL: baseUrl.replace('api/v2/', 'api/v1/' + idToken + '/'),
+    baseURL: baseUrl + '/api/v1/' + idToken + '/',
     timeout: 10000,
     headers: {
         Accept: 'application/json',
@@ -29,7 +29,7 @@ const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
  * Api client based on the axios client, to communicate with medusa's api v2.
  */
 const api = axios.create({ // eslint-disable-line no-unused-vars
-    baseURL: baseUrl,
+    baseURL: baseUrl + '/api/v2/',
     timeout: 10000,
     headers: {
         Accept: 'application/json',

themes-default/slim/static/js/core.js

@@ -2,7 +2,8 @@
 // @TODO Move these into common.ini when possible,
 //       currently we can't do that as browser.js and a few others need it before this is loaded
 const topImageHtml = '<img src="images/top.gif" width="31" height="11" alt="Jump to top" />'; // eslint-disable-line no-unused-vars
-const apiRoot = $('body').attr('api-root');
+const webRoot = $('body').attr('web-root');
+const apiRoot = webRoot + '/api/v2/';
 const apiKey = $('body').attr('api-key');
 
 const MEDUSA = {

themes-default/slim/static/js/router.js

@@ -2,6 +2,7 @@ const VueRouter = window.vueRouter;
 const { routes, httpVueLoader } = window;
 
 if (!window.router) {
+    const loginComponent = httpVueLoader('js/templates/login.vue');
     const configComponent = httpVueLoader('js/templates/config.vue');
     const addShowsComponent = httpVueLoader('js/templates/add-shows.vue');
     const addRecommendedComponent = httpVueLoader('js/templates/add-recommended.vue');
@@ -10,9 +11,16 @@ if (!window.router) {
     const notFoundComponent = httpVueLoader('js/templates/http/404.vue');
 
     const router = new VueRouter({
-        base: document.body.getAttribute('api-root').replace('api/v2/', ''),
+        base: document.body.getAttribute('web-root') + '/',
         mode: 'history',
         routes: Object.assign(routes || [], [{
+            path: '/login',
+            name: 'login',
+            meta: {
+                title: 'Login'
+            },
+            component: loginComponent
+        }, {
             path: '/config',
             name: 'config',
             meta: {

themes-default/slim/static/js/store.js

@@ -483,7 +483,6 @@ const store = new Puex({
 
 const websocketUrl = (() => {
     const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const webRoot = apiRoot.replace('/api/v2/', '');
     const WSMessageUrl = '/ui';
     return proto + '//' + window.location.hostname + ':' + window.location.port + webRoot + '/ws' + WSMessageUrl;
 })();

themes-default/slim/static/js/templates/login.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="login">
+        <form action="" method="post">
+            <h1>Medusa</h1>
+            <div class="ctrlHolder"><input class="inlay" name="username" type="text" placeholder="Username" autocomplete="off" /></div>
+            <div class="ctrlHolder"><input class="inlay" name="password" type="password" placeholder="Password" autocomplete="off" /></div>
+            <div class="ctrlHolder">
+                <label class="remember_me" title="for 30 days"><input class="inlay" id="remember_me" name="remember_me" type="checkbox" value="1" checked="checked" /> Remember me</label>
+                <input class="button" name="submit" type="submit" value="Login" />
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: 'login',
+    mounted() {
+        this.$root.$emit('loaded');
+    }
+};
+</script>
+
+<style>
+</style>

themes-default/slim/views/layouts/main.mako

@@ -49,7 +49,8 @@
         <link rel="stylesheet" type="text/css" href="css/lib/vue-snotify-material.css?${sbPID}"/>
         <%block name="css" />
     </head>
-    <body ${('data-controller="' + controller + '" data-action="' + action + '" api-key="' + app.API_KEY +'"  api-root="' + app.WEB_ROOT + '/api/v2/"', '')[title == 'Login']}>
+    <% attributes = 'data-controller="' + controller + '" data-action="' + action + '" api-key="' + app.API_KEY + '"' %>
+    <body ${('', attributes)[bool(loggedIn)]} web-root="${app.WEB_ROOT}">
         <div v-cloak id="vue-wrap" class="container-fluid">
 
             <!-- These are placeholders used by the displayShow template. As they transform to full width divs, they need to be located outside the template. -->

themes-default/slim/views/partials/header.mako

@@ -126,8 +126,8 @@
                     <div style="clear:both;"></div>
                 </li>
             </ul>
-    % endif
         </div><!-- /.navbar-collapse -->
+    % endif
     </div><!-- /.container-fluid -->
 </nav>
 <!-- END HEADER -->

themes-default/slim/views/vue-components/asset.mako

@@ -33,8 +33,8 @@ Vue.component('asset', {
     computed: {
         src() {
             const { error, seriesSlug, type, isVisible, lazy } = this;
-            const apiRoot = document.getElementsByTagName('body')[0].getAttribute('api-root');
-            const apiKey = document.getElementsByTagName('body')[0].getAttribute('api-key');
+            const apiRoot = document.body.getAttribute('web-root') + '/api/v2/';
+            const apiKey = document.body.getAttribute('api-key');
 
             if (error || lazy && !isVisible || !seriesSlug || !type) {
                 return this.default;

themes/dark/assets/js/api.js

@@ -1,11 +1,11 @@
-const baseUrl = $('body').attr('api-root');
-const idToken = $('body').attr('api-key');
+const baseUrl = document.body.getAttribute('web-root');
+const idToken = document.body.getAttribute('api-key');
 
 /**
  * Api client based on the axios client, to communicate with medusa's web routes, which return json data.
  */
 const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
-    baseURL: baseUrl.replace('api/v2/', ''),
+    baseURL: baseUrl + '/',
     timeout: 10000,
     headers: {
         Accept: 'application/json',
@@ -17,7 +17,7 @@ const apiRoute = axios.create({ // eslint-disable-line no-unused-vars
  * Api client based on the axios client, to communicate with medusa's api v1.
  */
 const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
-    baseURL: baseUrl.replace('api/v2/', 'api/v1/' + idToken + '/'),
+    baseURL: baseUrl + '/api/v1/' + idToken + '/',
     timeout: 10000,
     headers: {
         Accept: 'application/json',
@@ -29,7 +29,7 @@ const apiv1 = axios.create({ // eslint-disable-line no-unused-vars
  * Api client based on the axios client, to communicate with medusa's api v2.
  */
 const api = axios.create({ // eslint-disable-line no-unused-vars
-    baseURL: baseUrl,
+    baseURL: baseUrl + '/api/v2/',
     timeout: 10000,
     headers: {
         Accept: 'application/json',

themes/dark/assets/js/core.js

@@ -2,7 +2,8 @@
 // @TODO Move these into common.ini when possible,
 //       currently we can't do that as browser.js and a few others need it before this is loaded
 const topImageHtml = '<img src="images/top.gif" width="31" height="11" alt="Jump to top" />'; // eslint-disable-line no-unused-vars
-const apiRoot = $('body').attr('api-root');
+const webRoot = $('body').attr('web-root');
+const apiRoot = webRoot + '/api/v2/';
 const apiKey = $('body').attr('api-key');
 
 const MEDUSA = {