[admin] add setting backup

admin/src/views/user/detail.vue

@@ -19,8 +19,8 @@
                     <td></td>
                     <td colspan="7">
                         <div class="other-actions">
-                            <el-button type="primary" size="mini">Reset password</el-button>
-                            <el-button type="primary" size="mini">PM</el-button>
+                            <el-button type="primary" size="mini" @click="handleGetModComment">Mod comment</el-button>
+                            <el-button type="primary" size="mini" @click="handleResetPassword">Reset password</el-button>
                             <el-button type="primary" size="mini" @click="handleAssignExam">Assign exam</el-button>
                         </div>
                     </td>
@@ -30,6 +30,25 @@
                     <td>{{baseInfo.email}}</td>
                     <td><el-button size="mini">Change</el-button></td>
                 </tr>
+                <tr>
+                    <td>Enabled</td>
+                    <td>{{baseInfo.enabled}}</td>
+                    <td>
+                        <template v-if="baseInfo.enabled && baseInfo.enabled == 'yes'">
+                            <el-button size="mini" @click="handleDisableUser">Disable</el-button>
+                        </template>
+                        <template v-if="baseInfo.enabled && baseInfo.enabled == 'no'">
+                            <el-popconfirm
+                                title="Confirm Enable ?"
+                                @confirm="handleEnableUser"
+                            >
+                                <template #reference>
+                                    <el-button size="mini">Enable</el-button>
+                                </template>
+                            </el-popconfirm>
+                        </template>
+                    </td>
+                </tr>
                 <tr>
                     <td>Added</td>
                     <td>{{baseInfo.added}}</td>
@@ -38,6 +57,11 @@
                     <td>Class</td>
                     <td>{{baseInfo.class_text}}</td>
                 </tr>
+                <tr>
+                    <td>Invite by</td>
+                    <td>{{baseInfo.inviter && baseInfo.inviter.username}}</td>
+                    <td><el-button size="mini" @click="handleViewInviteInfo">View</el-button></td>
+                </tr>
                 <tr>
                     <td>Uploaded</td>
                     <td>{{baseInfo.uploaded_text}}</td>
@@ -113,6 +137,11 @@
         </el-card>
     </div>
     <DialogAssignExam ref="assignExam" :reload="fetchPageData"/>
+    <DialogViewInviteInfo ref="viewInviteInfo" />
+    <DialogDisableUser ref="disableUser" :reload="fetchPageData" />
+    <DialogModComment ref="modComment" />
+    <DialogModComment ref="modComment" />
+    <DialogResetPassword ref="resetPassword" />
 </template>
 
 <script>
@@ -121,17 +150,25 @@ import { ElMessage } from 'element-plus'
 import {useRoute, useRouter} from 'vue-router'
 import api from '../../utils/api'
 import DialogAssignExam from './dialog-assign-exam.vue'
+import DialogViewInviteInfo from './dialog-invite-info.vue'
+import DialogDisableUser from './dialog-disable-user.vue'
+import DialogModComment from './dialog-mod-comment.vue'
+import DialogResetPassword from './dialog-reset-password.vue'
 
 export default {
     name: "UserDetail",
     components: {
-        DialogAssignExam
+        DialogAssignExam, DialogViewInviteInfo, DialogDisableUser, DialogModComment, DialogResetPassword
     },
     setup() {
         const route = useRoute()
         const router = useRouter()
         const { id } = route.query
         const assignExam = ref(null)
+        const viewInviteInfo = ref(null)
+        const disableUser = ref(null)
+        const modComment = ref(null)
+        const resetPassword = ref(null)
         const state = reactive({
             loading: false,
             baseInfo: {},
@@ -152,15 +189,43 @@ export default {
             ElMessage.success(res.msg)
             await fetchPageData()
         }
+
         const handleAssignExam = async () => {
             assignExam.value.open(id)
         }
+        const handleViewInviteInfo = async () => {
+            viewInviteInfo.value.open(id)
+        }
+        const handleDisableUser = async () => {
+            disableUser.value.open(id)
+        }
+        const handleEnableUser = async () => {
+            let res = await api.enableUser({uid: id})
+            ElMessage.success(res.msg)
+            await fetchPageData()
+        }
+        const handleGetModComment = async () => {
+            modComment.value.open(id)
+        }
+        const handleResetPassword = async () => {
+            resetPassword.value.open(id)
+        }
         return {
             ...toRefs(state),
             handleRemoveExam,
             handleAssignExam,
+            handleEnableUser,
+            handleViewInviteInfo,
+            handleDisableUser,
+            handleGetModComment,
+            handleResetPassword,
+            fetchPageData,
             assignExam,
-            fetchPageData
+            viewInviteInfo,
+            disableUser,
+            modComment,
+            resetPassword,
+
         }
     }
 }

admin/src/views/user/dialog-disable-user.vue

@@ -0,0 +1,77 @@
+<template>
+    <el-dialog
+        title="Disable user"
+        v-model="visible"
+        center
+        :close-on-click-modal="false"
+    >
+        <el-form
+            :model="formData"
+            label-width="100px"
+            v-loading="loading"
+            ref="formRef"
+            :rules="rules">
+            <el-form-item label="Reason" prop="reason">
+                <el-input type="textarea" v-model="formData.reason"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+                <span class="dialog-footer">
+                  <el-button @click="visible = false">Cancel</el-button>
+                  <el-button type="primary" @click="handleSubmit">Save</el-button>
+                </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import {useRoute, useRouter} from 'vue-router'
+import api from '../../utils/api'
+
+export default {
+    name: "DialogDisableUser",
+    props: {
+        reload: Function
+    },
+    setup(props, context) {
+        const formRef = ref(null)
+        const state = reactive({
+            loading: false,
+            visible: false,
+            formData: {
+                uid: 0,
+                reason: '',
+            },
+            rules: {
+                reason: [{ required: 'true'}]
+            }
+        })
+        const open = (uid) => {
+            state.formData.uid = uid
+            state.visible = true
+
+        }
+        const handleSubmit = () => {
+            formRef.value.validate(async (valid) => {
+                if (valid) {
+                    let res = await api.disableUser(state.formData)
+                    state.visible = false
+                    ElMessage.success(res.msg)
+                    if (props.reload) {
+                        props.reload()
+                    }
+                }
+            })
+        }
+        return {
+            ...toRefs(state),
+            handleSubmit,
+            formRef,
+            open,
+
+        }
+    }
+}
+</script>

admin/src/views/user/dialog-invite-info.vue

@@ -0,0 +1,63 @@
+<template>
+    <el-dialog
+        title="Invite info"
+        v-model="visible"
+        center
+        width="60%"
+        :close-on-click-modal="false"
+    >
+        <el-table :data="inviteInfo" v-loading="loading">
+            <el-table-column prop="id" label="ID" width="55"></el-table-column>
+            <el-table-column prop="inviter_user.username" label="Inviter"></el-table-column>
+            <el-table-column prop="invitee" label="Receive email"></el-table-column>
+            <el-table-column prop="hash" label="Hash"></el-table-column>
+            <el-table-column prop="valid_text" label="Hash valid" width="100"></el-table-column>
+            <el-table-column prop="invitee_register_email" label="Register email"></el-table-column>
+            <el-table-column prop="time_invited" label="Time invited"></el-table-column>
+        </el-table>
+
+    </el-dialog>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import {useRoute, useRouter} from 'vue-router'
+import api from '../../utils/api'
+
+export default {
+    name: "DialogInviteInfo",
+    props: {
+        reload: Function
+    },
+    setup(props, context) {
+        const formRef = ref(null)
+        const state = reactive({
+            loading: false,
+            visible: false,
+            uid: 0,
+            inviteInfo: [],
+        })
+        const getInviteInfo = async () => {
+            let res = await api.getInviteInfo({uid: state.uid})
+            state.inviteInfo.push(res.data)
+        }
+        const open = (uid) => {
+            state.uid = uid
+            if (state.inviteInfo.length == 0) {
+                state.loading = true
+                getInviteInfo()
+                state.loading = false
+            }
+            state.visible = true
+
+        }
+        return {
+            ...toRefs(state),
+            formRef,
+            open,
+
+        }
+    }
+}
+</script>

admin/src/views/user/dialog-mod-comment.vue

@@ -0,0 +1,56 @@
+<template>
+    <el-dialog
+        title="Mod comment"
+        v-model="visible"
+        center
+        width="40%"
+        :close-on-click-modal="false"
+    >
+        <el-card v-loading="loading">
+            <div v-html="modComment" class="pre-line"></div>
+        </el-card>
+    </el-dialog>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import {useRoute, useRouter} from 'vue-router'
+import api from '../../utils/api'
+
+export default {
+    name: "DialogModComment",
+    props: {
+        reload: Function
+    },
+    setup(props, context) {
+        const formRef = ref(null)
+        const state = reactive({
+            loading: false,
+            visible: false,
+            uid: 0,
+            modComment: ''
+        })
+        const getUserModComment = async () => {
+            let res = await api.getUserModComment({uid: state.uid})
+            state.modComment = res.data
+        }
+        const open = (uid) => {
+            state.uid = uid
+            if (!state.modComment) {
+                state.loading = true
+                getUserModComment()
+                state.loading = false
+            }
+            state.visible = true
+
+        }
+        return {
+            ...toRefs(state),
+            formRef,
+            open,
+
+        }
+    }
+}
+</script>

admin/src/views/user/dialog-reset-password.vue

@@ -0,0 +1,83 @@
+<template>
+    <el-dialog
+        title="Reset password"
+        v-model="visible"
+        center
+        :close-on-click-modal="false"
+    >
+        <el-form
+            :model="formData"
+            label-width="200px"
+            v-loading="loading"
+            ref="formRef"
+            :rules="rules">
+            <el-form-item label="Password" prop="password">
+                <el-input v-model="formData.password"></el-input>
+            </el-form-item>
+
+            <el-form-item label="Password confirmation" prop="password_confirmation">
+                <el-input v-model="formData.password_confirmation"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+                <span class="dialog-footer">
+                  <el-button @click="visible = false">Cancel</el-button>
+                  <el-button type="primary" @click="handleSubmit">Save</el-button>
+                </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import {useRoute, useRouter} from 'vue-router'
+import api from '../../utils/api'
+
+export default {
+    name: "DialogResetPassword",
+    props: {
+        reload: Function
+    },
+    setup(props, context) {
+        const formRef = ref(null)
+        const state = reactive({
+            loading: false,
+            visible: false,
+            formData: {
+                uid: 0,
+                password: '',
+                password_confirmation: ''
+            },
+            rules: {
+                password: [{ required: 'true'}],
+                password_confirmation: [{ required: 'true'}],
+            }
+        })
+        const open = (uid) => {
+            state.formData.uid = uid
+            state.visible = true
+
+        }
+        const handleSubmit = () => {
+            formRef.value.validate(async (valid) => {
+                if (valid) {
+                    let res = await api.resetPassword(state.formData)
+                    state.visible = false
+                    ElMessage.success(res.msg)
+                    if (props.reload) {
+                        props.reload()
+                    }
+                }
+            })
+        }
+        return {
+            ...toRefs(state),
+            handleSubmit,
+            formRef,
+            open,
+
+        }
+    }
+}
+</script>