raspberry pi auth opt in/out page

Author: Jeddf

index.js

@@ -120,6 +120,16 @@ exports.register = function (server, options, next) {
     }
   });
 
+  server.route({
+    method: 'GET',
+    path: '/raspberry-opt',
+    handler: {
+      file: {
+        path: 'index.html'
+      }
+    }
+  });
+
   server.route({
     method: 'GET',
     path: '/login',

src/router/index.js

@@ -11,6 +11,7 @@ import EventForm from '@/events/cd-event-form';
 import BookingConfirmation from '@/events/order/cd-booking-confirmation';
 import Login from '@/users/cd-login';
 import AccountType from '@/users/cd-account-type';
+import RaspberryOpt from '@/users/cd-raspberry-opt';
 import orderWrapper from '@/events/order/wrapper';
 import UserService from '@/users/service';
 import store from '@/store';
@@ -113,6 +114,11 @@ const router = new Router({
           name: 'AccountType',
           component: AccountType,
         },
+        {
+          path: '/raspberry-opt',
+          name: 'RaspberryOpt',
+          component: RaspberryOpt,
+        },
         {
           path: '/login',
           name: 'Login',

src/users/cd-login.vue

@@ -35,6 +35,9 @@
           <p>
             {{ $t('The account for email {msg} is linked to a My Raspberry Pi account.', { msg: email }) }}
           </p>
+          <p>
+            <a :href="`/raspberry-opt?optIn=true`">{{$t('Opt this browser in to My Raspberry Pi authentication.')}}</a>
+          </p>
           <p>
             <a :href="`/rpi/login?user=${email}`">{{$t('Login through My Raspberry Pi.')}}</a>
           </p>
@@ -104,10 +107,14 @@
             this.errors.clear();
           }
           if (response.body.ok === false) {
+            if (response.body.why === 'raspberry-linked') {
+              window.localStorage.setItem('rpiAuth', true);
+            }
             this.errors.add({
               field: 'loginFailed',
               msg: response.body.why });
           } else {
+            window.localStorage.clear('rpiAuth');
             const forumUrl = `^${Vue.config.forumsUrlBase}/auth/CoderDojo$`;
             if (this.redirectUrl.match(forumUrl)) {
               this.redirectTo(this.redirectUrl);

src/users/cd-raspberry-opt.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="cd-auth-type container-fluid">
+    <div class="row">
+      <div class="cd-auth-type__box">
+        <span v-if="rpiAuthFlag">
+          <h3
+            class="cd-auth-type__header"
+          >{{ $t("This browser is opted in to My Raspberry Pi authentication.") }}</h3>
+          <div class="form-group text-center">
+            <button class="cd-auth-type__opt btn btn-primary" v-on:click="optOut">Opt Out</button>
+          <div>
+        </span>
+        <span v-else>
+          <h3
+            class="cd-auth-type__header"
+          >{{ $t("This browser is opted out of My Raspberry Pi authentication.") }}</h3>
+          <div class="form-group text-center">
+            <button class="cd-auth-type__opt btn btn-primary" v-on:click="optIn">Opt In</button>
+          <div>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+
+export default {
+  name: 'Auth-Type',
+  created() {
+    if (this.$route.query.optIn) {
+      const rpiAuthFlag = window.localStorage.getItem('rpiAuth') === 'true';
+      if (!rpiAuthFlag) {
+        this.optIn();
+      }
+    }
+  },
+  data() {
+    return {
+      rpiAuthFlag: window.localStorage.getItem('rpiAuth') === 'true',
+    };
+  },
+  store,
+  methods: {
+    optIn() {
+      window.localStorage.setItem('rpiAuth', true);
+      location.reload();
+    },
+    optOut() {
+      window.localStorage.clear('rpiAuth');
+      // reload and clear optIn query param
+      location.href = location.href.split('?')[0];
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "~@coderdojo/cd-common/common/_colors";
+@import "../common/styles/cd-primary-button.less";
+
+.cd-auth-type {
+  &__header {
+    padding: 12px;
+  }
+  &__box {
+    border-style: solid;
+    border-color: @cd-orange;
+    border-width: 1px 1px 3px 1px;
+    padding: 32px 56px 56px;
+    max-width: 425px;
+    margin: 20px auto 128px;
+  }
+
+  &__opt {
+    .primary-button;
+  }
+}
+</style>