Skip to content
This repository was archived by the owner on Dec 14, 2023. It is now read-only.

Commit c8ba1e6

Browse files
JeddfJeddf
committed
Standalone raspberry linked login message
1 parent 7d3adba commit c8ba1e6

File tree

3 files changed

+50
-23
lines changed

3 files changed

+50
-23
lines changed

‎cypress/integration/authenticatiion/login_spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe('Login Page', () => {
7070
cy.get(page.password).type('rightpassword');
7171
cy.get(page.login).click();
7272
cy.wait('@loginRaspberryFail');
73-
cy.get(page.loginFailed).should('be.visible');
73+
cy.get(page.loginRaspberryFailed).should('be.visible');
7474
});
7575

7676
it('should show both requirement errors when a login is attempted if no email and no password is provided', () => {

‎cypress/pages/login.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default {
1010
emailFormatError: '.cd-login__email-format-err',
1111
passwordReqError: '.cd-login__password-req-err',
1212
loginFailed: '.cd-login__login-failed',
13-
loginRaspberryFailed: '.cd-login__login-raspberry-failed',
13+
loginRaspberryFailed: '.cd-login__raspberry-linked',
1414
registerLink: '.cd-login__register a',
1515
forgotPasswordLink: '.cd-login__forgot-password a',
16-
};
16+
};

‎src/users/cd-login.vue

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,36 @@
1212
</div>
1313
<div class="row">
1414
<div class="cd-login__box">
15-
<form @submit.prevent="login">
16-
<div class="form-group">
17-
<label>{{ $t('Email') }}</label>
18-
<input class="form-control" data-vv-name="email" data-vv-validate-on="blur" type="email" v-model="email" v-validate="'required|email'" novalidate/>
19-
</div>
20-
<p class="cd-login__email-req-err text-danger" v-show="errors.has('email:required')">{{ $t('Email is required') }}</p>
21-
<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>
22-
<div class="form-group">
23-
<label>Password</label>
24-
<input class="form-control" data-vv-name="password" data-vv-validate-on="blur" type="password" v-model="password" v-validate="'required'" />
25-
</div>
26-
<p class="cd-login__password-req-err text-danger" v-show="errors.has('password:required')">{{ $t('Password is required') }}</p>
27-
<input class="cd-login__button btn btn-primary" type="submit" value="Login" />
28-
</form>
29-
<p v-show="errors.has('invalid-password')" class="cd-login__login-failed text-danger">{{ $t('There was a problem logging in: {msg}', {msg: $t('Invalid email or password') }) }}</p>
30-
<p v-show="errors.has('raspberry-linked')" class="cd-login__login-failed text-danger">{{ $t('There was a problem logging in: {msg}', {msg: $t('Account linked to a My Raspberry Pi account.') }) }}<a href='/rpi/login'>{{$t('Click here to login through My Raspberry Pi')}}</a>{{$t('Remember to use the same email address!')}}</p>
31-
<p v-show="errors.has('raspberry-linked')" class="cd-login__login-raspberry-failed text-danger">{{ $t('There was a problem logging in: {msg}', {msg: $t('Account linked to a My Raspberry Pi account.') }) }}<a href='/rpi/login'>{{$t('Click here to login through My Raspberry Pi')}}</a>{{$t('Remember to use the same email address!')}}</p>
32-
<p class="cd-login__forgot-password"><a href="/reset">{{ $t('Forgot password?') }}</a></p>
33-
<p class="cd-login__register">{{ $t("Don't have an account?") }} <a :href="registerUrl">{{ $t('Register here') }}</a></p>
15+
<span v-show="errors.first('loginFailed') !== 'raspberry-linked'">
16+
<form @submit.prevent="login">
17+
<div class="form-group">
18+
<label>{{ $t('Email') }}</label>
19+
<input class="form-control" data-vv-name="email" data-vv-validate-on="blur" type="email" v-model="email" v-validate="'required|email'" novalidate/>
20+
</div>
21+
<p class="cd-login__email-req-err text-danger" v-show="errors.has('email:required')">{{ $t('Email is required') }}</p>
22+
<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>
23+
<div class="form-group">
24+
<label>Password</label>
25+
<input class="form-control" data-vv-name="password" data-vv-validate-on="blur" type="password" v-model="password" v-validate="'required'" />
26+
</div>
27+
<p class="cd-login__password-req-err text-danger" v-show="errors.has('password:required')">{{ $t('Password is required') }}</p>
28+
<input class="cd-login__button btn btn-primary" type="submit" value="Login" />
29+
</form>
30+
<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>
31+
<p class="cd-login__forgot-password"><a href="/reset">{{ $t('Forgot password?') }}</a></p>
32+
<p class="cd-login__register">{{ $t("Don't have an account?") }} <a :href="registerUrl">{{ $t('Register here') }}</a></p>
33+
</span>
34+
<span v-show="errors.first('loginFailed') === 'raspberry-linked'" class="cd-login__raspberry-linked">
35+
<p>
36+
{{ $t('The account for email {msg} is linked to a My Raspberry Pi account.', { msg: email }) }}
37+
</p>
38+
<p>
39+
<a :href="`/rpi/login?user=${email}`">{{$t('Login through My Raspberry Pi.')}}</a>
40+
</p>
41+
<p>
42+
<a href='#' v-on:click.prevent="resetForm()" >{{$t('Use different Coder Dojo account.')}}</a>
43+
</p>
44+
</span>
3445
</div>
3546
</div>
3647
</div>
@@ -75,15 +86,27 @@
7586
async validateForm() {
7687
return this.$validator.validateAll();
7788
},
89+
resetForm() {
90+
this.email = '';
91+
this.password = '';
92+
if (this.errors && this.errors.clear) {
93+
this.errors.clear();
94+
}
95+
},
7896
redirectTo(url) {
7997
location.href = url;
8098
},
8199
async login() {
82100
const valid = await this.validateForm();
83101
if (valid) {
84102
const response = await UserService.login(this.email, this.password);
103+
if (this.errors && this.errors.clear) {
104+
this.errors.clear();
105+
}
85106
if (response.body.ok === false) {
86-
this.errors.add({ field: response.body.why });
107+
this.errors.add({
108+
field: 'loginFailed',
109+
msg: response.body.why });
87110
} else {
88111
const forumUrl = `^${Vue.config.forumsUrlBase}/auth/CoderDojo$`;
89112
if (this.redirectUrl.match(forumUrl)) {
@@ -123,5 +146,9 @@
123146
.primary-button;
124147
margin-bottom: 48px;
125148
}
149+
150+
&__raspberry-linked {
151+
display: block;
152+
}
126153
}
127154
</style>

0 commit comments

Comments
 (0)