// Copyright 2023 The Casdoor Authors. All Rights Reserved. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. import React from "react"; import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons"; import {Button, Col, Input, Row, Select, Table, Tooltip} from "antd"; import * as Setting from "../Setting"; import i18next from "i18next"; const {Option} = Select; class SigninMethodTable extends React.Component { constructor(props) { super(props); this.state = { classes: props, }; } updateTable(table) { this.props.onUpdateTable(table); } updateField(table, index, key, value) { table[index][key] = value; this.updateTable(table); } addRow(table) { const row = { name: Setting.getNewRowNameForTable(table, "Please select a signin method"), displayName: "", rule: "None", }; if (table === undefined) { table = []; } table = Setting.addRow(table, row); this.updateTable(table); } deleteRow(items, table, i) { table = Setting.deleteRow(table, i); this.updateTable(table); } upRow(table, i) { table = Setting.swapRow(table, i - 1, i); this.updateTable(table); } downRow(table, i) { table = Setting.swapRow(table, i, i + 1); this.updateTable(table); } renderTable(table) { const items = [ {name: "Password", displayName: i18next.t("general:Password")}, {name: "Verification code", displayName: i18next.t("login:Verification code")}, {name: "WebAuthn", displayName: i18next.t("login:WebAuthn")}, {name: "LDAP", displayName: i18next.t("login:LDAP")}, {name: "Face ID", displayName: i18next.t("login:Face ID")}, ]; const columns = [ { title: i18next.t("general:Name"), dataIndex: "name", key: "name", render: (text, record, index) => { const getItemDisplayName = (text) => { const item = items.filter(item => item.name === text); if (item.length === 0) { return ""; } return item[0].displayName; }; return ( ); }, }, { title: i18next.t("general:Display name"), dataIndex: "displayName", key: "displayName", width: "300px", render: (text, record, index) => { return ( { this.updateField(table, index, "displayName", e.target.value); }} /> ); }, }, { title: i18next.t("application:Rule"), dataIndex: "rule", key: "rule", width: "155px", render: (text, record, index) => { let options = []; if (record.name === "Verification code") { options = [ {id: "All", name: i18next.t("general:All")}, {id: "Email only", name: i18next.t("general:Email only")}, {id: "Phone only", name: i18next.t("general:Phone only")}, ]; } else if (record.name === "Password") { options = [ {id: "All", name: i18next.t("general:All")}, {id: "Non-LDAP", name: i18next.t("general:Non-LDAP")}, {id: "Hide-Password", name: i18next.t("general:Hide-Password")}, ]; } if (options.length === 0) { return null; } return (