bmcui/src/views/configuration/LDAP.vue

<template>
    <div class="active-directory">
        <div class="configuration-title">LDAP/E-Directory Settings</div>
        <div  class="configuration-btn-right">
            <Button type="primary" @click="modalSettings = true">Advanced Settings</Button>
        </div>
        <div class="configuration-text">The list below shows the current list of configured Role Groups. If you would like to delete or modify a role group, select the name in the list and click Delete Role Group or Modify Role Group. To add a new Role Group, select an unconfigured slot and click Add Role Group.</div>
        <div class="configuration-table">
            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
        </div>
        <div class="configuration-btn-right">
            <Button type="primary" style="margin-right: 10px;">Add Role Group</Button>
            <Button type="primary" style="margin-right: 10px;">Modify Role Group</Button>
            <Button type="primary">Delete Role Group</Button>
        </div>
        <Modal
                v-model="modalSettings"
                title="Advanced Settings"
                width="660"
                :loading="loading"
                @on-ok="save"
                @on-cancel="cancel">
            <Form :model="formSettings" label-position="left" :label-width="260">
                <FormItem label="LDAP/E-Directory Authentication">
                    <Checkbox v-model="formSettings.authentication">Enable</Checkbox>
                </FormItem>
                <FormItem label="Server Address">
                    <Input v-model="formSettings.address" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Port">
                    <Input v-model="formSettings.port" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Bind DN">
                    <Input v-model="formSettings.bindDn" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Password">
                    <Input v-model="formSettings.password" style="width: 300px;"/>
                </FormItem>
                <FormItem label="Search Base">
                    <Input v-model="formSettings.searchBase" style="width: 300px;"/>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "LDAP",
        data () {
            return {
                columnsDirectory: [
                    {
                        "title": "Role Group ID",
                        "key": "ID",
                        "sortable": true
                    },
                    {
                        "title": "Group Name",
                        "key": "Name",
                        "sortable": true
                    },
                    {
                        "title": "Group Search Base",
                        "key": "Base",
                        "sortable": true
                    },
                    {
                        "title": "Group Privilege",
                        "key": "Privilege",
                        "sortable": true
                    }
                ],
                dataDirectory: [
                    {
                        ID: 1,
                        Name: 'Group Name',
                        Base: 'Group Search Base',
                        Privilege: 'Group Privilege'
                    },
                    {
                        ID: 2,
                        Name: 'Group Name',
                        Base: 'Group Search Base',
                        Privilege: 'Group Privilege'
                    }
                ],
                modalSettings: false,
                loading: true,
                formSettings: {
                    authentication: true,
                    address: '',
                    password:  '',
                    port: '',
                    bindDn: '',
                    searchBase: '',
                }
            }
        },
        methods: {
            save() {
                setTimeout(() => {
                    this.modalSettings = false;
                }, 2000);
            },
            cancel() {

            }
        }
    }
</script>

<style scoped>

</style>