├── .browserslistrc
├── .gitignore
├── README.md
├── babel.config.js
├── jest.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── screenshots
    ├── landingpage.png
    ├── order-button-page.png
    └── userdetailpage.png
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Header.vue
    │   ├── UserDetail.vue
    │   └── steps
    │   │   ├── FormOne.vue
    │   │   ├── FormTwo.vue
    │   │   └── Intro.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── services
    │   └── GitHubApi.js
    ├── store
    │   └── index.js
    └── views
    │   └── Home.vue
└── tests
    └── unit
        ├── Home.spec.js
        └── UserDetail.spec.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # multi-step form app
  2 | 
  3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/7259fdf9-60a1-4b7e-9100-77c6d95325e7/deploy-status)](https://app.netlify.com/sites/vue-multi-steps/deploys)
  4 | 
  5 | DEMO: [https://vue-multi-steps.netlify.app/](https://vue-multi-steps.netlify.app/)
  6 | 
  7 | This is a simple app that guides a user through a multi-step process to register into a community group.
  8 | 
  9 | By filling up the form step-by-step, you will get more information from Github APIs at the end.
 10 | 
 11 | ![demo1 - landing](./screenshots/landingpage.png)
 12 | ![demo2 - userpage](./screenshots/userdetailpage.png)
 13 | 
 14 | ## Technologies
 15 | 
 16 | - Vue.js 3
 17 | - Vuex 4
 18 | - [vee-validate 4](https://vee-validate.logaretm.com/v4/) with [yup](https://github.com/jquense/yup)
 19 | - Axios
 20 | - Jest
 21 | 
 22 | ## Project setup
 23 | 
 24 | To run this project, use the following commands in your terminal:
 25 | 
 26 | ```
 27 | # clone the repository
 28 | git clone git@github.com:peterchencc/vue-multi-steps.git
 29 | 
 30 | # change the folder
 31 | cd vue-multi-steps
 32 | 
 33 | # install dependencies
 34 | npm install
 35 | 
 36 | # Compiles and hot-reloads for development
 37 | npm run serve
 38 | 
 39 | # Compiles and minifies for production
 40 | npm run build
 41 | 
 42 | # Run unit tests
 43 | npm run test:unit
 44 | ```
 45 | 
 46 | ## Project structure
 47 | 
 48 | The home page contain two part, `<Form>` wrapper and `<UserDetail>` component. vee-validate offers many helpers to handle form validation. Using `<Form>` wrapper with `handleSubmit` slot to handle form submissions manually by clicking "next" button and trigger a callback to next step.
 49 | 
 50 | Switch between each steps by dynamic components. Every step with required input field `<Field> <ErrorMessage>` to handle errors and basic validation. The method `validateCurrentStep` will check the values and errors on current step. If the value on the current step is invalid, the "Next" button will be disabled.
 51 | 
 52 | The `<UserDetail>` component shows up only when user finish the steps and submit the from. It will fetch the GitHub API with username to get response data and show the avatar image.
 53 | 
 54 | ## Gotchas
 55 | 
 56 | ### Add HTML `autofocus` attribute on the first text field
 57 | 
 58 | Let the first input field automatically get focus when the component loads
 59 | 
 60 | ### Use CSS `order` property to specify the order of "Back" "Next" button position
 61 | 
 62 | Placing the "Next" button follows the last input field in the HTML. User can press "Tab" after filling each of the field. It will then focus on "Next" button after last field.
 63 | 
 64 | ```html
 65 | <form>
 66 |   <input text="text" name="lastname" />
 67 |   <input text="text" name="username" />
 68 | </form>
 69 | <div class="step-footer">
 70 |   <div class="current-steps">2 / 3</div>
 71 |   <!-- order: 2; -->
 72 |   <button type="button" class="btn-next">Next</button>
 73 |   <!-- order: 3; -->
 74 |   <button type="button" class="btn-back">Back</button>
 75 |   <!-- order: 1; -->
 76 | </div>
 77 | ```
 78 | 
 79 | On the app.
 80 | ![On the app.](./screenshots/order-button-page.png)
 81 | 
 82 | Small change on the HTML structure and keep the UI with more intuitive UX.
 83 | 
 84 | ### Use CSS Grid in `<UserDetail>` component to display responsive layout
 85 | 
 86 | ### Bonus: workflow can be browsed using the native browser's "back" / "next" buttons
 87 | 
 88 | Approach: Using Vue Router. By declaring every step path, so that we can use Web API History `back()` / `forward()` to trigger native browser.
 89 | 
 90 | ```js
 91 | {
 92 |   path: '/steps',
 93 |   component: Steps,
 94 |   children: [
 95 |     { path: '1', component: StepOne, name: 'StepOne' },
 96 |     { path: '2', component: StepTwo, name: 'StepTwo' },
 97 |     { path: '3', component: StepThree, name: 'StepThree' }
 98 |   ],
 99 | },
100 | ```
101 | 
102 | I tried this way at the beginning and found out we need to add some complex logic on navigation guards and redirection on `$router`. Too much criteria, and I'm new for the Vue Router. So I decided to build a simple one that can finish our goal first.
103 | 
104 | ### Bonus: Animate workflow transitions
105 | 
106 | I tried to add this kind of transition on the dynamic components. So it could have animation when switching between each workflow.
107 | 
108 | ```html
109 | <transition name="component-fade" mode="out-in">
110 |   <component :is="component"></component>
111 | </transition>
112 | ```
113 | 
114 | But it didn't work out at the end. Not sure what happened here. I've done the same way under Vue.js 2 before and it worked.
115 | 
116 | ### What's next?
117 | 
118 | - Refactor the `<FormOne>` `<FormTwo>`, and wrap a reusable `<form-input>` component for them.
119 | - Improve the error handling of fetching GitHub API.
120 | - With or without Vuex for this project?
121 | - More testing!
122 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: '@vue/cli-plugin-unit-jest',
3 |   transform: {
4 |     '^.+\\.vue$': 'vue-jest'
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-multi-steps",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "core-js": "^3.6.5",
13 |     "vee-validate": "^4.2.4",
14 |     "vue": "^3.0.0",
15 |     "vue-router": "^4.0.0-0",
16 |     "vuex": "^4.0.0-0",
17 |     "yup": "^0.32.9"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-router": "~4.5.0",
22 |     "@vue/cli-plugin-unit-jest": "~4.5.0",
23 |     "@vue/cli-plugin-vuex": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/compiler-sfc": "^3.0.0",
26 |     "@vue/test-utils": "^2.0.0-0",
27 |     "typescript": "~3.9.3",
28 |     "vue-jest": "^5.0.0-0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterchencc/vue-multi-steps/5c22d2058f4747ce8692590eec19e311dfada720/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/screenshots/landingpage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterchencc/vue-multi-steps/5c22d2058f4747ce8692590eec19e311dfada720/screenshots/landingpage.png


--------------------------------------------------------------------------------
/screenshots/order-button-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterchencc/vue-multi-steps/5c22d2058f4747ce8692590eec19e311dfada720/screenshots/order-button-page.png


--------------------------------------------------------------------------------
/screenshots/userdetailpage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterchencc/vue-multi-steps/5c22d2058f4747ce8692590eec19e311dfada720/screenshots/userdetailpage.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Header />
 3 |   <main>
 4 |     <router-view />
 5 |   </main>
 6 |   <footer>
 7 |     <p>Vue Mutli-Step Form - Peter Chen</p>
 8 |   </footer>
 9 | </template>
10 | 
11 | <script>
12 | import Header from './components/Header'
13 | export default {
14 |   components: {
15 |     Header,
16 |   },
17 | }
18 | </script>
19 | 
20 | <style>
21 | /* Reset Global selectors */
22 | html {
23 |   box-sizing: border-box;
24 |   -webkit-text-size-adjust: 100%;
25 |   word-break: normal;
26 |   -moz-tab-size: 4;
27 |   tab-size: 4;
28 | }
29 | 
30 | *,
31 | ::before,
32 | ::after {
33 |   background-repeat: no-repeat;
34 |   box-sizing: inherit;
35 | }
36 | 
37 | ::before,
38 | ::after {
39 |   text-decoration: inherit;
40 |   vertical-align: inherit;
41 | }
42 | 
43 | * {
44 |   padding: 0;
45 |   margin: 0;
46 | }
47 | 
48 | button,
49 | input {
50 |   background-color: transparent;
51 |   border-style: none;
52 | }
53 | 
54 | /* Reset Global selectors */
55 | 
56 | main {
57 |   min-height: 90vh;
58 | }
59 | 
60 | footer {
61 |   display: flex;
62 |   align-items: center;
63 |   justify-content: center;
64 |   color: #000;
65 | }
66 | 
67 | #app {
68 |   font-family: Avenir, Helvetica, Arial, sans-serif;
69 |   -webkit-font-smoothing: antialiased;
70 |   -moz-osx-font-smoothing: grayscale;
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peterchencc/vue-multi-steps/5c22d2058f4747ce8692590eec19e311dfada720/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <h1>GitHub Community in Berlin 🇩🇪</h1>
 4 |   </header>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | header {
 9 |   padding: 10px 20px;
10 |   background-color: #42b983;
11 |   color: #ffffff;
12 | }
13 | h1 {
14 |   font-size: 1.25rem;
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/UserDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="user-detail">
  3 |     <div class="header">
  4 |       <div class="welcome">Welcome</div>
  5 |       <div class="desc">
  6 |         You are part of our connection in the Berlin GitHub Community.
  7 |       </div>
  8 |     </div>
  9 | 
 10 |     <div class="user-info">
 11 |       <div>Name: {{ user.firstName }} {{ user.lastName }}</div>
 12 |       <div>Email: {{ user.email }}</div>
 13 |       <div>Username: {{ user.username }}</div>
 14 |     </div>
 15 | 
 16 |     <div class="github-info">
 17 |       <div v-if="userHasData">
 18 |         <div>
 19 |           <img
 20 |             class="avatar-image"
 21 |             :src="responseData.avatar_url"
 22 |             alt="Github avatar image"
 23 |           />
 24 |         </div>
 25 |         <div class="">
 26 |           <a v-bind:href="responseData.html_url" target="_blank">
 27 |             {{ responseData.html_url }}
 28 |           </a>
 29 |           <ul>
 30 |             <li>followers: {{ responseData.followers }}</li>
 31 |             <li>following: {{ responseData.following }}</li>
 32 |           </ul>
 33 |         </div>
 34 |       </div>
 35 |       <div v-else class="github-error">
 36 |         Can't find your username in GitHub.
 37 |       </div>
 38 |     </div>
 39 | 
 40 |     <div class="footer">
 41 |       <button
 42 |         @click="this.$emit('toRestart')"
 43 |         type="button"
 44 |         class="btn-secondary"
 45 |       >
 46 |         Back to Home
 47 |       </button>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import GitHubApi from '../services/GitHubApi'
 54 | 
 55 | export default {
 56 |   data() {
 57 |     return {
 58 |       user: this.$store.state.user,
 59 |       responseData: {},
 60 |     }
 61 |   },
 62 |   created() {
 63 |     GitHubApi()
 64 |       .get('/users/' + this.user.username)
 65 |       .then((response) => {
 66 |         this.responseData = response.data
 67 |       })
 68 |       .catch((error) => {
 69 |         console.error(error)
 70 |       })
 71 |   },
 72 |   computed: {
 73 |     userHasData() {
 74 |       return !(Object.keys(this.responseData).length === 0)
 75 |     },
 76 |   },
 77 | }
 78 | </script>
 79 | 
 80 | <style>
 81 | .header {
 82 |   border: 1 solid #dddddd;
 83 |   margin: 30px 0;
 84 | }
 85 | .header .welcome {
 86 |   margin: 10px 0;
 87 |   font-size: 1.75rem;
 88 |   font-weight: bold;
 89 | }
 90 | .user-info {
 91 |   margin-bottom: 50px;
 92 | }
 93 | .avatar-image {
 94 |   max-width: 200px;
 95 | }
 96 | .footer {
 97 |   display: flex;
 98 |   margin: 50px auto;
 99 | }
100 | 
101 | @media (min-width: 768px) {
102 |   .user-detail {
103 |     display: grid;
104 |   }
105 |   .header {
106 |     text-align: center;
107 |     grid-column-start: 1;
108 |     grid-column-end: 3;
109 |   }
110 |   .footer {
111 |     grid-column-start: 1;
112 |     grid-column-end: 3;
113 |   }
114 |   .user-info {
115 |     padding: 10px;
116 |     margin: auto;
117 |   }
118 |   .github-info {
119 |     border: 1px solid #ddd;
120 |     padding: 10px;
121 |     margin: auto;
122 |   }
123 | }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/components/steps/FormOne.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="step-title">Personal Info</div>
  3 | 
  4 |   <div class="form-input">
  5 |     <label for="frist-name">First Name</label>
  6 |     <Field
  7 |       :class="inputClassObject('firstName')"
  8 |       type="text"
  9 |       id="frist-name"
 10 |       name="firstName"
 11 |       :rules="firstNameRules"
 12 |       v-model.trim="firstName"
 13 |       autofocus
 14 |     />
 15 |     <ErrorMessage class="input-error-msg" name="firstName" />
 16 |   </div>
 17 | 
 18 |   <div class="form-input">
 19 |     <label for="last-name">Last Name</label>
 20 |     <Field
 21 |       :class="inputClassObject('lastName')"
 22 |       type="text"
 23 |       id="last-name"
 24 |       name="lastName"
 25 |       :rules="lastNameRules"
 26 |       v-model.trim="lastName"
 27 |     />
 28 |     <ErrorMessage class="input-error-msg" name="lastName" />
 29 |   </div>
 30 | 
 31 |   <div class="form-input">
 32 |     <label for="github-username">GitHub Username</label>
 33 |     <Field
 34 |       :class="inputClassObject('username')"
 35 |       type="text"
 36 |       id="username"
 37 |       name="username"
 38 |       :rules="usernameRules"
 39 |       v-model.trim="username"
 40 |     />
 41 |     <ErrorMessage class="input-error-msg" name="username" />
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import { Field, ErrorMessage } from 'vee-validate'
 47 | import * as yup from 'yup'
 48 | 
 49 | export default {
 50 |   name: 'FormOne',
 51 |   components: {
 52 |     Field,
 53 |     ErrorMessage,
 54 |   },
 55 |   props: {
 56 |     errors: {
 57 |       type: Object,
 58 |     },
 59 |   },
 60 |   data() {
 61 |     return {
 62 |       firstNameRules: yup
 63 |         .string()
 64 |         .trim()
 65 |         .required(),
 66 |       lastNameRules: yup
 67 |         .string()
 68 |         .trim()
 69 |         .required(),
 70 |       usernameRules: yup
 71 |         .string()
 72 |         .trim()
 73 |         .required(),
 74 |     }
 75 |   },
 76 |   computed: {
 77 |     firstName: {
 78 |       get() {
 79 |         return this.$store.state.user.firstName
 80 |       },
 81 |       set(value) {
 82 |         this.$store.commit('updateFirstName', value)
 83 |       },
 84 |     },
 85 |     lastName: {
 86 |       get() {
 87 |         return this.$store.state.user.lastName
 88 |       },
 89 |       set(value) {
 90 |         this.$store.commit('updateLastName', value)
 91 |       },
 92 |     },
 93 |     username: {
 94 |       get() {
 95 |         return this.$store.state.user.username
 96 |       },
 97 |       set(value) {
 98 |         this.$store.commit('updateUsername', value)
 99 |       },
100 |     },
101 |   },
102 |   methods: {
103 |     inputClassObject(name) {
104 |       return {
105 |         'input-control': true,
106 |         'has-error': this.errors.hasOwnProperty(name),
107 |       }
108 |     },
109 |   },
110 | }
111 | </script>
112 | 


--------------------------------------------------------------------------------
/src/components/steps/FormTwo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="step-title">Almost there!</div>
 3 | 
 4 |   <div class="form-input">
 5 |     <label for="email">User Email</label>
 6 |     <Field
 7 |       :class="inputClassObject('email')"
 8 |       type="email"
 9 |       id="email"
10 |       name="email"
11 |       :rules="emailRules"
12 |       v-model="email"
13 |       autofocus
14 |     />
15 |     <ErrorMessage class="input-error-msg" name="email" />
16 |   </div>
17 | 
18 |   <div class="form-input">
19 |     <Field
20 |       :class="inputClassObject('terms')"
21 |       type="checkbox"
22 |       id="terms"
23 |       name="terms"
24 |       :rules="termsRules"
25 |       :value="true"
26 |       v-model="isAgreeToTerms"
27 |     />
28 |     <label for="terms">Agree to Terms and Services</label>
29 |     <ErrorMessage class="input-error-msg" name="terms" />
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | import { Field, ErrorMessage } from 'vee-validate'
35 | import * as yup from 'yup'
36 | 
37 | export default {
38 |   name: 'FormTwo',
39 |   components: {
40 |     Field,
41 |     ErrorMessage,
42 |   },
43 |   props: {
44 |     errors: {
45 |       type: Object,
46 |     },
47 |   },
48 |   data() {
49 |     return {
50 |       emailRules: yup
51 |         .string()
52 |         .required()
53 |         .email(),
54 |       termsRules: yup
55 |         .boolean()
56 |         .required('You must agree to terms and services'),
57 |     }
58 |   },
59 |   computed: {
60 |     email: {
61 |       get() {
62 |         return this.$store.state.user.email
63 |       },
64 |       set(value) {
65 |         this.$store.commit('updateEmail', value)
66 |       },
67 |     },
68 |     isAgreeToTerms: {
69 |       get() {
70 |         return this.$store.state.user.isAgreeToTerms
71 |       },
72 |       set(value) {
73 |         this.$store.commit('updateIsAgreeToTerms', value)
74 |       },
75 |     },
76 |   },
77 |   methods: {
78 |     inputClassObject(name) {
79 |       return {
80 |         'input-control': true,
81 |         'has-error': this.errors.hasOwnProperty(name),
82 |       }
83 |     },
84 |   },
85 | }
86 | </script>
87 | 
88 | <style></style>
89 | 


--------------------------------------------------------------------------------
/src/components/steps/Intro.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="step-title">Register Now!</div>
 3 | 
 4 |   <p>Build up your engineering connection!</p>
 5 |   <br />
 6 |   <p>Just your name, GitHub's username and Email.</p>
 7 |   <p>After submitted your personal information, you will join the biggest engineering community in Berlin.</p>
 8 |   <br />
 9 |   <p>What we offer:</p>
10 |   <p>
11 |     <ul>
12 |       <li>Daily email newsletter</li>
13 |       <li>Regular team events (online)</li>
14 |       <li>Mentorship Program</li>
15 |     </ul>
16 |   </p>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'Intro',
22 |   props: {
23 |     errors: {
24 |       type: Object,
25 |     },
26 |   },
27 | }
28 | </script>
29 | 
30 | <style>
31 | ul {
32 |   margin-top: 0;
33 |   margin-bottom: 1rem;
34 |   padding-left: 1.5rem;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | createApp(App)
 7 |   .use(store)
 8 |   .use(router)
 9 |   .mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import Home from '../views/Home.vue'
 3 | 
 4 | const routes = [
 5 |   {
 6 |     path: '/',
 7 |     component: Home,
 8 |   },
 9 | ]
10 | 
11 | const router = createRouter({
12 |   history: createWebHistory(process.env.BASE_URL),
13 |   routes,
14 | })
15 | 
16 | export default router
17 | 


--------------------------------------------------------------------------------
/src/services/GitHubApi.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default () => {
 4 |   return axios.create({
 5 |     baseURL: `https://api.github.com`,
 6 |     headers: {
 7 |       Accept: 'application/vnd.github.v3+json',
 8 |     },
 9 |   })
10 | }
11 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | 
 3 | const getDefaultUser = () => {
 4 |   return {
 5 |     firstName: '',
 6 |     lastName: '',
 7 |     username: '',
 8 |     email: '',
 9 |     isAgreeToTerms: false,
10 |   }
11 | }
12 | 
13 | export default createStore({
14 |   strict: process.env.NODE_ENV !== 'production',
15 |   state: {
16 |     user: getDefaultUser(),
17 |   },
18 |   mutations: {
19 |     resetUserState(state) {
20 |       Object.assign(state.user, getDefaultUser())
21 |     },
22 |     updateFirstName(state, payload) {
23 |       state.user.firstName = payload
24 |     },
25 |     updateLastName(state, payload) {
26 |       state.user.lastName = payload
27 |     },
28 |     updateUsername(state, payload) {
29 |       state.user.username = payload
30 |     },
31 |     updateEmail(state, payload) {
32 |       state.user.email = payload
33 |     },
34 |     updateIsAgreeToTerms(state, payload) {
35 |       state.user.isAgreeToTerms = payload
36 |     },
37 |   },
38 |   actions: {
39 |     resetUserState({ commit }) {
40 |       commit('resetUserState')
41 |     },
42 |   },
43 |   modules: {},
44 | })
45 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="container">
  3 |     <Form v-if="!this.showUserDetail" v-slot="{ handleSubmit, values, errors }">
  4 |       <div class="step-card">
  5 |         <div class="step-body">
  6 |           <component
  7 |             :is="this.stepsList[this.currentStep]"
  8 |             :errors="errors"
  9 |           ></component>
 10 |         </div>
 11 | 
 12 |         <div class="step-footer">
 13 |           <div class="current-steps">
 14 |             <b>{{ this.currentStep + 1 }}</b> / {{ this.stepsList.length }}
 15 |           </div>
 16 | 
 17 |           <button
 18 |             @click="isLastStep ? finalSubmit() : handleSubmit($event, toNext)"
 19 |             :disabled="
 20 |               isFirstStep ? false : !validateCurrentStep(values, errors)
 21 |             "
 22 |             type="button"
 23 |             class="btn-primary btn-next"
 24 |           >
 25 |             {{ isLastStep ? `Submit` : `Next` }}
 26 |           </button>
 27 | 
 28 |           <button
 29 |             @click="toPrevious"
 30 |             v-show="!isFirstStep"
 31 |             type="button"
 32 |             class="btn-secondary btn-back"
 33 |           >
 34 |             Back
 35 |           </button>
 36 |         </div>
 37 |       </div>
 38 |     </Form>
 39 | 
 40 |     <UserDetail v-else @toRestart="toRestart" />
 41 |   </section>
 42 | </template>
 43 | 
 44 | <script>
 45 | import { mapActions } from 'vuex'
 46 | import { Form } from 'vee-validate'
 47 | import Intro from '../components/steps/Intro.vue'
 48 | import FormOne from '../components/steps/FormOne.vue'
 49 | import FormTwo from '../components/steps/FormTwo.vue'
 50 | import UserDetail from '../components/UserDetail.vue'
 51 | 
 52 | export default {
 53 |   name: 'Home',
 54 |   components: {
 55 |     Form,
 56 |     Intro,
 57 |     FormOne,
 58 |     FormTwo,
 59 |     UserDetail,
 60 |   },
 61 |   data() {
 62 |     return {
 63 |       currentStep: 0,
 64 |       stepsList: ['Intro', 'FormOne', 'FormTwo'],
 65 |       showUserDetail: false,
 66 |     }
 67 |   },
 68 | 
 69 |   computed: {
 70 |     isFirstStep() {
 71 |       return this.currentStep === 0
 72 |     },
 73 |     isLastStep() {
 74 |       return this.currentStep === this.stepsList.length - 1
 75 |     },
 76 |   },
 77 |   methods: {
 78 |     validateCurrentStep(values, errors) {
 79 |       // check if validation's errors object is empty
 80 |       const noErrors = Object.keys(errors).length === 0
 81 |       // check each of the validation's values has value
 82 |       const valuesAreNotEmpty = (obj) => {
 83 |         if (Object.keys(obj).length === 0) return true
 84 |         return Object.values(obj).every(
 85 |           (x) => !(!x || x === undefined || x.length === 0)
 86 |         )
 87 |       }
 88 | 
 89 |       return noErrors && valuesAreNotEmpty(values)
 90 |     },
 91 |     finalSubmit() {
 92 |       this.showUserDetail = true
 93 |     },
 94 |     toPrevious() {
 95 |       this.currentStep--
 96 |     },
 97 |     toNext() {
 98 |       this.currentStep++
 99 |     },
100 |     toRestart() {
101 |       this.currentStep = 0
102 |       this.showUserDetail = false
103 |       this.resetUserState()
104 |     },
105 |     ...mapActions(['resetUserState']),
106 |   },
107 | }
108 | </script>
109 | 
110 | <style>
111 | .container {
112 |   width: 100%;
113 |   padding-right: 15px;
114 |   padding-left: 15px;
115 |   margin-right: auto;
116 |   margin-left: auto;
117 |   display: flex;
118 |   flex-direction: column;
119 |   align-content: center;
120 |   justify-items: center;
121 | }
122 | 
123 | .step-card {
124 |   padding: 20px;
125 |   margin: 40px auto;
126 |   display: flex;
127 |   flex-direction: column;
128 |   position: relative;
129 |   max-width: 375px;
130 |   border: solid 2px #dddddd;
131 | }
132 | 
133 | .step-title {
134 |   margin: 10px 0;
135 |   font-size: 1.75rem;
136 |   font-weight: bold;
137 | }
138 | 
139 | .step-body {
140 |   margin-bottom: 20px;
141 |   min-height: 350px;
142 | }
143 | 
144 | .step-footer {
145 |   display: flex;
146 |   justify-content: center;
147 |   align-items: center;
148 |   width: 100%;
149 |   margin-top: 10px;
150 |   font-size: 1rem;
151 | }
152 | 
153 | button {
154 |   display: block;
155 |   padding: 15px;
156 |   font-weight: 700;
157 |   text-transform: uppercase;
158 |   cursor: pointer;
159 |   border-radius: 4px;
160 | }
161 | 
162 | button:disabled {
163 |   cursor: not-allowed;
164 |   opacity: 0.5;
165 | }
166 | 
167 | button.btn-primary {
168 |   background-color: #064faf;
169 |   color: #fff;
170 | }
171 | 
172 | button.btn-secondary {
173 |   color: #064faf;
174 | }
175 | 
176 | button.btn-next {
177 |   order: 3;
178 | }
179 | 
180 | button.btn-back {
181 |   order: 1;
182 | }
183 | 
184 | .current-steps {
185 |   padding: 10px;
186 |   border-radius: 15px;
187 |   background-color: #eaeaea;
188 |   margin-right: 10px;
189 |   margin-left: auto;
190 |   order: 2;
191 | }
192 | 
193 | /* From Input & Error */
194 | .form-input {
195 |   display: block;
196 |   margin-bottom: 15px;
197 | }
198 | 
199 | .form-input label {
200 |   font-weight: 600;
201 | }
202 | 
203 | .form-input span {
204 |   color: #ff2626;
205 |   font-size: 0.9rem;
206 |   display: block;
207 | }
208 | 
209 | .form-input .input-control[type='text'],
210 | .form-input .input-control[type='email'] {
211 |   height: 45px;
212 |   padding: 10px;
213 |   width: 100%;
214 |   background-color: #ffffff;
215 |   border: solid 1px #dddddd;
216 |   border-radius: 4px;
217 | }
218 | 
219 | .form-input .input-control[type='checkbox'] {
220 |   margin-right: 5px;
221 | }
222 | 
223 | .form-input .input-control.has-error {
224 |   border-color: #ff2626;
225 | }
226 | </style>
227 | 


--------------------------------------------------------------------------------
/tests/unit/Home.spec.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import { createStore } from 'vuex'
 3 | import Home from '@/views/Home.vue'
 4 | 
 5 | const store = createStore({
 6 |   state() {
 7 |     return {
 8 |       user: {
 9 |         firstName: '',
10 |         lastName: '',
11 |         username: '',
12 |         email: '',
13 |         isAgreeToTerms: false,
14 |       },
15 |     }
16 |   },
17 |   mutations: {},
18 | })
19 | 
20 | const wrapper = mount(Home, {
21 |   global: {
22 |     plugins: [store],
23 |   },
24 |   data() {
25 |     return {
26 |       currentStep: 0,
27 |     }
28 |   },
29 | })
30 | 
31 | describe('Home component', () => {
32 |   test('renders first step', () => {
33 |     expect(wrapper.vm.currentStep).toBe(0)
34 |     expect(wrapper.text()).toContain('Register Now!')
35 |   })
36 | 
37 |   test('renders first step with next button', () => {
38 |     const button = wrapper.find('button.btn-next')
39 |     expect(button.text()).toContain('Next')
40 |   })
41 | 
42 |   test('renders second step', () => {
43 |     const wrapper = mount(Home, {
44 |       global: {
45 |         plugins: [store],
46 |       },
47 |       data() {
48 |         return {
49 |           currentStep: 1,
50 |         }
51 |       },
52 |     })
53 |     expect(wrapper.text()).toContain('Personal Info')
54 |   })
55 | 
56 |   test('renders third step', () => {
57 |     const wrapper = mount(Home, {
58 |       global: {
59 |         plugins: [store],
60 |       },
61 |       data() {
62 |         return {
63 |           currentStep: 2,
64 |         }
65 |       },
66 |     })
67 |     expect(wrapper.text()).toContain('Almost there')
68 |   })
69 | })
70 | 


--------------------------------------------------------------------------------
/tests/unit/UserDetail.spec.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import UserDetail from '@/components/UserDetail.vue'
 3 | 
 4 | const $store = {
 5 |   state: {
 6 |     user: {
 7 |       firstName: 'Peter',
 8 |       lastName: 'Chen',
 9 |       username: 'peterchencc',
10 |       email: 'peterchencc@gmail.com',
11 |       isAgreeToTerms: true,
12 |     },
13 |   },
14 |   commit: jest.fn(),
15 | }
16 | 
17 | const wrapper = mount(UserDetail, {
18 |   global: {
19 |     mocks: {
20 |       $store,
21 |     },
22 |   },
23 |   data() {
24 |     return {
25 |       responseData: {},
26 |     }
27 |   },
28 | })
29 | 
30 | describe('UserDetail component', () => {
31 |   test('renders user info', () => {
32 |     expect(wrapper.find('.user-info').html()).toContain('Peter')
33 |     expect(wrapper.find('.user-info').html()).toContain('Chen')
34 |     expect(wrapper.find('.user-info').html()).toContain('peterchencc@gmail.com')
35 |   })
36 | })
37 | 


--------------------------------------------------------------------------------