From 13948e28a8c560eaa9c1a01a811ac068e3734466 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Mon, 29 Aug 2022 11:26:09 +0800
Subject: [PATCH] feat: add my security logs

---
 .../header/components/user-dropdown/index.vue |  14 +-
 apps/vue/src/locales/lang/en/routes/basic.ts  |   3 +-
 .../src/locales/lang/zh-CN/routes/basic.ts    |   3 +-
 .../src/views/account/security-logs/index.vue | 125 ++++++++++++++++++
 .../src/views/account/setting/useProfile.ts   |  17 +--
 5 files changed, 148 insertions(+), 14 deletions(-)
 create mode 100644 apps/vue/src/views/account/security-logs/index.vue

diff --git a/apps/vue/src/layouts/default/header/components/user-dropdown/index.vue b/apps/vue/src/layouts/default/header/components/user-dropdown/index.vue
index 534b05ec5..352d74c33 100644
--- a/apps/vue/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/apps/vue/src/layouts/default/header/components/user-dropdown/index.vue
@@ -21,6 +21,11 @@
           :text="t('AbpAccount.PersonalSettings')"
           icon="ant-design:setting-outlined"
         />
+        <MenuItem
+          key="security-logs"
+          :text="t('AbpAuditLogging.SecurityLog')"
+          icon="ant-design:security-scan-outlined"
+        />
         <MenuDivider />
         <MenuItem
           v-if="getUseLockPage"
@@ -37,6 +42,7 @@
     </template>
   </Dropdown>
   <LockAction @register="register" />
+  <SecurityLogsModal @register="registerSecurityLogsModal" />
 </template>
 <script lang="ts">
   // components
@@ -61,7 +67,7 @@
 
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-  type MenuEvent = 'logout' | 'doc' | 'lock' | 'setting' | 'center';
+  type MenuEvent = 'logout' | 'doc' | 'lock' | 'setting' | 'center' | 'security-logs';
 
   export default defineComponent({
     name: 'UserDropdown',
@@ -71,6 +77,7 @@
       MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
       MenuDivider: Menu.Divider,
       LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
+      SecurityLogsModal: createAsyncComponent(() => import('/@/views/account/security-logs/index.vue')),
     },
     props: {
       theme: propTypes.oneOf(['dark', 'light']),
@@ -98,6 +105,7 @@
       });
 
       const [register, { openModal }] = useModal();
+      const [registerSecurityLogsModal, { openModal: openSecurityLogsModal }] = useModal();
 
       function handleLock() {
         openModal(true);
@@ -130,6 +138,9 @@
           case 'center':
             go('/account/center');
             break;
+          case 'security-logs':
+            openSecurityLogsModal(true, {});
+            break;
         }
       }
 
@@ -141,6 +152,7 @@
         getShowDoc,
         register,
         getUseLockPage,
+        registerSecurityLogsModal,
       };
     },
   });
diff --git a/apps/vue/src/locales/lang/en/routes/basic.ts b/apps/vue/src/locales/lang/en/routes/basic.ts
index 693e2394c..dd18a71ea 100644
--- a/apps/vue/src/locales/lang/en/routes/basic.ts
+++ b/apps/vue/src/locales/lang/en/routes/basic.ts
@@ -2,5 +2,6 @@ export default {
   login: 'Login',
   errorLogList: 'Error Log',
   accountSetting: 'Account Setting',
-  accountCenter: 'Account Center'
+  accountCenter: 'Account Center',
+  accountSecurityLogs: 'Security Logs'
 };
diff --git a/apps/vue/src/locales/lang/zh-CN/routes/basic.ts b/apps/vue/src/locales/lang/zh-CN/routes/basic.ts
index 85357ee33..f0e884a6f 100644
--- a/apps/vue/src/locales/lang/zh-CN/routes/basic.ts
+++ b/apps/vue/src/locales/lang/zh-CN/routes/basic.ts
@@ -2,5 +2,6 @@ export default {
   login: '登录',
   errorLogList: '错误日志列表',
   accountSetting: '个人设置',
-  accountCenter: '个人中心'
+  accountCenter: '个人中心',
+  accountSecurityLogs: '安全日志'
 };
diff --git a/apps/vue/src/views/account/security-logs/index.vue b/apps/vue/src/views/account/security-logs/index.vue
new file mode 100644
index 000000000..813f43ea9
--- /dev/null
+++ b/apps/vue/src/views/account/security-logs/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :width="800"
+    :height="500"
+    :title="L('SecurityLog')"
+    :mask-closable="false"
+    :can-fullscreen="false"
+    :show-ok-btn="false"
+  >
+    <Card style="height: 100%">
+      <div :style="getContentStyle" ref="contentWrapRef">
+        <ScrollContainer ref="contentScrollRef">
+          <template v-for="securityLog in securityLogs" :key="securityLog.id">
+            <CardGrid>
+              <Form layout="horizontal" :colon="false" :model="securityLog" :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
+                <FormItem labelAlign="left" :label="L('ApplicationName')">
+                  <span>{{ securityLog.applicationName }}</span>
+                </FormItem>
+                <FormItem labelAlign="left" :label="L('Identity')">
+                  <span>{{ securityLog.identity }}</span>
+                </FormItem>
+                <FormItem labelAlign="left" :label="L('Actions')">
+                  <span>{{ securityLog.action }}</span>
+                </FormItem>
+                <FormItem labelAlign="left" :label="L('ClientId')">
+                  <span>{{ securityLog.clientId }}</span>
+                </FormItem>
+                <FormItem labelAlign="left" :label="L('ClientIpAddress')">
+                  <span>{{ securityLog.clientIpAddress }}</span>
+                </FormItem>
+                <FormItem labelAlign="left" :label="L('BrowserInfo')">
+                  <span>{{ securityLog.browserInfo }}</span>
+                </FormItem>
+                <FormItem labelAlign="left" :label="L('CreationTime')">
+                  <span>{{ securityLog.creationTime }}</span>
+                </FormItem>
+              </Form>
+            </CardGrid>
+          </template>
+        </ScrollContainer>
+      </div>
+    </Card>
+    <template #footer>
+      <APagination
+        ref="paginationRef"
+        :pageSizeOptions="['10', '25', '50', '100']"
+        :total="securityLogTotal"
+        @change="fetchSecurityLogs"
+        @showSizeChange="fetchSecurityLogs"
+      />
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import type { CSSProperties } from 'vue';
+  import { computed, ref } from 'vue';
+  import { Card, Form, Pagination } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ScrollContainer } from '/@/components/Container';
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
+  import { useContentHeight } from '/@/hooks/web/useContentHeight';
+  import { useUserStoreWithOut } from '/@/store/modules/user';
+  import { getList } from '/@/api/identity/securityLog';
+  import { SecurityLog } from '/@/api/identity/model/securityLogModel';
+  import { formatPagedRequest } from '/@/utils/http/abp/helper';
+
+  const CardGrid = Card.Grid;
+  const FormItem = Form.Item;
+  const APagination = Pagination;
+
+  const props = defineProps({
+    autoContentHeight: {
+      type: Boolean,
+      default: true,
+    }
+  });
+
+  const contentWrapRef = ref<any>();
+  const contentScrollRef = ref<any>();
+  const paginationRef = ref<any>();
+  const getContentHeight = computed(() => props.autoContentHeight);
+  const { contentHeight } = useContentHeight(
+    getContentHeight, contentWrapRef, [paginationRef], []
+  );
+  const getContentStyle = computed((): CSSProperties => {
+    return {
+      width: '100%',
+      height: `${contentHeight.value}px`,
+    };
+  });
+  const securityLogs = ref<SecurityLog[]>([]);
+  const securityLogTotal = ref(0);
+  const { L } = useLocalization(['AbpAuditLogging', 'AbpIdentity']);
+  const userStore = useUserStoreWithOut();
+  const [registerModal] = useModalInner(() => {
+    console.log('fetchSecurityLogs');
+    fetchSecurityLogs();
+  });
+
+  function fetchSecurityLogs(page: number = 1, pageSize: number = 10) {
+    const request = {
+      skipCount: page,
+      maxResultCount: pageSize,
+    };
+    formatPagedRequest(request);
+    getList({
+      skipCount: request.skipCount,
+      maxResultCount: request.maxResultCount,
+      sorting: 'creationTime DESC',
+      userId: userStore.getUserInfo.userId,
+    }).then((res) => {
+      securityLogs.value = res.items;
+      securityLogTotal.value = res.totalCount;
+    });
+  }
+</script>
+
+<style lang="less" scoped>
+  .ant-card-grid {
+    width: 100%;
+  }
+</style>
diff --git a/apps/vue/src/views/account/setting/useProfile.ts b/apps/vue/src/views/account/setting/useProfile.ts
index fe7c6d3ea..f2e7b3695 100644
--- a/apps/vue/src/views/account/setting/useProfile.ts
+++ b/apps/vue/src/views/account/setting/useProfile.ts
@@ -1,12 +1,12 @@
 import { computed } from 'vue';
 import { FormSchema } from '/@/components/Form/index';
-import { useAbpStoreWithOut } from '/@/store/modules/abp';
 import { useSettings } from '/@/hooks/abp/useSettings';
 import { useLocalization } from '/@/hooks/abp/useLocalization';
 import { getTwoFactorEnabled } from '/@/api/account/profiles';
 import { getAssignableNotifiers } from '/@/api/messages/notifications';
 import { getAll as getMySubscribes } from '/@/api/messages/subscribes';
 import { MyProfile } from '/@/api/account/model/profilesModel';
+import { getUserInfo } from '/@/api/sys/user';
 
 export interface ListItem {
   key: string;
@@ -40,11 +40,6 @@ export function useProfile({ profile }: UseProfile) {
     }
     return profile.isExternal;
   });
-  const getCurrentUser = computed(() => {
-    const abpStore = useAbpStoreWithOut();
-    const { currentUser } = abpStore.getApplication;
-    return currentUser;
-  });
   // tab的list
   function getSettingList() {
     return [
@@ -130,11 +125,11 @@ export function useProfile({ profile }: UseProfile) {
 
   // 安全设置 list
   async function getSecureSettingList() {
-    const currentUser = getCurrentUser.value;
-    const phoneNumber = currentUser.phoneNumber ?? '';
-    const phoneNumberConfirmed = currentUser.phoneNumberVerified;
-    const email = currentUser.email ?? '';
-    const emailVerified = currentUser.emailVerified;
+    const currentUserInfo = await getUserInfo();
+    const phoneNumber = currentUserInfo['phone_number'] ?? '';
+    const phoneNumberConfirmed = currentUserInfo['phone_number_verified'] === 'True';
+    const email = currentUserInfo['email'] ?? '';
+    const emailVerified = currentUserInfo['email_verified'] === 'True';
     const twoFactorEnabled = await getTwoFactorEnabled();
     return [
       {