Refactors UserAuth and ProfileEdit pages not to use Corebase

kolibri/core/assets/src/core-app/apiSpec.js

@@ -36,6 +36,7 @@ import PermissionsIcon from '../views/PermissionsIcon';
 import CoreBase from '../views/CoreBase';
 import AppBarPage from '../views/CorePage/AppBarPage';
 import AppBar from '../views/AppBar';
+import AppError from '../views/AppError';
 import ImmersivePage from '../views/CorePage/ImmersivePage';
 import ScrollingHeader from '../views/CoreBase/ScrollingHeader';
 import SidePanelModal from '../views/SidePanelModal';
@@ -71,10 +72,12 @@ import UserType from '../utils/UserType';
 import * as syncTaskUtils from '../utils/syncTaskUtils';
 import samePageCheckGenerator from '../utils/samePageCheckGenerator';
 import Backdrop from '../views/Backdrop';
+import CoreBanner from '../views/CoreBanner';
 import CoreSnackbar from '../views/CoreSnackbar';
 import CoreMenu from '../views/CoreMenu';
 import CoreMenuDivider from '../views/CoreMenu/CoreMenuDivider';
 import CoreMenuOption from '../views/CoreMenu/CoreMenuOption';
+import GlobalSnackbar from '../views/GlobalSnackbar';
 import heartbeat from '../heartbeat';
 import CoreTable from '../views/CoreTable';
 import UserTable from '../views/UserTable';
@@ -160,6 +163,7 @@ export default {
       PermissionsIcon,
       AppBar,
       AppBarPage,
+      AppError,
       ImmersivePage,
       CoreBase,
       SidePanelModal,
@@ -173,11 +177,13 @@ export default {
       PointsIcon,
       AuthMessage,
       FilterTextbox,
+      CoreBanner,
       CoreSnackbar,
       CoreMenu,
       CoreMenuDivider,
       CoreMenuOption,
       CoreTable,
+      GlobalSnackbar,
       UserTable,
       CoreInfoIcon,
       InteractionList,

kolibri/plugins/user_auth/assets/src/views/UserAuthIndex.vue

@@ -1,50 +1,25 @@
 <template>
 
   <div>
-    <CoreBase
-      :showDemoBanner="demoBannerRoute"
-      :immersivePage="false"
-      :immersivePagePrimary="false"
-      :fullScreen="true"
-    >
+    <UserAuthLayout>
       <router-view />
-    </CoreBase>
+    </UserAuthLayout>
   </div>
 
 </template>
 
 
 <script>
 
-  import CoreBase from 'kolibri.coreVue.components.CoreBase';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { createTranslator } from 'kolibri.utils.i18n';
   import { ComponentMap } from '../constants';
-
-  const tempTranslator = createTranslator('UserIndex', {
-    signUpStep1Title: {
-      message: 'Step 1 of 2',
-      context: 'Indicates at which stage of the sign up process the user is at.',
-    },
-    signUpStep2Title: {
-      message: 'Step 2 of 2',
-      context: 'Indicates at which stage of the sign up process the user is at.',
-    },
-  });
+  import UserAuthLayout from './UserAuthLayout';
 
   export default {
     name: 'UserAuthIndex',
-    components: { CoreBase },
+    components: { UserAuthLayout },
     mixins: [commonCoreStrings],
     computed: {
-      demoBannerRoute() {
-        return [
-          ComponentMap.SIGN_IN,
-          ComponentMap.FACILITY_SELECT,
-          ComponentMap.AUTH_SELECT,
-          ComponentMap.NEW_PASSWORD,
-        ].includes(this.$route.name);
-      },
       redirect: {
         get() {
           return this.$store.state.signIn.redirect;
@@ -66,8 +41,10 @@
       },
     },
     created() {
-      // Check for redirect param and store it in vuex
-      // otherwise it'll be lost when the route changes.
+      /*
+       * Check for redirect param and store it in vuex
+       * otherwise it'll be lost when the route changes.
+       */
       if (this.$route.query.redirect) {
         this.redirect = this.$route.query.redirect;
       }
@@ -78,17 +55,23 @@
         // remove 'disable' after switching back to `this.$tr`
         if (route.name === ComponentMap.SIGN_UP) {
           if (route.query.step) {
-            return tempTranslator.$tr('signUpStep1Title');
+            return this.$tr('signUpStep1Title');
           }
-          return tempTranslator.$tr('signUpStep2Title');
+          return this.$tr('signUpStep2Title');
         }
         /* eslint-enable kolibri/vue-no-undefined-string-uses */
-
         return this.coreString('signInLabel');
       },
     },
     $trs: {
-      // TODO: move strings from tempTranslator back to this.$tr
+      signUpStep1Title: {
+        message: 'Step 1 of 2',
+        context: 'Indicates at which stage of the sign up process the user is at.',
+      },
+      signUpStep2Title: {
+        message: 'Step 2 of 2',
+        context: 'Indicates at which stage of the sign up process the user is at.',
+      },
     },
   };
 

kolibri/plugins/user_auth/assets/src/views/UserAuthLayout.vue

@@ -0,0 +1,186 @@
+<template>
+
+  <div
+    ref="mainWrapper"
+    class="main-wrapper"
+    :style="mainWrapperStyles"
+  >
+
+    <div v-if="blockDoubleClicks" class="click-mask"></div>
+
+    <div
+      v-if="!loading"
+      class="scrolling-pane"
+    >
+      <CoreBanner v-if="coreBannerComponent && showDemoBanner">
+        <template #default="props">
+          <component
+            :is="coreBannerComponent"
+            :bannerClosed="props.bannerClosed"
+          />
+        </template>
+      </CoreBanner>
+
+      <KPageContainer v-if="!isAuthorized">
+        <AuthMessage />
+      </KPageContainer>
+      <KPageContainer v-else-if="error">
+        <AppError />
+      </KPageContainer>
+
+      <div
+        v-else
+        id="main"
+        role="main"
+        tabindex="-1"
+        class="main"
+      >
+        <slot></slot>
+      </div>
+    </div>
+
+    <div aria-live="polite">
+      <GlobalSnackbar />
+    </div>
+
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapState } from 'vuex';
+  import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
+  import coreBannerContent from 'kolibri.utils.coreBannerContent';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import GlobalSnackbar from 'kolibri.coreVue.components.GlobalSnackbar';
+  import CoreBanner from 'kolibri.coreVue.components.CoreBanner';
+  import AppError from 'kolibri.coreVue.components.AppError';
+  import { ComponentMap } from '../constants';
+
+  export default {
+    name: 'UserAuthLayout',
+    metaInfo() {
+      return {
+        // Use arrow function to bind $tr to this component
+        titleTemplate: title => {
+          if (this.error) {
+            return this.$tr('kolibriTitleMessage', { title: this.$tr('errorPageTitle') });
+          }
+          // If no child component sets title, it reads 'Kolibri'
+          if (!title) {
+            return this.coreString('kolibriLabel');
+          }
+          // If child component sets title, it reads 'Child Title - Kolibri'
+          return this.$tr('kolibriTitleMessage', { title });
+        },
+      };
+    },
+    components: {
+      AppError,
+      CoreBanner,
+      AuthMessage,
+      GlobalSnackbar,
+    },
+    mixins: [commonCoreStrings],
+    computed: {
+      ...mapState({
+        error: state => state.core.error,
+        loading: state => state.core.loading,
+        blockDoubleClicks: state => state.core.blockDoubleClicks,
+      }),
+      isAuthorized() {
+        return !(
+          this.error &&
+          this.error.response &&
+          this.error.response.status &&
+          this.error.response.status == 403
+        );
+      },
+      mainWrapperStyles() {
+        return {
+          width: '100vw',
+          backgroundColor: this.$themePalette.grey.v_100,
+          paddingTop: '0px',
+          paddingBottom: '0px',
+        };
+      },
+      coreBannerComponent() {
+        return coreBannerContent[0];
+      },
+      showDemoBanner() {
+        return [
+          ComponentMap.SIGN_IN,
+          ComponentMap.FACILITY_SELECT,
+          ComponentMap.AUTH_SELECT,
+          ComponentMap.NEW_PASSWORD,
+        ].includes(this.$route.name);
+      },
+    },
+    $trs: {
+      kolibriTitleMessage: {
+        message: '{ title } - Kolibri',
+        context: 'DO NOT TRANSLATE\nCopy the source string.',
+      },
+      errorPageTitle: {
+        message: 'Error',
+        context:
+          "When Kolibri throws an error, this is the text that's used as the title of the error page. The description of the error follows below.",
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .main-wrapper {
+    display: inline-block;
+    width: 100vw;
+
+    @media print {
+      /* Without this, things won't print correctly
+      *  - Firefox: Tables will get cutoff
+      *  - Chrome: Table header won't repeat correctly on each page
+      */
+      display: block;
+    }
+  }
+
+  .main {
+    height: 100%;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .scrolling-pane {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    overflow-x: auto;
+  }
+
+  .click-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 24;
+    width: 100%;
+    height: 100%;
+  }
+
+  .debug {
+    font-family: monospace;
+    font-size: large;
+    font-weight: bold;
+    line-height: 2em;
+  }
+
+</style>

kolibri/plugins/user_profile/assets/src/views/ProfileEditPage.vue

@@ -1,16 +1,13 @@
 <template>
 
   <!-- The v-if ensures the page isn't visible briefly before redirection -->
-  <CoreBase
+  <ImmersivePage
     v-if="!isSubsetOfUsersDevice"
-    :immersivePage="true"
-    immersivePageIcon="close"
+    icon="close"
     :appBarTitle="$tr('editProfileHeader')"
-    :pageTitle="$tr('editProfileHeader')"
-    :showSubNav="false"
-    :immersivePageRoute="profileRoute"
+    :route="profileRoute"
   >
-    <KPageContainer class="narrow-container">
+    <KPageContainer class="narrow-container" :topMargin="100">
       <form class="form" @submit.prevent="handleSubmit">
         <h1>{{ $tr('editProfileHeader') }}</h1>
 
@@ -62,7 +59,8 @@
         </KButtonGroup>
       </form>
     </KPageContainer>
-  </CoreBase>
+
+  </immersivepage>
 
 </template>
 
@@ -78,10 +76,10 @@
   import GenderSelect from 'kolibri.coreVue.components.GenderSelect';
   import BirthYearSelect from 'kolibri.coreVue.components.BirthYearSelect';
   import FullNameTextbox from 'kolibri.coreVue.components.FullNameTextbox';
+  import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import UsernameTextbox from 'kolibri.coreVue.components.UsernameTextbox';
   import { FacilityUserResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import CoreBase from 'kolibri.coreVue.components.CoreBase';
   import { RoutesMap } from '../constants';
   import plugin_data from 'plugin_data';
 
@@ -97,7 +95,7 @@
       BirthYearSelect,
       FullNameTextbox,
       UsernameTextbox,
-      CoreBase,
+      ImmersivePage,
     },
     mixins: [commonCoreStrings],
     data() {