Added Access Control Module

Enhance Login from username to email

Strides-Admin/src/http/api/access.js

@@ -0,0 +1,24 @@
+import {get, post, put, del} from '../http'
+
+const access = {
+  getAccessPages(params) {
+    return post('access/csms-users-pages', params)
+  },
+  getRoleOptions(params) {
+    return get('access/roles', params)
+  },
+  addAccessUser(params) {
+    return post('access/csms-users', params)
+  },
+  infoAccessUser(id) {
+    return get('access/csms-users/' + id)
+  },
+  updateAccessUser(params) {
+    return put('access/csms-users', params)
+  },
+  deleteAccessUser(id) {
+    return del('access/csms-users/' + id)
+  }
+}
+
+export default access;

Strides-Admin/src/http/api/group.js

@@ -0,0 +1,27 @@
+import { get, post } from '../http'
+
+const group = {
+  getGroupPages(data) {
+    return post('group/getGroupPages', data)
+  },
+  addUserGroup(data) {
+    return post('group/addUserGroup', data)
+  },
+  updateUserGroup(data) {
+    return post('group/updateUserGroup', data)
+  },
+  getUserGroupInfo(params) {
+    return get('group/getUserGroup', params)
+  },
+  deleteUserGroup(params) {
+    return get('group/delUserGroup', params)
+  },
+  getUserGroupType() {
+    return get('group/getUserGroupType')
+  },
+  getAllUserGroups() {
+    return get('group/getUserGroups')
+  }
+}
+
+export default group;

Strides-Admin/src/http/api/limit.js

@@ -1,12 +1,12 @@
 import {get, post} from '../http'
 
 const limit = {
-  getLimitStatus: () => get('creditLimit/status'),
-  getCreditLimitPages: (params) => post('creditLimit/pages', params),
-  addCreditLimit: (params) => post('creditLimit/add', params),
-  viewCreditLimit: (id) => get('creditLimit/detail', {creditLimitId: id}),
-  updateCreditLimit: (params) => post('creditLimit/update', params),
-  deleteCreditLimit: (id) => get('creditLimit/delete', {creditLimitId: id}),
+  getLimitStatus: () => get('group-credit/status'),
+  getCreditLimitPages: (params) => post('group-credit/pages', params),
+  addCreditLimit: (params) => post('group-credit/add', params),
+  viewCreditLimit: (id) => get('group-credit/detail', {groupCreditPk: id}),
+  updateCreditLimit: (params) => post('group-credit/update', params),
+  deleteCreditLimit: (id) => get('group-credit/delete', {groupCreditPk: id}),
 }
 
 export default limit;

Strides-Admin/src/http/http.js

@@ -96,6 +96,44 @@ export function post(url, data = {}) {
   })
 }
 
+/**
+ * put 请求方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+export function put(url, data = {}) {
+  return new Promise((resolve, reject) => {
+    axios.put(url, data)
+    .then(response => {
+      resolve(response.data)
+    }, err => {
+      reject(err)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
+/**
+ * delete 请求方法
+ * @param url
+ * @param data
+ * @returns {Promise}
+ */
+export function del(url, data = {}) {
+  return new Promise((resolve, reject) => {
+    axios.delete(url, data)
+    .then(response => {
+      resolve(response.data)
+    }, err => {
+      reject(err)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
 export function upload(url, data, header = {}) {
   return new Promise((resolve, reject) => {
     axios.post(url, data, {

Strides-Admin/src/layout/components/Navbar.vue

@@ -18,41 +18,45 @@
             class="account"/>
           <span class="trademarker">{{username}}</span>
         </div>
-        <div class="right-menu-image">
-          <img
-            src="../../assets/navigation_notification.png"
-            @click="onClickNotificationButton"/>
+        <div
+          class="right-menu-image"
+          @click="onClickNotificationButton">
+          <img src="../../assets/navigation_notification.png"/>
         </div>
-        <div class="right-menu-image">
-          <img
-            src="../../assets/navigation_message.png"
-            @click="onClickMessageButton"/>
+        <div
+          class="right-menu-image"
+          @click="onClickMessageButton">
+          <img src="../../assets/navigation_message.png"/>
         </div>
-        <div class="right-menu-image">
-          <img
-            src="../../assets/navigation_logout.png"
-            @click="logout"/>
+        <div
+          class="right-menu-image"
+          @click="logout">
+          <img src="../../assets/navigation_logout.png"/>
         </div>
       </template>
-      <el-dropdown class="avatar-container" trigger="click" v-else>
+      <el-dropdown
+        class="avatar-container"
+        @command="(v) => handleCommand(v)"
+        trigger="click"
+        v-else>
         <div class="avatar-wrapper">
           <!-- <img :src="adminIcon" class="user-avatar"> -->
           <i class="el-icon-menu"/>
         </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-menu
+          slot="dropdown"
+          class="user-dropdown">
           <el-dropdown-item>
-            <router-link to="/">
-              <span class="fixed-username">Hi, {{username}}</span>
-            </router-link>
+            <span class="fixed-username">Hi, {{username}}</span>
           </el-dropdown-item>
-          <el-dropdown-item divided>
-            <span to="/">Message</span>
+          <el-dropdown-item divided command="onClickMessageButton">
+            <span>Message</span>
           </el-dropdown-item>
-          <el-dropdown-item divided>
-            <span to="/">Email</span>
+          <el-dropdown-item divided command="onClickNotificationButton">
+            <span>Email</span>
           </el-dropdown-item>
-          <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">Log Out</span>
+          <el-dropdown-item divided command="logout">
+            <span>Log Out</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -99,20 +103,18 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
     logout() {
-      this.$confirm(
-        'Are you sure you want to logout ?',
-        'Logout',
-        {
-          confirmButtonText: 'Ok',
-          cancelButtonText: 'Cancel',
-          type: 'warning',
-        },
-      ).then(async () => {
+      this.$confirm('Are you sure you want to logout ?', 'Logout', {
+        confirmButtonText: 'Ok',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+      }).then(async () => {
         const path = this.$router.currentRoute.fullPath
         //console.log('lougout+path', path);
         this.$store.dispatch("user/logout").then(res => {
           this.$router.push({ path: "/login?redirect=" + path});
         })
+      }).catch(err => {
+        
       })
     },
     onClickMessageButton() {
@@ -121,6 +123,9 @@ export default {
     onClickNotificationButton() {
       console.log(' click notification button .............')
     },
+    handleCommand(v) {
+      this[v]()
+    }
   }
 }
 </script>
@@ -176,11 +181,11 @@ export default {
     position: relative;
     justify-content: flex-end;
     .trademarker {
-      padding-left: 15px;
+      padding-left: 5px;
       font-family: sans-serif;
       font-style: normal;
       font-weight: normal;
-      font-size: 14px;
+      font-size: 15px;
       text-transform: capitalize;
       color: #333333;
     }
@@ -205,7 +210,7 @@ export default {
     
     .right-menu-image {
       cursor: pointer;
-      padding: 8px 30px;
+      padding: 8px 20px;
       border-left: 1px solid #eee;
       img {
         width: 22px;

Strides-Admin/src/router/AccessRouter.js

@@ -6,8 +6,8 @@ export default {
   children: [
     {
       path: '/access-control',
-      component: () => import('@/views/Reports'),
-      name: 'reports',
+      component: () => import('@/views/access/index'),
+      name: 'access-control',
       meta: {
         title: 'Access Control',
         icon: 'access-control',

Strides-Admin/src/router/NotificationRouter.js

@@ -4,6 +4,7 @@ export default {
   path: '/notification-management',
   redirect: '/notification-management/in-app-notification',
   component: Layout,
+  alwaysShow: true,
   meta: {
     title: 'Notification Management',
     icon: 'notification',

Strides-Admin/src/router/PartnershipRouter.js

@@ -4,6 +4,7 @@ export default {
   path: '/partnership-management',
   component: Layout,
   redirect: '/partnership-management/service-provider-management',
+  alwaysShow: true,
   meta: {
     title: 'Partnership Management',
     icon: 'partnership',

Strides-Admin/src/router/SettingsRouter.js

@@ -4,6 +4,7 @@ export default {
   path: '/system-settings',
   redirect: '/system-settings/mail-settings',
   component: Layout,
+  alwaysShow: true,
   meta: {
     title: 'System Settings',
     icon: 'system-settings',

Strides-Admin/src/router/SiteRouter.js

@@ -8,6 +8,7 @@ export default {
     title: 'Site Management',
     icon: 'site-management',
   },
+  alwaysShow: true,
   children: [
     {
       path: '/site-management/site-configuration',

Strides-Admin/src/store/modules/user.js

@@ -2,6 +2,7 @@ import { login } from '@/api/user'
 import {
   getToken,
   setToken,
+  setEmail,
   removeToken,
   setAuthRoutes,
   removeAuthRoutes,
@@ -39,10 +40,11 @@ const mutations = {
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { username, password, email } = userInfo
     return new Promise((resolve, reject) => {
       login({
-        userName: username.trim(),
+        email,
+        //userName: username.trim(),
         password: password
       }).then(response => {
         const {
@@ -51,10 +53,12 @@ const actions = {
             resources,
             roleName,
             userName,
+            email
           }
         } = response
         commit('SET_TOKEN', token)
         setToken(token)
+        setEmail(email)
         setAuthRoutes(resources)
         setUserName(userName)
         setRoleName(roleName)

Strides-Admin/src/styles/sidebar.scss

@@ -20,6 +20,7 @@
     overflow: hidden;
     box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.05);
     padding: 0px 10px;
+    user-select: none;
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -130,7 +131,21 @@
       }
     }
   }
+  
+  /*侧边栏菜单展开*/
+  .openSidebar {
+    & .el-submenu.is-active:not(.is-opened) > .el-submenu__title::before {
+      left: 6px;
+      width: 6px;
+      height: 6px;
+      content: " ";
+      border-radius: 6px;
+      position: absolute;
+      background-color: $itemActiveBg;
+    }
+  }
 
+  /*侧边栏菜单关闭*/
   .hideSidebar {
     .sidebar-container {
       width: 56px !important;

Strides-Admin/src/utils/auth.js

@@ -6,6 +6,7 @@ const TokenKey = settings.projectName + '-TOKEN'
 const AuthRoutesKey = settings.projectName + '-ApacheResource'
 const RoleName = settings.projectName + '-Player'
 const UserName = settings.projectName + '-Gamer'
+const EmailName = settings.projectName + '-MailBox'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -54,3 +55,11 @@ export function setUserName(name) {
 export function getUserName() {
   return Base64.decode(localStorage.getItem(UserName))
 }
+
+export function setEmail(email) {
+  localStorage.setItem(EmailName, Base64.encode(email))
+}
+
+export function getEmail() {
+  return Base64.decode(localStorage.getItem(EmailName))
+}

Strides-Admin/src/views/access/DialogDetail.vue

@@ -0,0 +1,403 @@
+<template>
+  <el-dialog
+    class="dialog-access"
+    :visible="visible"
+    :before-close="e => hideDialog()"
+    :title="isEdit ? 'Update User' : 'Add User'">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-position="top"
+      v-loading="initial">
+      <div class="form-row">
+        <el-form-item
+          prop="userName"
+          class="form-item"
+          label="NAME:">
+          <el-input
+            v-model="form.userName"
+            class="flex-item"
+            maxlength="20"/>
+        </el-form-item>
+        <el-form-item
+          prop="phone"
+          class="form-item"
+          label="CONTACT NO.:">
+          <div class="flexc flex-item">
+            <el-select
+              style="min-width: 70px; max-width: 78px;margin-right: 10px;"
+              v-model="form.callingCode">
+              <el-option
+                v-for="item in callingOptions"
+                :key="item.callingCode"
+                :label="'+' + item.callingCode"
+                :value="item.callingCode"
+              />
+            </el-select>
+            <el-input
+              v-model="form.phone"
+              class="flex1"
+              maxlength="12"
+            />
+          </div>
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item
+          prop="email"
+          class="form-item"
+          label="EMAIL:">
+          <el-input
+            v-model="form.email"
+            class="flex-item"
+            maxlength="50"/>
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          label="SET PASSWORD:"
+          v-if="isEdit">
+          <el-input
+            v-model="form.password"
+            class="flex-item"
+            type="password"
+            maxlength="16"/>
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          label="SET PASSWORD:"
+          prop="password"
+          v-else>
+          <el-input
+            v-model="form.password"
+            class="flex-item"
+            type="password"
+            maxlength="16"/>
+        </el-form-item>
+      </div>
+      <div class="form-row">
+        <el-form-item
+          class="form-item"
+          label="ROLE:">
+          <el-select
+            v-model="form.roleName"
+            class="flex-item">
+            <el-option
+              v-for="(item, index) in roleOptions"
+              :key="index"
+              :label="item.roleDesc"
+              :value="item.roleName"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          label="PROVIDER NAME:"
+          prop="providerPk"
+          v-if="form.roleName=='PROVIDER'">
+          <el-select
+            v-model="form.providerPk"
+            class="flex-item">
+            <el-option
+              v-for="(item, index) in providerOptions"
+              :key="index"
+              :label="item.providerName"
+              :value="item.providerPk"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          label="GROUP NAME:"
+          prop="groupPk"
+          v-if="form.roleName=='GROUP'">
+          <el-select
+            v-model="form.groupPk"
+            class="flex-item">
+            <el-option
+              v-for="(item, index) in groupOptions"
+              :key="index"
+              :label="item.groupName"
+              :value="item.groupPk"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          label="SITE ALLOCATION:"
+          prop="sitePks"
+          v-if="form.roleName=='SITE'">
+          <el-select
+            v-model="form.sitePks"
+            class="flex-item"
+            filterable
+            multiple
+            placeholder="Select with search">
+            <el-option
+              v-for="(item, index) in siteOptions"
+              :key="index"
+              :label="item.siteName"
+              :value="item.sitePk"/>
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="flexcc" style="margin-top: 10px;">
+        <el-button
+          class="button"
+          type="primary"
+          :loading="loading"
+          @click="onFormSave">
+          <span style="padding: 0 20px;">SAVE</span>
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import api from '@/http/api/access'
+import site from '@/http/api/site'
+import group from '@/http/api/group'
+import provider from '@/http/api/provider'
+import settings from '../../settings.js'
+import {getCountryList} from '../../utils/index.js'
+export default {
+  name: "",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: String|Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      initial: false,
+      loading: false,
+      form: {
+        userPk: undefined,
+        userName: "",
+        email: "",
+        phone: "",
+        roleName: "",
+        lastLogin: "",
+        password: "",
+        callingCode: settings.defaultCalling,
+        providerPk: "",
+        groupPk: "",
+        sitePks: []
+      },
+      rules: {
+        userName: {
+          required: true,
+          message: "Username is required",
+          trigger: "blur"
+        },
+        phone: [{
+          required: true,
+          message: "Contact No. is required",
+          trigger: "blur"
+        }, {
+          pattern: /^\d{6,}$/,
+          trigger: 'blur',
+          message: 'Please type a correct phone'
+        }],
+        email: [{
+          message: "Email is required",
+          trigger: "blur",
+          required: true,
+        },{
+          pattern: /^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/,
+          trigger: 'blur',
+          message: 'Please type a correct email'
+        }],
+        password: {
+          required: true,
+          message: "Passwrod is required",
+          trigger: "blur"
+        },
+        providerPk: {
+          required: true,
+          message: "Provider is required",
+          trigger: "change"
+        },
+        groupPk: {
+          required: true,
+          message: "Group is required",
+          trigger: "change"
+        },
+        sitePks: {
+          required: true,
+          message: "Please select at least one site",
+          trigger: "change"
+        }
+      },
+      siteOptions: [],
+      roleOptions: [],
+      groupOptions: [],
+      callingOptions: [],
+      providerOptions: []
+    };
+  },
+  watch: {
+    id(n, o) {
+      if (this.visible && n) {
+        this.$nextTick(() => {
+          this.getUserInfo();
+        })
+      }
+    },
+    isEdit(n, o) {
+      this.init();
+    }
+  },
+  mounted() {
+    this.getOptions();
+  },
+  methods: {
+    hideDialog(success) {
+      this.$emit("hide", success || false);
+    },
+    init() {
+      this.form = {
+        userPk: undefined,
+        userName: "",
+        email: "",
+        phone: "",
+        roleName: this.roleOptions[0].roleName,
+        lastLogin: "",
+        password: "",
+        callingCode: settings.defaultCalling,
+        providerPk: "",
+        groupPk: "",
+        sitePks: []
+      }
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      })
+    },
+    getOptions() {
+      getCountryList(list => {
+        this.callingOptions = list
+      });
+      api.getRoleOptions().then(res => {
+        if (res.data) {
+          this.roleOptions = res.data
+          this.init();
+        }
+      });
+      provider.getAllServiceProvider().then(res => {
+        if (res.data) {
+          this.providerOptions = res.data
+        }
+      });
+      group.getAllUserGroups().then(res => {
+        if (res.data) {
+          this.groupOptions = res.data
+        }
+      });
+      this.getAllSite()
+    },
+    getAllSite(siteKeyword) {
+      site.getAllSiteList({siteName: siteKeyword || ""}).then(res => {
+        if (res.data && res.data.length > 0) {
+          this.siteOptions = res.data
+        } else {
+          this.siteOptions = []
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+        this.siteOptions = []
+      });
+    },
+    getUserInfo() {
+      this.initial = true;
+      api.infoAccessUser(this.id).then(res => {
+        if (res.data) {
+          this.form = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.initial = false;
+      })
+    },
+    onFormSave() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.isEdit ?this.updateUser() : this.addUser();
+        }
+      })
+    },
+    addUser() {
+      this.loading = true;
+      api.addAccessUser(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Add successfully"
+        });
+        this.hideDialog(true);
+      }).catch(err => {
+        this.loading = false;
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      });
+    },
+    updateUser() {
+      this.loading = true;
+      api.updateAccessUser(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Update successfully"
+        });
+        this.hideDialog(true);
+      }).catch(err => {
+        this.loading = false;
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-access >>> .el-dialog {
+  width: 100%;
+  max-width: 600px;
+}
+.dialog-access >>> .el-form {
+  padding-right: 10px;
+}
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 0 10px;
+}
+.form-item {
+  flex: 1;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+.form-item >>> label {
+  padding: 0;
+}
+.flex-item {
+  min-width: 200px;
+  max-width: 270px;
+}
+</style>

Strides-Admin/src/views/access/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-view">
+        <div class="flex1" style="min-width: 300px; max-width: 350px;">
+          <el-input
+            v-model="params.pageVo.criteria"
+            placeholder="Search by Name, Email, Contact"
+            @keyup.enter.native="getTableData" />
+        </div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          @click="getTableData">
+          Search
+        </el-button>
+        <div class="filter-flex-button">
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            @click="addUser">
+            Add
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <el-table
+      v-loading="table.loading"
+      :data="table.list"
+      style="width: 100%;min-height: 58vh;">
+      <el-table-column
+        label="Name"
+        align="center">
+          <template slot-scope="{row}">
+            <span>{{ row.userName }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column
+        label="Email Address"
+        align="center"
+        prop="email"/>
+      <el-table-column
+        label="Contact Number"
+        align="center"
+        prop="contactNumber"/>
+      <el-table-column
+        label="Role"
+        align="center"
+        prop="roleName"/>
+      <el-table-column
+        label="Last Login"
+        align="center"
+        prop="lastLogin"/>
+      <el-table-column
+        label="Action"
+        align="center"
+        width="200">
+        <template slot-scope="{row}">
+          <TableAction
+            @edit="updateUser(row)"
+            @delete="deleteUser(row)"/>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="right">
+      <pagination
+        v-show="table.total > 0"
+        :total="table.total"
+        :page.sync="params.pageNo"
+        :limit.sync="params.pageSize"
+        @pagination="getTableData" />
+    </div>
+    <DialogDetail
+      v-bind="dialogAction"
+      @hide="hideDialog"/>
+  </div>
+</template>
+
+<script>
+import api from '@/http/api/access'
+import Pagination from '@/components/Pagination'
+import TableAction from '@/components/TableAction'
+import DialogDetail from './DialogDetail'
+export default {
+  data() {
+    return {
+      params: {
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          criteria: ""
+        }
+      },
+      table: {
+        loading: false,
+        list: [],
+        total: 0
+      },
+      dialogAction: {
+        isEdit: false,
+        visible: false
+      }
+    }
+  },
+  components: { Pagination,TableAction,DialogDetail },
+  created() {
+    this.getTableData()
+  },
+  methods: {
+    getTableData() {
+      this.table.loading = true;
+      api.getAccessPages(this.params).then(res => {
+        if (res.data) {
+          this.table.list = res.data
+          this.table.total = res.total
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.table.loading = false
+      })
+    },
+    hideDialog() {
+      this.dialogAction.visible = false;
+      this.getTableData();
+    },
+    addUser() {
+      this.dialogAction.id = "";
+      this.dialogAction.isEdit = false;
+      this.dialogAction.visible = true;
+    },
+    updateUser(row) {
+      this.dialogAction.id = row.userPk;
+      this.dialogAction.isEdit = true;
+      this.dialogAction.visible = true;
+    },
+    deleteUser(row) {
+      
+    }
+  }
+}
+</script>
+
+<style>
+</style>

Strides-Admin/src/views/login/login.vue

@@ -15,23 +15,23 @@
         <p class="title">CSMS LOGIN</p>
       </div>
 
-      <el-form-item prop="username">
+      <el-form-item prop="email">
         <div class="form-login-input">
           <span class="svg-container">
-            <svg-icon icon-class="user" />
+            <svg-icon icon-class="email" />
           </span>
           <el-input
             ref="username"
-            v-model="loginForm.username"
-            name="username"
+            v-model="loginForm.email"
+            name="email"
             type="text"
             tabindex="1"
             autocomplete="on"
             clearable
             maxlength="50"
-            @focus="() => focusFiled.username = true"
-            @blur="() => focusFiled.username = false"/>
-          <label :class='isNameValid ? "focus" : ""'>Username</label>
+            @focus="() => focusFiled.email = true"
+            @blur="() => focusFiled.email = false"/>
+          <label :class='isNameValid ? "focus" : ""'>Email</label>
         </div>
       </el-form-item>
       <el-form-item prop="password">
@@ -72,11 +72,10 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
 import VueRouter from 'vue-router'
 import { Message } from 'element-ui'
 import settings from '../../settings.js'
-import {getUserName} from '../../utils/auth.js'
+import {getEmail} from '../../utils/auth.js'
 import particles from 'particles.js'
 import animateJson from './animate.json'
 const { isNavigationFailure, NavigationFailureType } = VueRouter
@@ -96,14 +95,18 @@ export default {
       appName: settings.title,
       company: settings.company,
       loginForm: {
-        username: '',
+        email: '',
         password: ''
       },
       loginRules: {
-        username: [{
+        email: [{
           required: true,
           trigger: 'blur',
-          message: "Please type username"
+          message: "Please type email"
+        }, {
+          pattern: /^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/,
+          trigger: 'blur',
+          message: 'Please type a correct email'
         }],
         password: [{
           required: true,
@@ -117,7 +120,7 @@ export default {
       redirect: undefined,
       otherQuery: {},
       focusFiled: {
-        username: false,
+        email: false,
         password: false
       }
     }
@@ -144,7 +147,7 @@ export default {
       }
     },
     isNameValid() {
-      return (this.loginForm.username !== "" || this.focusFiled.username)
+      return (this.loginForm.email !== "" || this.focusFiled.email)
     },
     isPsdValid() {
       return (this.loginForm.password !== "" || this.focusFiled.password)
@@ -152,22 +155,21 @@ export default {
   },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
-    const user = getUserName()
+    const user = getEmail()
     if (user) {
-      this.loginForm.username = user;
+      this.loginForm.email = user;
     }
-    console.log(animateJson);
+    //console.log(animateJson);
     //
   },
   beforeMount() {
     this.$nextTick(() => {
-      const sss = document.getElementById("particles-js");
-      console.log(sss);
+      //const sss = document.getElementById("particles-js");
       particlesJS('particles-js', animateJson);
     })
   },
   mounted() {
-    if (this.loginForm.username === '') {
+    if (this.loginForm.email === '') {
       this.$refs.username.focus()
     } else if (this.loginForm.password === '') {
       this.$refs.password.focus()

Strides-Admin/src/views/user/TopUp.vue

@@ -67,7 +67,7 @@ export default {
           trigger: 'blur',
           message: 'Please type amount',
         }, {
-          pattern: /^[1-9]+\d*.?\d*$/,
+          pattern: /^[1-9]+\d*\.?\d*$/,
           trigger: 'blur',
           message: 'Please type a correct number'
         }]