Merge pull request #282 from CoderDojo/prevent-raspberry-pword

Handle login response: account linked to raspberry pi

Author: Jeddf

cypress/fixtures/loginRaspberryFail.json

@@ -0,0 +1,4 @@
+{
+  "ok":false,
+  "why":"raspberry-linked"
+}

cypress/integration/authenticatiion/login_spec.js

@@ -59,7 +59,7 @@ describe('Login Page', () => {
       cy.get(page.emailFormatError).should('be.visible');
     });
 
-    it('should show an error when the login fails (on mock server this is only when the incorrect email is provided)', () => {
+    it('should show an error when the login fails (on mock server this is only when [email protected] email is provided)', () => {
       cy.server();
       cy.route('POST', '/api/2.0/users/login', 'fx:loginFail').as('loginFail');
       cy.get(page.loginFailed).should('not.be.visible');
@@ -71,6 +71,18 @@ describe('Login Page', () => {
       cy.get(page.loginFailed).should('be.visible');
     });
 
+    it('should show an raspberry linked error when login fails because linked (on mock server this is only when [email protected] email is provided)', () => {
+      cy.server();
+      cy.route('POST', '/api/2.0/users/login', 'fx:loginRaspberryFail').as('loginRaspberryFail');
+      cy.get(page.loginFailed).should('not.be.visible');
+      cy.get(page.email).click();
+      cy.get(page.email).type('[email protected]');
+      cy.get(page.password).type('rightpassword');
+      cy.get(page.login).click();
+      cy.wait('@loginRaspberryFail');
+      cy.get(page.loginRaspberryFailed).should('be.visible');
+    });
+
     it('should show both requirement errors when a login is attempted if no email and no password is provided', () => {
       cy.get(page.emailFormatError).should('not.be.visible'); // TODO: Should be emailReqError?
       cy.get(page.passwordReqError).should('not.be.visible');

cypress/pages/login.js

@@ -10,6 +10,7 @@ export default {
   emailFormatError: '.cd-login__email-format-err',
   passwordReqError: '.cd-login__password-req-err',
   loginFailed: '.cd-login__login-failed',
+  loginRaspberryFailed: '.cd-login__raspberry-linked',
   registerLink: '.cd-login__register a',
   forgotPasswordLink: '.cd-login__forgot-password a',
-};
+};

json-server/server.js

@@ -160,6 +160,8 @@ server.post('/api/2.0/users/login', (req, res) => {
     res.send();
   } else if (req.body.email === '[email protected]') {
     res.send({ ok: false, why: 'invalid-password' });
+  } else if (req.body.email === '[email protected]') {
+    res.send({ ok: false, why: 'raspberry-linked' });
   } else {
     res.send({ ok: false, why: 'user-not-found' });
   }

src/users/cd-login.vue

@@ -12,23 +12,36 @@
     </div>
     <div class="row">
       <div class="cd-login__box">
-        <form @submit.prevent="login">
-          <div class="form-group">
-            <label>{{ $t('Email') }}</label>
-            <input class="form-control" data-vv-name="email" data-vv-validate-on="blur" type="email" v-model="email" v-validate="'required|email'" novalidate/>
-          </div>
-          <p class="cd-login__email-req-err text-danger" v-show="errors.has('email:required')">{{ $t('Email is required') }}</p>
-          <p class="cd-login__email-format-err text-danger" v-show="errors.has('email:email')">{{ $t('Email should be in the format: [email protected]') }}</p>
-          <div class="form-group">
-            <label>Password</label>
-            <input class="form-control" data-vv-name="password" data-vv-validate-on="blur" type="password" v-model="password" v-validate="'required'" />
-          </div>
-           <p class="cd-login__password-req-err text-danger" v-show="errors.has('password:required')">{{ $t('Password is required') }}</p>
-          <input class="cd-login__button btn btn-primary" type="submit" value="Login" />
-        </form>
-        <p v-show="errors.has('loginFailed')" class="cd-login__login-failed text-danger">{{ $t('There was a problem logging in: {msg}', {msg: $t('Invalid email or password') }) }}</p>
-        <p class="cd-login__forgot-password"><a href="/reset">{{ $t('Forgot password?') }}</a></p>
-        <p class="cd-login__register">{{ $t("Don't have an account?") }} <a :href="registerUrl">{{ $t('Register here') }}</a></p>
+        <span v-show="errors.first('loginFailed') !== 'raspberry-linked'">
+          <form @submit.prevent="login">
+            <div class="form-group">
+              <label>{{ $t('Email') }}</label>
+              <input class="form-control" data-vv-name="email" data-vv-validate-on="blur" type="email" v-model="email" v-validate="'required|email'" novalidate/>
+            </div>
+            <p class="cd-login__email-req-err text-danger" v-show="errors.has('email:required')">{{ $t('Email is required') }}</p>
+            <p class="cd-login__email-format-err text-danger" v-show="errors.has('email:email')">{{ $t('Email should be in the format: [email protected]') }}</p>
+            <div class="form-group">
+              <label>Password</label>
+              <input class="form-control" data-vv-name="password" data-vv-validate-on="blur" type="password" v-model="password" v-validate="'required'" />
+            </div>
+            <p class="cd-login__password-req-err text-danger" v-show="errors.has('password:required')">{{ $t('Password is required') }}</p>
+            <input class="cd-login__button btn btn-primary" type="submit" value="Login" />
+          </form>
+          <p v-show="errors.has('loginFailed')" class="cd-login__login-failed text-danger">{{ $t('There was a problem logging in: {msg}', {msg: $t('Invalid email or password') }) }}</p>
+          <p class="cd-login__forgot-password"><a href="/reset">{{ $t('Forgot password?') }}</a></p>
+          <p class="cd-login__register">{{ $t("Don't have an account?") }} <a :href="registerUrl">{{ $t('Register here') }}</a></p>
+        </span>
+        <span v-show="errors.first('loginFailed') === 'raspberry-linked'" class="cd-login__raspberry-linked">
+          <p>
+            {{ $t('The account for email {msg} is linked to a My Raspberry Pi account.', { msg: email }) }}
+          </p>
+          <p>
+            <a :href="`/rpi/login?user=${email}`">{{$t('Login through My Raspberry Pi.')}}</a>
+          </p>
+          <p>
+            <a href='#' v-on:click.prevent="resetForm()" >{{$t('Use different Coder Dojo account.')}}</a>
+          </p>
+        </span>
       </div>
     </div>
   </div>
@@ -73,13 +86,23 @@
       async validateForm() {
         return this.$validator.validateAll();
       },
+      resetForm() {
+        this.email = '';
+        this.password = '';
+        if (this.errors && this.errors.clear) {
+          this.errors.clear();
+        }
+      },
       redirectTo(url) {
         location.href = url;
       },
       async login() {
         const valid = await this.validateForm();
         if (valid) {
           const response = await UserService.login(this.email, this.password);
+          if (this.errors && this.errors.clear) {
+            this.errors.clear();
+          }
           if (response.body.ok === false) {
             this.errors.add({
               field: 'loginFailed',
@@ -123,5 +146,9 @@
       .primary-button;
       margin-bottom: 48px;
     }
+
+    &__raspberry-linked {
+      display: block;
+    }
   }
 </style>