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

Commit c051243

Browse files
JeddfJeddf
committed
rpi -> zen new user account type choice page
1 parent a6f5832 commit c051243

File tree

5 files changed

+151
-5
lines changed

5 files changed

+151
-5
lines changed

‎cypress/integration/authenticatiion/account-type_spec.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import page from '../../pages/account-type';
2+
3+
const mockState = 'mock-state';
4+
5+
describe('Account Type Page', () => {
6+
describe('Form Validation', () => {
7+
beforeEach(() => {
8+
cy.server();
9+
cy.route('/api/2.0/users/instance', 'fx:loggedOutUser');
10+
cy.route('/locale/languages', [{ name: 'en', code: 'en_US' }]);
11+
cy.visit(`/account-type?state=${mockState}`);
12+
});
13+
14+
it('should show the header, login box, and all login box elements', () => {
15+
cy.get(page.header).should('be.visible');
16+
cy.get(page.subHeader).should('be.visible');
17+
cy.get(page.box).should('be.visible');
18+
cy.get(page.attendeeChoice).should('be.visible');
19+
cy.get(page.attendeeChoiceLabel).should('be.visible');
20+
cy.get(page.guardianChoice).should('be.visible');
21+
cy.get(page.guardianChoiceLabel).should('be.visible');
22+
cy.get(page.submitButton).should('be.visible');
23+
});
24+
25+
it('should have disabled submit button', () => {
26+
cy.get(page.submitButton).should('be.disabled');
27+
});
28+
29+
it('should enable submit button after choice made', () => {
30+
cy.get(page.attendeeChoice).click();
31+
cy.get(page.submitButton).should('not.be.disabled');
32+
});
33+
34+
it('on submit should redirect to /rpi/cb with state and choice query params', () => {
35+
cy.get(page.guardianChoice).click();
36+
cy.get(page.submitButton).click();
37+
cy.location('pathname').should('eq', '/rpi/cb');
38+
cy.location('search').should('eq', '?state=mock-state&type=guardian');
39+
});
40+
});
41+
});

‎cypress/pages/account-type.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
header: '.cd-account-type__header',
3+
subHeader: '.cd-account-type__sub-header',
4+
box: '.cd-account-type__box',
5+
attendeeChoice: '#type-attendee',
6+
attendeeChoiceLabel: 'label[for=type-attendee]',
7+
guardianChoice: '#type-guardian',
8+
guardianChoiceLabel: 'label[for=type-guardian]',
9+
submitButton: '.cd-account-type__submit',
10+
};

‎index.js

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ exports.register = function (server, options, next) {
6363
server.route({
6464
method: 'GET',
6565
path: '/dashboard/tickets',
66-
handler :{
66+
handler: {
6767
file: {
6868
path: 'index.html'
6969
}
@@ -73,7 +73,7 @@ exports.register = function (server, options, next) {
7373
server.route({
7474
method: 'GET',
7575
path: '/dashboard/dojos/events/user-events',
76-
handler :{
76+
handler: {
7777
file: {
7878
path: 'index.html'
7979
}
@@ -83,7 +83,7 @@ exports.register = function (server, options, next) {
8383
server.route({
8484
method: 'GET',
8585
path: '/dashboard/dojos/{dojoId}/events/new',
86-
handler :{
86+
handler: {
8787
file: {
8888
path: 'index.html'
8989
}
@@ -93,7 +93,7 @@ exports.register = function (server, options, next) {
9393
server.route({
9494
method: 'GET',
9595
path: '/dashboard/dojos/{dojoId}/events/{eventId}/edit',
96-
handler :{
96+
handler: {
9797
file: {
9898
path: 'index.html'
9999
}
@@ -103,7 +103,17 @@ exports.register = function (server, options, next) {
103103
server.route({
104104
method: 'GET',
105105
path: '/dashboard/dojos/{dojoId}/join-requests/{id}/status/{status}',
106-
handler :{
106+
handler: {
107+
file: {
108+
path: 'index.html'
109+
}
110+
}
111+
});
112+
113+
server.route({
114+
method: 'GET',
115+
path: '/account-type',
116+
handler: {
107117
file: {
108118
path: 'index.html'
109119
}

‎src/router/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import EventSessions from '@/events/order/cd-event-sessions';
1010
import EventForm from '@/events/cd-event-form';
1111
import BookingConfirmation from '@/events/order/cd-booking-confirmation';
1212
import Login from '@/users/cd-login';
13+
import AccountType from '@/users/cd-account-type';
1314
import orderWrapper from '@/events/order/wrapper';
1415
import UserService from '@/users/service';
1516
import store from '@/store';
@@ -107,6 +108,11 @@ const router = new Router({
107108
component: ManageRequestToJoin,
108109
beforeEnter: loggedInNavGuard,
109110
},
111+
{
112+
path: '/account-type',
113+
name: 'AccountType',
114+
component: AccountType,
115+
},
110116
{
111117
path: '/login',
112118
name: 'Login',

‎src/users/cd-account-type.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="cd-account-type container-fluid">
3+
<div class="row">
4+
<h3 class="cd-account-type__header text-center">{{ $t('Account Type') }}</h3>
5+
</div>
6+
<div class="row">
7+
<div class="cd-account-type__box">
8+
<h4 class="cd-account-type__sub-header">{{ $t('Please select an account type to complete registration.') }}</h4>
9+
<form @submit.prevent="submit">
10+
<div class="form-group">
11+
<div>
12+
<input name="accountType" id="type-attendee" value="attendee" type="radio" v-model="accountType" v-validate.initial="'required'"/>
13+
<label for="type-attendee">{{ $t('Attendee') }}</label>
14+
</div>
15+
<div>
16+
<input name="accountType" id="type-guardian" value="guardian" type="radio" v-model="accountType"/>
17+
<label for="type-guardian">{{ $t('Parent/Guardian') }}</label>
18+
</div>
19+
</div>
20+
<input :disabled="errors.any()" class="cd-account-type__submit btn btn-primary" type="submit" value="Submit" />
21+
</form>
22+
</div>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script>
28+
// import Vue from 'vue';
29+
import store from '@/store';
30+
31+
export default {
32+
name: 'Account-Type',
33+
data() {
34+
return {
35+
accountType: '',
36+
};
37+
},
38+
store,
39+
methods: {
40+
redirectTo(url) {
41+
location.href = url;
42+
},
43+
submit() {
44+
this.redirectTo(`/rpi/cb?state=${this.$route.query.state}&type=${this.accountType}`);
45+
},
46+
},
47+
};
48+
</script>
49+
50+
<style scoped lang="less">
51+
@import "~@coderdojo/cd-common/common/_colors";
52+
@import "../common/styles/cd-primary-button.less";
53+
54+
.cd-account-type {
55+
&__header {
56+
padding: 24px;
57+
}
58+
&__sub-header {
59+
padding: 12px;
60+
}
61+
&__box {
62+
border-style: solid;
63+
border-color: @cd-orange;
64+
border-width: 1px 1px 3px 1px;
65+
padding: 32px 56px 56px;
66+
max-width: 425px;
67+
margin: 20px auto 128px;
68+
}
69+
70+
&__submit {
71+
.primary-button;
72+
}
73+
74+
input[type=radio] {
75+
margin: 0 3px;
76+
}
77+
78+
}
79+
</style>

0 commit comments

Comments
 (0)