Merge branch 'release/1.0.0'

Kimsoeurn · Feb 1, 2022 · 48e543a · 48e543a
2 parents a47a5d3 + cbb6f7d
commit 48e543a
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,27 @@
-# patient-registration
+# Front-end Patient Registration
+Simple Patient Registration Mangement System, Build Using VueJs Front-end 
+and Back-end using Laravel
+
+## Features
+- Languages (Khmer, English)
+- Login and Registration
+- CRUD Operations (Patients)
+
+## Requirements
+
+These packages use (no need to install):
+* [VueJs]()
+* [Vuex]()
+* [VueRouter]()
+* [VueI18n]()
+* [Axios]()
+* [Boostrap-Vue]()
+* [vuelidate]()
+* [vuetable-2]()
+* [vue-sweetalert2]()
+
+The current package requirements are:
+- NodeJs >= 14.x
 
 ## Project setup
 ```

diff --git a/src/locales/kh.json b/src/locales/kh.json
@@ -85,6 +85,12 @@
     "date_of_birth_required": "សូមបំពេញថ្ងៃខែឆ្នាំកំណើត",
     "occupation_required": "សូមជ្រើសរើសមុខរបរ",
     "username_required": "សូមបំពេញអ៊ីមែល",
-    "password_required": "សូមបំពេញលេខសំម្ងាត់"
+    "name_required": "សូមឈ្មោះ",
+    "email_required": "សូមបំពេញអ៊ីមែល",
+    "email_invalid": "អ៊ីមែលមិនត្រឹមត្រូវ",
+    "password_not_same": "លេខសំម្ងាត់បញ្ជាក់មិនត្រឹមត្រូវ",
+    "password_required": "សូមបំពេញលេខសំម្ងាត់",
+    "password_confirm_required": "សូមបំពេញលេខសំម្ងាត់បញ្ជាក់",
+    "password_min_length": "លេខសំម្ងាត់យ៉ាងតិច៦ខ្ទង់"
   }
 }
diff --git a/src/services/AuthService.js b/src/services/AuthService.js
@@ -12,6 +12,10 @@ class AuthService {
   profile() {
     return http.get('user')
   }
+
+  register(user) {
+    return http.post('register', user)
+  }
 }
 
 export default new AuthService()
diff --git a/src/services/HttpConfig.js b/src/services/HttpConfig.js
@@ -9,7 +9,9 @@ const instance = axios.create({
   },
 })
 
-instance.defaults.headers.common['Authorization'] =
-  'Bearer ' + TokenService.getToken()
+instance.interceptors.request.use(function (config) {
+  config.headers.common['Authorization'] = TokenService.getBearerToken()
+  return config
+})
 
 export default instance
diff --git a/src/services/TokenService.js b/src/services/TokenService.js
@@ -5,6 +5,9 @@ class TokenService {
   getToken() {
     return window.localStorage.getItem(API_ACCESS_TOKEN)
   }
+  getBearerToken() {
+    return `Bearer ${window.localStorage.getItem(API_ACCESS_TOKEN)}`
+  }
   setToken(token) {
     window.localStorage.setItem(API_ACCESS_TOKEN, token)
   }

diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
@@ -1,12 +1,12 @@
 import TokenService from '../../services/TokenService'
-import http from '../../services/HttpConfig'
 import AuthService from '../../services/AuthService'
 
 const state = {
   token: TokenService.getToken() || null,
   user: TokenService.getCurrentUser() || {},
   isAuthenticated: false,
   authError: false,
+  errors: [],
 }
 
 const getters = {
@@ -20,6 +20,7 @@ const getters = {
     return state.token
   },
   authError: (state) => state.authError,
+  errors: (state) => state.errors,
 }
 
 const mutations = {
@@ -48,16 +49,27 @@ const mutations = {
     state.user = {}
     TokenService.removeCurrentUser()
   },
+
+  SET_ERROR(state, errors) {
+    state.errors = errors
+  },
 }
 
 const actions = {
+  async register({ commit }, user) {
+    let response = await AuthService.register(user)
+    if (response.status === 200) {
+      commit('SET_TOKEN', response.data)
+      commit('SET_USER', response.data.user)
+    } else {
+      console.log('Register Fail')
+    }
+  },
+
   async login({ commit }, data) {
     let response = await AuthService.login(data)
     if (response.status === 200) {
       commit('SET_TOKEN', response.data)
-      http.defaults.headers.common[
-        'Authorization'
-      ] = `Bearer ${response.data.access_token}`
     } else {
       console.log('Login fail')
     }

diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
@@ -1,31 +1,80 @@
 <template>
   <div class="container my-3">
-    <b-form class="form-signin">
+    <b-form class="form-signin" @submit.prevent="register">
       <h1 class="h3 mb-3 font-weight-normal">{{ $t('auth.form_register') }}</h1>
-      <b-form-group id="name-group">
+      <ul>
+        <li v-for="error in errors" :key="error.message" class="text-danger">
+          {{ error[0] }}
+        </li>
+      </ul>
+      <div class="form-group">
         <label for="name">
           {{ $t('auth.name') }} <span class="text-danger">*</span>
         </label>
-        <b-form-input id="name" type="text" required />
-      </b-form-group>
-      <b-form-group id="email-group">
+        <b-form-input
+          v-model.trim="$v.user.name.$model"
+          id="name"
+          type="text"
+          :class="{ 'is-invalid': $v.user.name.$error }"
+        />
+        <div class="invalid-feedback" v-if="!$v.user.name.required">
+          {{ $t('validations.name_required') }}
+        </div>
+      </div>
+      <div class="form-group">
         <label for="email">
           {{ $t('auth.email') }} <span class="text-danger">*</span>
         </label>
-        <b-form-input id="email" type="email" required />
-      </b-form-group>
-      <b-form-group id="password-group">
+        <b-form-input
+          v-model.trim="$v.user.email.$model"
+          id="email"
+          type="email"
+          :class="{ 'is-invalid': $v.user.email.$error }"
+        />
+        <div class="invalid-feedback" v-if="!$v.user.email.required">
+          {{ $t('validations.email_required') }}
+        </div>
+        <div class="invalid-feedback" v-if="!$v.user.email.email">
+          {{ $t('validations.email_invalid') }}
+        </div>
+      </div>
+      <div class="form-group">
         <label for="password">
           {{ $t('auth.password') }} <span class="text-danger">*</span>
         </label>
-        <b-form-input id="password" type="password" required />
-      </b-form-group>
-      <b-form-group id="password-confirmation-group">
+        <b-form-input
+          v-model.trim="$v.user.password.$model"
+          id="password"
+          type="password"
+          :class="{ 'is-invalid': $v.user.password.$error }"
+        />
+        <div class="invalid-feedback" v-if="!$v.user.password.required">
+          {{ $t('validations.password_required') }}
+        </div>
+        <div class="invalid-feedback" v-if="!$v.user.password.minLength">
+          {{ $t('validations.password_min_length') }}
+        </div>
+      </div>
+      <div class="form-group">
         <label for="password_confirmation">
           {{ $t('auth.password_confirm') }} <span class="text-danger">*</span>
         </label>
-        <b-form-input id="password_confirmation" type="password" required />
-      </b-form-group>
+        <b-form-input
+          v-model.trim="$v.user.password_confirm.$model"
+          id="password_confirmation"
+          type="password"
+          :class="{ 'is-invalid': $v.user.password_confirm.$error }"
+        />
+        <div class="invalid-feedback" v-if="!$v.user.password_confirm.required">
+          {{ $t('validations.password_confirm_required') }}
+        </div>
+        <div
+          class="invalid-feedback"
+          v-if="!$v.user.password_confirm.sameAsPassword"
+        >
+          {{ $t('validations.password_not_same') }}
+        </div>
+      </div>
       <button class="btn btn-primary btn-block" type="submit">
         {{ $t('auth.create_account') }}
       </button>
@@ -34,16 +83,69 @@
 </template>
 
 <script>
+import { required, email, minLength, sameAs } from 'vuelidate/lib/validators'
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'Register',
+  data() {
+    return {
+      user: {
+        name: '',
+        email: '',
+        password: '',
+        password_confirm: '',
+      },
+    }
+  },
+  computed: {
+    ...mapGetters({ errors: 'auth/errors' }),
+  },
+  validations: {
+    user: {
+      name: {
+        required,
+      },
+      email: {
+        required,
+        email,
+      },
+      password: {
+        required,
+        minLength: minLength(6),
+      },
+      password_confirm: {
+        required,
+        sameAsPassword: sameAs('password'),
+      },
+    },
+  },
+  methods: {
+    register() {
+      this.$v.$touch()
+
+      if (!this.$v.$invalid) {
+        this.$store
+          .dispatch('auth/register', this.user)
+          .then(() => {
+            this.$router.push('/')
+          })
+          .catch((e) => {
+            let response = e.response
+            if (response.status === 422) {
+              this.$store.commit('auth/SET_ERROR', response.data.errors)
+            }
+          })
+      }
+    },
+  },
 }
 </script>
 
 <style scoped>
 .form-signin {
   width: 100%;
   max-width: 330px;
-  padding: 15px;
   margin: auto;
 }
 .form-signin .checkbox {
@@ -53,7 +155,6 @@ export default {
   position: relative;
   box-sizing: border-box;
   height: auto;
-  padding: 10px;
   font-size: 16px;
 }
 .form-signin .form-control:focus {