Add license activation link to read only banner

client/cypress/integration/frontend/read-only/banner.spec.js

@@ -4,22 +4,11 @@ const getOperations = ({readOnly, classReadOnly = false}) => ({
   MeQuery: getMinimalMe({readOnly, classReadOnly}),
   NewsTeasers: {
     newsTeasers: {
-      edges: []
+      edges: [],
-    }
+    },
-  }
+  },
 });
 
-const checkReadOnly = (shouldBannerExist, text) => {
-    cy.visit('/');
-
-    cy.getByDataCy('start-page-heading').should('exist');
-    if (shouldBannerExist) {
-      cy.getByDataCy('read-only-banner').should('exist').should('contain', text);
-    } else {
-      cy.getByDataCy('read-only-banner').should('not.exist');
-    }
-};
-
 describe('Read Only Banner', () => {
   beforeEach(() => {
     cy.setup();
@@ -29,19 +18,28 @@ describe('Read Only Banner', () => {
     cy.mockGraphqlOps({
       operations: getOperations({readOnly: false}),
     });
-    checkReadOnly(false);
+
+    cy.visit('/');
+
+    cy.getByDataCy('start-page-heading').should('exist');
+    cy.getByDataCy('read-only-banner').should('not.exist');
   });
 
   it('is shown for expired license', () => {
     cy.mockGraphqlOps({
       operations: getOperations({readOnly: true}),
     });
-    checkReadOnly(true, 'Lizenz');
 
-    // cy.visit('/');
+    cy.visit('/');
-    //
+
-    // cy.getByDataCy('start-page-heading').should('exist');
+    cy.getByDataCy('start-page-heading').should('exist');
-    // cy.getByDataCy('read-only-banner').should('exist').should('contain', 'nicht mehr aktiv');
+
+    cy.getByDataCy('read-only-banner').should('exist').should('contain', 'Lizenz');
+    cy.getByDataCy('license-activation-link')
+      .should('exist')
+      .should('contain', 'Neuen Lizenzcode eingeben')
+      .click();
+    cy.url().should('contain', 'license-activation');
   });
 
   it('is shown for inactive school class', () => {
@@ -49,11 +47,11 @@ describe('Read Only Banner', () => {
       operations: getOperations({readOnly: false, classReadOnly: true}),
     });
 
-    checkReadOnly(true, 'Klasse');
+    cy.visit('/');
-    //
-    // cy.visit('/');
 
-    // cy.getByDataCy('start-page-heading').should('exist');
+    cy.getByDataCy('start-page-heading').should('exist');
-    // cy.getByDataCy('read-only-banner').should('exist').should('contain', 'nicht mehr aktiv');
+
+    cy.getByDataCy('read-only-banner').should('exist').should('contain', 'Klasse');
+    cy.getByDataCy('license-activation-link').should('not.exist');
   });
 });

client/src/components/ReadOnlyBanner.vue

@@ -5,13 +5,18 @@
     v-if="me.readOnly || me.selectedClass.readOnly">
     <p class="read-only-banner__text">
       {{ readOnlyText }} Sie können Inhalte lesen, aber nicht
-      bearbeiten.
+      bearbeiten. <router-link
+        :to="licenseActivationLink"
+        data-cy="license-activation-link"
+        class="read-only-banner__link"
+        v-if="me.readOnly">Neuen Lizenzcode eingeben</router-link>
     </p>
   </div>
 </template>
 
 <script>
   import gql from 'graphql-tag';
+  import {LICENSE_ACTIVATION} from '@/router/auth.names';
 
   export default {
     data() {
@@ -22,6 +27,9 @@
             readOnly: false,
           },
         },
+        licenseActivationLink: {
+          name: LICENSE_ACTIVATION
+        }
       };
     },
 
@@ -73,5 +81,9 @@
       @include regular-text;
       max-width: $screen-width;
     }
+
+    &__link {
+      @include default-link;
+    }
   }
 </style>

client/src/router/auth.routes.js

@@ -1,6 +1,8 @@
 import hello from '@/pages/hello';
 import betaLogin from '@/pages/beta-login';
 import loginError from '@/pages/login-error';
+import licenseActivation from '@/pages/license-activation';
+import {LICENSE_ACTIVATION} from '@/router/auth.names';
 
 export default [
   {
@@ -49,4 +51,12 @@ export default [
       layout: 'public',
     },
   },
+    {
+    path: '/license-activation',
+    component: licenseActivation,
+    name: LICENSE_ACTIVATION,
+    meta: {
+      layout: 'public',
+    },
+  },
 ];

client/src/router/index.js

@@ -9,7 +9,6 @@ import submission from '@/pages/studentSubmission';
 import Router from 'vue-router';
 import surveyPage from '@/pages/survey';
 import styleGuidePage from '@/pages/styleguide';
-import licenseActivation from '@/pages/license-activation';
 import joinClass from '@/pages/joinClass';
 import news from '@/pages/news';
 
@@ -55,14 +54,6 @@ const routes = [
     props: true,
     meta: {layout: LAYOUT_SIMPLE},
   },
-  {
-    path: '/license-activation',
-    component: licenseActivation,
-    name: 'licenseActivation',
-    meta: {
-      layout: 'public',
-    },
-  },
   {
     path: '/news',
     component: news,