Login And Register Back

client/App.vue

@@ -22,6 +22,7 @@ export default {
   methods: {
     changeLocale(locale) {
       i18n.locale = locale;
+      this.$vuetify.lang.current = locale;
     }
   },
   watch: {

client/components/Worklist.vue

@@ -57,7 +57,7 @@
         show-select
         class="elevation-1"
         disable-pagination
-        hide-default-footer
+        
         height="600"
         style="width:100%"
       ></v-data-table>
@@ -172,86 +172,7 @@ export default {
         protein: 7,
         iron: "6%"
       },
-      {
-        name: "Frozen Yogurt",
-        calories: 159,
-        fat: 6.0,
-        carbs: 24,
-        protein: 4.0,
-        iron: "1%"
-      },
-      {
-        name: "Ice cream sandwich",
-        calories: 237,
-        fat: 9.0,
-        carbs: 37,
-        protein: 4.3,
-        iron: "1%"
-      },
-      {
-        name: "Eclair",
-        calories: 262,
-        fat: 16.0,
-        carbs: 23,
-        protein: 6.0,
-        iron: "7%"
-      },
-      {
-        name: "Cupcake",
-        calories: 305,
-        fat: 3.7,
-        carbs: 67,
-        protein: 4.3,
-        iron: "8%"
-      },
-      {
-        name: "Gingerbread",
-        calories: 356,
-        fat: 16.0,
-        carbs: 49,
-        protein: 3.9,
-        iron: "16%"
-      },
-      {
-        name: "Jelly bean",
-        calories: 375,
-        fat: 0.0,
-        carbs: 94,
-        protein: 0.0,
-        iron: "0%"
-      },
-      {
-        name: "Lollipop",
-        calories: 392,
-        fat: 0.2,
-        carbs: 98,
-        protein: 0,
-        iron: "2%"
-      },
-      {
-        name: "Honeycomb",
-        calories: 408,
-        fat: 3.2,
-        carbs: 87,
-        protein: 6.5,
-        iron: "45%"
-      },
-      {
-        name: "Donut",
-        calories: 452,
-        fat: 25.0,
-        carbs: 51,
-        protein: 4.9,
-        iron: "22%"
-      },
-      {
-        name: "KitKat",
-        calories: 518,
-        fat: 26.0,
-        carbs: 65,
-        protein: 7,
-        iron: "6%"
-      }
+    
     ]
   })
 };

client/plugins/i18n.js

@@ -4,6 +4,11 @@ Vue.use(VueI18n);
 
 const messages = {
     'en': {
+        $vuetify: {
+            dataTable: {
+                itemsPerPageText: 'منستیبمتن سمکنیتب '
+            }
+        },
         Login: {
             loginHeader: 'Login',
             registerBtn: 'Register',
@@ -12,7 +17,11 @@ const messages = {
             loginBtn: 'login',
             passwordHint: 'At Least 8 characters',
             required: 'Required',
-            min8Character: 'Min 8 Characters'
+            min8Character: 'Min 8 Characters',
+            usernameAlert: 'please enter username',
+            passwordAlert: 'please enter password',
+            errorUserNotFound: 'User not found',
+            errorIncorrectPassword: 'Incorrect Password'
         },
         Register: {
             registerHeader: 'Register',
@@ -23,7 +32,13 @@ const messages = {
             registerBtn: 'Register And Login',
             required: 'Required',
             min8Character: 'Min 8 Characters',
-            matchPass: "password and repeat passwords must be the same"
+            matchPass: "password and repeat passwords must be the same",
+            usernameAlert: 'please enter username',
+            firstPassAlert: 'please enter password',
+            secondPassAlert: 'please enter password',
+            error403: 'Username already exists',
+            loadingText: 'creating user',
+            userCreated: 'user has been Created'
         },
         AppHeader: {
             appName: 'Karname',
@@ -43,7 +58,11 @@ const messages = {
             loginBtn: 'ورود',
             passwordHint: 'حداقل 8 کاراکتر',
             required: 'مورد نیاز',
-            min8Character: 'حداقل 8 کاراکتر'
+            min8Character: 'حداقل 8 کاراکتر',
+            usernameAlert: 'لطفا نام کاربری را وارد نمایید',
+            passwordAlert: 'لطفا رمز ورود را وارد نمایید',
+            errorUserNotFound: 'کاربر یافت نشد',
+            errorIncorrectPassword: 'رمز نادرست'
         },
         Register: {
             registerHeader: 'ثبت نام کاربر',
@@ -54,7 +73,13 @@ const messages = {
             registerBtn: 'ثبت نام و ورود',
             required: 'مورد نیاز',
             min8Character: 'حداقل 8 کاراکتر',
-            matchPass: "رمز عبور و تکرار آن باید مشابه باشند"
+            matchPass: "رمز عبور و تکرار آن باید مشابه باشند",
+            usernameAlert: 'لطفا نام کاربری را وارد نمایید',
+            firstPassAlert: 'لطفا رمز را وارد نمایید',
+            secondPassAlert: 'لطفا رمز را وارد نمایید',
+            error403: 'نام کاربری وجود دارد',
+            loadingText: 'در حال ایجاد کاربر',
+            userCreated: 'کاربر ایجاد شد'
         },
         AppHeader: {
             appName: 'کارنامه',

client/plugins/routes.js

@@ -12,14 +12,14 @@ const routes = [{
         name: 'Home'
     },
     {
-        path: '/login',
+        path: '/signin',
         component: Login,
-        name: 'login'
+        name: 'signin'
     },
     {
-        path: '/register',
+        path: '/signup',
         component: Register,
-        name: 'register'
+        name: 'signup'
     },
     {
         path: '/main',

client/plugins/vuetify.js

@@ -7,28 +7,15 @@ import Vuetify from 'vuetify';
 import '../../public/fonts/font.css';
 Vue.use(Vuetify);
 
-// import fa from 'vuetify/es5/locale/fa';
-// import en from 'vuetify/es5/locale/en';
-
-
-// import VueI18n from 'vue-i18n';
-// Vue.use(VueI18n);
-
-// import messages from './i18n';
-
-// const i18n = new VueI18n({
-//     locale: 'fa', // set locale    
-//     fallbackLocale: 'en', // set fallback locale    
-//     messages, // set locale messages
-// });
+import fa from 'vuetify/es5/locale/fa';
+import en from 'vuetify/es5/locale/en';
 
 
 export default new Vuetify({
-    // lang: {
-    //     locales: { fa, en },
-    //     current: 'fa',
-    //     t: (key, ...params) => i18n.t(key, params),
-    // },
+    lang: {
+        locales: { fa, en },
+        current: 'en'
+    },
     icons: {
         iconfont: 'mdi', // default - only for display purposes
     },

client/views/Home.vue

@@ -7,13 +7,13 @@ import { Meteor } from "meteor/meteor";
 export default {
   beforeRouteEnter(to, from, next) {
     next(vm => {
-      debugger;
-      // if (Meteor.userId()) {
-      //   vm.$router.push("/main/worklist");
-      // } else {
-      //   vm.$router.push("/login");
-      // }
-      vm.$router.push("/login");
+      
+      if (Meteor.userId()) {
+        vm.$router.push("/main/worklist");
+      } else {
+        vm.$router.push("/signin");
+      }
+      
     });
   }
 };

client/views/Login.vue

 <template>
   <v-content class="fill-height">
-    <auth-header btnToProp="register" btnLabel="Login.registerBtn" btnIconName="mdi-account-plus"></auth-header>
+    <auth-header btnToProp="signup" btnLabel="Login.registerBtn" btnIconName="mdi-account-plus"></auth-header>
 
     <v-container fluid class="align-center fill-height backgroundImg">
-
       <v-row justify="center" class="loginCard">
         <v-col xs="8" sm="6" md="4" lg="3">
           <v-card class="elevation-12 roundedCard" light elevation="24">
@@ -19,6 +18,8 @@
                   prepend-icon="mdi-account-circle"
                   :rules="[rules.required]"
                   v-model="username"
+                  ref="usernameTextField"
+                  :hint="this.usernameAlert?`${$t('Login.usernameAlert')}`:''"
                 />
                 <v-text-field
                   :type="!showPassword?'password' :'text'"
@@ -26,25 +27,27 @@
                   prepend-icon="mdi-lock"
                   @click:append="showPassword = !showPassword"
                   :append-icon="showPassword ? 'mdi-eye': 'mdi-eye-off'"
-                  :hint="$t('Login.passwordHint')"
+                  :hint="this.passwordAlert?$t('Login.passwordAlert'):$t('Login.passwordHint')"
                   :rules="[rules.required, rules.min]"
                   v-model="password"
+                  ref="passwordTextField"
                 />
               </v-form>
-              
             </v-card-text>
-            <v-card-actions>
-              <v-spacer></v-spacer>
+            <v-card-actions class="flex-wrap">
               <v-btn
                 style="width:100%"
                 color="rgb(94, 181, 177,.85)"
                 rounded
-                dark
+                class="white--text mb-2"
                 @click="loginUser()"
+                :loading="loading"
+                :disabled="loading"
               >
                 <v-icon left>mdi-login</v-icon>
                 <small>{{$t('Login.loginBtn')}}</small>
               </v-btn>
+              <v-btn text rounded color="green" x-small>Change Password?</v-btn>
             </v-card-actions>
           </v-card>
         </v-col>
@@ -61,6 +64,7 @@
         <li></li>
         <li></li>
       </ul>
+      <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="2000">{{ snackbarText }}</v-snackbar>
     </v-container>
     <app-footer></app-footer>
   </v-content>
@@ -78,9 +82,15 @@ export default {
   },
   data() {
     return {
+      loading: false,
+      snackbar: false,
+      snackbarColor: "red",
+      snackbarText: "",
       showPassword: false,
       username: null,
+      usernameAlert: false,
       password: null,
+      passwordAlert: false,
       rules: {
         required: value => !!value || this.$t("Login.required"),
         min: v => {
@@ -92,21 +102,44 @@ export default {
   },
   methods: {
     loginUser() {
-      debugger;
       const that = this;
-      if ((this.username != null) & (this.password != null)) {
-        Meteor.loginWithPassword(this.username, this.password, function(
-          error,
-          result
-        ) {
-          console.log(result);
-          if (error) {
-            console.log(error);
-          } else {
-            that.$router.push("/main/worklist");
-          }
-        });
+
+      if (this.username == null || this.username.length == 0) {
+        this.$refs.usernameTextField.focus();
+        this.usernameAlert = true;
+        return;
+      }
+
+      if (this.password == null || this.password.length == 0) {
+        this.$refs.passwordTextField.focus();
+        this.passwordAlert = true;
+        return;
       }
+      this.loading = true;
+      Meteor.loginWithPassword(this.username, this.password, function(
+        error,
+        result
+      ) {
+        if (error) {
+          that.loading = false;
+          if (error.reason == "Incorrect password") {
+            that.snackbarText = that.$t("Login.errorIncorrectPassword");
+            that.snackbarColor = "red";
+            that.snackbar = true;
+          }
+
+          if (error.reason == "User not found") {
+            that.snackbarText = that.$t("Login.errorUserNotFound");
+            that.snackbarColor = "red";
+            that.snackbar = true;
+          }
+        } else {
+          Meteor.setTimeout(() => {
+            that.loading = false;
+            that.$router.push("/main/worklist");
+          }, 1000);
+        }
+      });
     }
   },
   beforeRouteEnter(to, from, next) {
@@ -166,4 +199,39 @@ img {
   border-radius: 20px;
 }
 @import url("./css/bubbles.css");
+
+/* loader */
+
+@-moz-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
\ No newline at end of file

client/views/Register.vue

 <template>
   <!-- <div class="fill-height"> -->
   <v-content class="fill-height">
-    <auth-header btnToProp="login" btnLabel="Register.loginBtn" btnIconName="mdi-login"></auth-header>
+    <auth-header btnToProp="signin" btnLabel="Register.loginBtn" btnIconName="mdi-login"></auth-header>
     <v-container fluid class="align-center fill-height backgroundImg">
       <v-row justify="center" class="loginCard">
         <v-col xs="8" sm="6" md="4" lg="3">
@@ -17,6 +17,8 @@
                   prepend-icon="mdi-account-circle"
                   :rules="[rules.required]"
                   v-model="username"
+                  ref="usernameTextField"
+                  :hint="this.usernameAlert?`${$t('Register.usernameAlert')}`:''"
                 />
                 <v-text-field
                   :type="!showPassword1?'password' :'text'"
@@ -26,6 +28,8 @@
                   :append-icon="showPassword1 ? 'mdi-eye': 'mdi-eye-off'"
                   v-model="firstPass"
                   :rules="[rules.required, rules.min]"
+                  ref="firstPassTextField"
+                  :hint="this.firstPassAlert?`${$t('Register.usernameAlert')}`:''"
                 />
                 <v-text-field
                   :type="!showPassword2?'password' :'text'"
@@ -35,14 +39,27 @@
                   :append-icon="showPassword2 ? 'mdi-eye': 'mdi-eye-off'"
                   v-model="secondPass"
                   :rules="[rules.required, rules.matchPass]"
+                  ref="secondPassTextField"
+                  :hint="this.secondPassAlert?`${$t('Register.usernameAlert')}`:''"
                 />
               </v-form>
             </v-card-text>
             <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn style="width:100%" dark color="rgb(94, 181, 177,.85)" rounded @click="createAccount()">
+              <v-btn
+                style="width:100%"
+                class="white--text"
+                color="rgb(94, 181, 177,.85)"
+                rounded
+                @click="createAccount()"
+                :loading="loading"
+                :disabled="loading"
+              >
                 <v-icon left>mdi-login</v-icon>
                 <small>{{$t('Register.registerBtn')}}</small>
+                <template v-slot:loader>
+                  <span>{{$t('Register.loadingText')}}</span>
+                </template>
               </v-btn>
             </v-card-actions>
           </v-card>
@@ -60,6 +77,7 @@
         <li></li>
         <li></li>
       </ul>
+      <v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="2000">{{ snackbarText }}</v-snackbar>
     </v-container>
     <app-footer></app-footer>
   </v-content>
@@ -77,9 +95,16 @@ export default {
   },
   data() {
     return {
+      snackbar: false,
+      snackbarText: "",
+      snackbarColor: "red",
+      loading: false,
       username: null,
-      firstPass: undefined,
-      secondPass: undefined,
+      usernameAlert: false,
+      firstPass: null,
+      firstPassAlert: false,
+      secondPass: null,
+      secondPassAlert: false,
       showPassword1: false,
       showPassword2: false,
       rules: {
@@ -102,7 +127,32 @@ export default {
       const username = this.username;
       const password = this.firstPass;
       const that = this;
+
+      if (this.username == null || this.username.length == 0) {
+        this.$refs.usernameTextField.focus();
+        this.usernameAlert = true;
+        return;
+      }
+
+      if (this.firstPass == null || this.firstPass.length == 0) {
+        this.$refs.firstPassTextField.focus();
+        this.firstPassAlert = true;
+        return;
+      }
+
+      if (this.secondPass == null || this.secondPass.length == 0) {
+        this.$refs.secondPassTextField.focus();
+        this.secondPassAlert = true;
+        return;
+      }
+
+      if (this.firstPass != this.secondPass) {
+        return;
+      }
+
       if (this.firstPass == this.secondPass && this.username != null) {
+        this.loading = true;
+        
         Accounts.createUser(
           {
             username: this.username,
@@ -110,15 +160,21 @@ export default {
           },
           function(error, result) {
             if (error) {
-              return;
+              that.loading = false;
+              if (error.error == 403) {
+                that.snackbarColor = "red";
+                that.snackbarText = that.$t("Register.error403");
+                that.snackbar = true;
+              }
             } else {
-              Meteor.loginWithPassword(username, password, function(error) {
-                if (error) {
-                  console.log(error);
-                } else {
-                  that.$router.push("/main/worklist");
-                }
-              });
+              that.snackbarColor = "rgb(94, 181, 177,.85)";
+              that.snackbarText = that.$t("Register.userCreated");
+              that.snackbar = true;
+              
+              Meteor.setTimeout(() => {
+                that.loading = false;
+                that.$router.push("/main/worklist");
+              }, 1000);
             }
           }
         );
@@ -162,4 +218,39 @@ img {
 .roundedCard {
   border-radius: 20px;
 }
+
+/* loader */
+
+@-moz-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loader {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
\ No newline at end of file

imports/api/methods/worklist.js

 import { Meteor } from 'meteor/meteor';
-import { Accounts } from 'meteor/accounts-base'
+import { Accounts } from 'meteor/accounts-base';
+
+Accounts.onLogin(function(user) {
+    debugger;
+    console.log(",", user.user._id)
+});
+
+
 
 
 Meteor.methods({
@@ -9,6 +16,7 @@ Meteor.methods({
         try {
             const result = HTTP.call('GET', 'http://192.168.4.105:2050/Broker/HISIntegration.svc/rest/Fetchworklist/ratio');
             console.log(result);
+
             return true;
         } catch (e) {
             // Got a network error, timeout, or HTTP error in the 400 or 500 range.