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

Commit dc54eb1

Browse files
ArayBArayB
authored
Merge pull request #287 from CoderDojo/account-type
Account type choice page
2 parents 4287729 + 79605dd commit dc54eb1

File tree

10 files changed

+418
-92
lines changed

10 files changed

+418
-92
lines changed

‎cypress-spa-server.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const express = require('express');
2+
const path = require('path');
3+
4+
const port = 8080;
5+
const app = express();
6+
7+
// serve static assets normally
8+
app.use(express.static(path.resolve(__dirname, 'dist')));
9+
10+
// block known api route causing looping redirect
11+
app.get('/rpi/*', (request, response) => {
12+
response.send('fin.');
13+
});
14+
15+
// handle every other route with index.html
16+
app.get('*', (request, response) => {
17+
response.sendFile(path.resolve(__dirname, 'dist/index.html'));
18+
});
19+
20+
app.listen(port);

‎cypress/integration/authentication/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/integration/authenticatiion/login_spec.js renamed to ‎cypress/integration/authentication/login_spec.js

File renamed without changes.

‎cypress/integration_e2e/authentication/register_login_out_journey_spec copy.js renamed to ‎cypress/integration_e2e/authentication/register_login_out_journey_spec.js

File renamed without changes.

‎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
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"test": "yarn unit && yarn e2e-with-mocks",
1717
"lint": "eslint --ext .js,.vue src test/unit/specs",
1818
"mock-server": "node ./json-server/server.js",
19-
"cypress": "yarn build && concurrently --kill-others --success first \"http-server dist/ --push-state > /dev/null\" \"cypress run --browser chrome\"",
19+
"cypress": "yarn build && concurrently --kill-others --success first \"node cypress-spa-server.js > /dev/null\" \"cypress run --browser chrome\"",
2020
"cypress:open": "cypress open",
2121
"cypress:e2e": "cypress open --config-file cypress-e2e.json",
2222
"cypress:install": "cypress install"
@@ -81,6 +81,7 @@
8181
"eslint-plugin-import": "^2.2.0",
8282
"eventsource-polyfill": "^0.9.6",
8383
"extract-text-webpack-plugin": "^2.0.0",
84+
"express": "^4.17.1",
8485
"file-loader": "^0.11.1",
8586
"friendly-errors-webpack-plugin": "^1.1.3",
8687
"html-webpack-plugin": "^2.28.0",
@@ -113,7 +114,6 @@
113114
"shelljs": "^0.7.6",
114115
"sinon": "^7.3.2",
115116
"sinon-chai": "^3.2.0",
116-
"spa-http-server": "^0.9.0",
117117
"speed-measure-webpack-plugin": "^1.3.1",
118118
"timeshift-js": "^1.0.1",
119119
"url-loader": "^0.5.8",

‎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: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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 (under 18)') }}</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 store from '@/store';
29+
30+
export default {
31+
name: 'Account-Type',
32+
data() {
33+
return {
34+
accountType: '',
35+
};
36+
},
37+
store,
38+
methods: {
39+
redirectTo(url) {
40+
location.href = url;
41+
},
42+
submit() {
43+
this.redirectTo(`/rpi/cb?state=${this.$route.query.state}&type=${this.accountType}`);
44+
},
45+
},
46+
};
47+
</script>
48+
49+
<style scoped lang="less">
50+
@import "~@coderdojo/cd-common/common/_colors";
51+
@import "../common/styles/cd-primary-button.less";
52+
53+
.cd-account-type {
54+
&__header {
55+
padding: 24px;
56+
}
57+
&__sub-header {
58+
padding: 12px;
59+
}
60+
&__box {
61+
border-style: solid;
62+
border-color: @cd-orange;
63+
border-width: 1px 1px 3px 1px;
64+
padding: 32px 56px 56px;
65+
max-width: 425px;
66+
margin: 20px auto 128px;
67+
}
68+
69+
&__submit {
70+
.primary-button;
71+
}
72+
73+
input[type=radio] {
74+
margin: 0 3px;
75+
}
76+
77+
}
78+
</style>

0 commit comments

Comments
 (0)