@ant-design/icons#MailOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#MailOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: vertical.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/menu', module).add('vertical', () =>
<Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Iteom 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Submenus open as pop-ups.</p></>) } });
Example #2
| Source File: style-debug.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One Long Long Long Long">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</Menu>
</>
);
}
Example #3
| Source File: sider-current.jsx From virtuoso-design-system with MIT License | 6 votes |
|
Sider = () => {
const [openKeys, setOpenKeys] = React.useState(['sub1']);
const onOpenChange = keys => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
};
return (
<Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 256 }}>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
);
}
Example #4
| Source File: inline.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<Menu
onClick={this.handleClick}
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
);
}
Example #5
| Source File: Nav.jsx From node-project-manager with Apache License 2.0 | 6 votes |
|
Nav = ({ user }) => {
return (
<Menu mode="horizontal" className="navUsers">
<Menu.Item>
<HomeOutlined />
<Link to="/Home">Inicio</Link>
</Menu.Item>
<Menu.Item key="app">
<Link to="/Projects">
<AppstoreOutlined />
Proyectos
</Link>
</Menu.Item>
<Menu.Item>
<Link to="/Tecnologias">
<SettingOutlined />
Tecnologías
</Link>
</Menu.Item>
{user.admin ? (
<Menu.Item>
<UserOutlined />
<Link to="/AdminUser">Usuarios</Link>
</Menu.Item>
) : null}
{user.admin ? (
<Menu.Item>
<MailOutlined />
<Link to="/Informes">Informes</Link>
</Menu.Item>
) : null}
</Menu>
);
}
Example #6
| Source File: horizontal.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
const { current } = this.state;
return (
<Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
<Menu.Item key="mail" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
Navigation Two
</Menu.Item>
<SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
);
}
Example #7
| Source File: menu-full.jsx From virtuoso-design-system with MIT License | 6 votes |
|
menu = (
<Menu selectedKeys={['1']} openKeys={['sub1']}>
<Menu.ItemGroup key="group" title="Item Group">
<Menu.Item key="01">Option 0</Menu.Item>
<Menu.Item key="02">Option 0</Menu.Item>
</Menu.ItemGroup>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
)
Example #8
| Source File: index.jsx From erp-crm with MIT License | 5 votes |
|
export default function HeaderContent() {
const dispatch = useDispatch();
const { SubMenu } = Menu;
const profileDropdown = (
<div className="profileDropdown whiteBox shadow" style={{ minWidth: '200px' }}>
<div className="pad15">
<Avatar size="large" className="last" src={photo} style={{ float: 'left' }} />
<div className="info">
<p className="strong">Salah Eddine Lalami</p>
<p>[email protected]</p>
</div>
</div>
<div className="line"></div>
<div>
<Menu>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</div>
<div className="line"></div>
<div>
<Menu>
<Menu.Item
icon={<LogoutOutlined />}
key={`${uniqueId()}`}
onClick={() => history.push('/logout')}
>
logout
</Menu.Item>
</Menu>
</div>
</div>
);
return (
<div className="headerIcon" style={{ position: 'absolute', right: 0, zIndex: '99' }}>
<Dropdown overlay={profileDropdown} trigger={['click']} placement="bottomRight">
{/* <Badge dot> */}
<Avatar className="last" src={photo} />
{/* </Badge> */}
</Dropdown>
<Avatar icon={<AppstoreOutlined />} />
<Avatar icon={<BellOutlined />} />
</div>
);
}
Example #9
| Source File: theme.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return (
<>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</>
);
}
Example #10
| Source File: switch-mode.jsx From virtuoso-design-system with MIT License | 5 votes |
|
Demo = () => {
const [mode, setMode] = React.useState('inline');
const [theme, setTheme] = React.useState('light');
const changeMode = value => {
setMode(value ? 'vertical' : 'inline');
};
const changeTheme = value => {
setTheme(value ? 'dark' : 'light');
};
return (
<>
<Switch onChange={changeMode} /> Change Mode
<Divider type="vertical" />
<Switch onChange={changeTheme} /> Change Style
<br />
<br />
<Menu
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode={mode}
theme={theme}
>
<Menu.Item key="1" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="2" icon={<CalendarOutlined />}>
Navigation Two
</Menu.Item>
<SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
<SubMenu key="sub1-2" title="Submenu">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
</SubMenu>
<Menu.Item key="link" icon={<LinkOutlined />}>
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Ant Design
</a>
</Menu.Item>
</Menu>
</>
);
}
Example #11
| Source File: inline-collapsed.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return (
<div style={{ width: 256 }}>
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<Menu.Item key="3" icon={<ContainerOutlined />}>
Option 3
</Menu.Item>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</SubMenu>
</Menu>
</div>
);
}
Example #12
| Source File: Settings.js From ctf_platform with MIT License | 5 votes |
|
ChangeEmailForm = (props) => {
const [form] = Form.useForm();
const [loading, setLoading] = React.useState(false);
useEffect(() => {
if (props.email != "") {
form.setFieldsValue({
email: props.email,
password: ""
})
}
}, [props.email])
return (
<Form
form={form}
onFinish={async (values) => {
setLoading(true)
await fetch(window.ipAddress + "/v1/account/change/email", {
method: 'post',
headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
body: JSON.stringify({
"password": values.password,
"email": values.email,
})
}).then((results) => {
return results.json(); //return data in JSON (since its JSON data)
}).then((data) => {
if (data.success === true) {
message.success({ content: "Email changed successfully." })
form.setFieldsValue({
email: values.email,
password: ""
})
}
else if (data.error === "email-taken") {
message.error({ content: "Email is already taken, please try another email." })
}
else if (data.error === "wrong-password") {
message.error({ content: "Password is incorrect. Please try again." })
}
else {
message.error({ content: "Oops. Unknown error." })
}
}).catch((error) => {
console.log(error)
message.error({ content: "Oops. There was an issue connecting with the server" });
})
setLoading(false)
}}
style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "100%", marginBottom: "2vh" }}
>
<h3>Email:</h3>
<Form.Item
name="email"
rules={[{ required: true, message: 'Please input your new email', }, { type: "email", message: "Please enter a valid email" }]}>
<Input allowClear prefix={<MailOutlined />} placeholder="Enter your new email." />
</Form.Item>
<h3>Password:</h3>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password', }]}>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter your password." />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<MailOutlined />} loading={loading}>Change Email</Button>
</Form.Item>
</Form>
);
}
Example #13
| Source File: adminUsers.js From ctf_platform with MIT License | 5 votes |
|
ChangeEmailForm = (props) => {
const [form] = Form.useForm();
return (
<Form
form={form}
onFinish={(values) => {
fetch(window.ipAddress + "/v1/account/adminChangeEmail", {
method: 'post',
headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
body: JSON.stringify({
"username": props.username,
"email": values.email,
})
}).then((results) => {
return results.json(); //return data in JSON (since its JSON data)
}).then((data) => {
if (data.success === true) {
message.success({ content: "Email changed successfully." })
form.resetFields()
props.setState({ emailChangeModal: false })
props.fillTableData()
}
else if (data.error === "email-taken") {
message.error("Email is already in use. Please try another email.")
}
else {
message.error({ content: "Oops. Unknown error." })
}
}).catch((error) => {
console.log(error)
message.error({ content: "Oops. There was an issue connecting with the server" });
})
}}
style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "100%" }}
>
<h3>New Email</h3>
<Form.Item
name="email"
rules={[
{
required: true,
message: 'Please input the new email',
},
{
type: 'email',
message: 'Please enter a valid email'
}
]}
hasFeedback
>
<Input allowClear prefix={<MailOutlined />} placeholder="Enter a new email" />
</Form.Item>
<Form.Item>
<Button style={{ marginRight: "1.5vw" }} onClick={() => { props.setState({ emailChangeModal: false }) }}>Cancel</Button>
<Button type="primary" htmlType="submit" icon={<MailOutlined />}>Change Email</Button>
</Form.Item>
</Form>
);
}
Example #14
| Source File: adminUsers.js From ctf_platform with MIT License | 5 votes |
|
RegisterForm = (props) => {
const [form] = Form.useForm();
return (
<Form
form={form}
name="register_form"
className="register-form"
onFinish={(values) => { props.createAccount(values); form.resetFields() }}
>
<Form.Item
name="username"
rules={[{ required: true, message: 'Please enter a username' }]}
>
<Input allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Enter a new username" />
</Form.Item>
<Form.Item
name="email"
rules={[
{ required: true, message: 'Please enter an email' },
{
type: 'email',
message: "Please enter a valid email",
},]}
>
<Input allowClear prefix={<MailOutlined />} placeholder="Enter a new email" />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
hasFeedback
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter a new password" />
</Form.Item>
<Form.Item
name="confirm"
dependencies={['password']}
hasFeedback
rules={[
{
required: true,
message: 'Please confirm your password!',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('Oops, the 2 passwords do not match');
},
}),
]}
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Confirm new password" />
</Form.Item>
<Form.Item>
<Button style={{ marginRight: "1.5vw" }} onClick={() => { props.setState({ createUserModal: false }) }}>Cancel</Button>
<Button type="primary" htmlType="submit" className="login-form-button" style={{ marginBottom: "1.5vh" }}>Create Account</Button>
</Form.Item>
</Form>
);
}
Example #15
| Source File: admin.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<Tabs activeKey={this.state.key} onTabClick={async (key) => {
await this.props.history.push("/Admin/" + key)
if (this.props.location.pathname === "/Admin/" + key) this.setState({ key: key })
}} style={{ overflowY: "auto", overflowX: "auto" }}>
<TabPane
tab={<span> Home </span>}
key=""
>
<h1>Welcome to Sieberrsec CTF Platform's admin panel.</h1>
<h1>Click on any of the tabs above to manage different parts of the portal.</h1>
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<Button type='primary' onClick={this.downloadBackup} loading={this.state.backupLoading}><DownloadOutlined /> Download Backup</Button>
<p>Download all the data stored in the platform's database. Data can be uploaded onto a different platform/a later date to restore all the data</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<div style={{width: "50%"}}>
<Dragger
fileList={this.state.fileList}
disabled={this.state.loadingUpload}
accept=".json"
maxCount={1}
onChange={(file) => {
if (file.fileList.length > 0) this.setState({ noFile: false })
else this.setState({ noFile: true })
this.setState({ fileList: file.fileList })
}}
beforeUpload={(file) => {
return false
}}>
<h4>Drag and drop backup .json file to upload.</h4><br/>
<p>Then, click the Upload button</p>
</Dragger>
<Button type="primary" icon={<UploadOutlined />} style={{ marginTop: "3ch" }} disabled={this.state.noFile} loading={this.state.loadingUpload} onClick={() => {
confirm({
confirmLoading: this.state.loadingUpload,
title: 'Are you sure you want to restore all platform data to this JSON file? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.uploadBackup(close) },
onCancel: () => { },
});
this.uploadBackup
}}>Upload Backup</Button>
</div>
<p>Restore and upload data stored in a backup json file. <span style={{ color: "#d32029" }}><b>Warning: This <u>WILL OVERRIDE ALL EXISTING DATA</u> stored in this platform</b> (including the current account used to upload the backup). Please re-login after restoration is completed.</span></p>
</Card>
</div>
</TabPane>
<TabPane
tab={<span><NotificationOutlined />Announcements</span>}
key="Announcements"
>
<AdminManageAnnouncements />
</TabPane>
<TabPane
tab={<span><UserOutlined />Users</span>}
key="Users"
>
<AdminUsers></AdminUsers>
</TabPane>
<TabPane
tab={<span><AppstoreOutlined />Challenges</span>}
key="Challenges"
>
<AdminChallenges history={this.props.history} location={this.props.location}></AdminChallenges>
</TabPane>
<TabPane
tab={<span><BarsOutlined />Transactions</span>}
key="Submissions"
>
<AdminSubmissions></AdminSubmissions>
</TabPane>
<TabPane
tab={<span><MailOutlined />Email Settings</span>}
key="Emails"
>
<AdminEmails></AdminEmails>
</TabPane>
</Tabs>
</Layout>
);
}
Example #16
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Horizontal</strong>
</h5>
<div className="mb-5">
<Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="mail">
<MailOutlined />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<AppstoreOutlined />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<SettingOutlined />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
</div>
<h5 className="mb-3">
<strong>Vertical</strong>
</h5>
<div className="mb-5">
<Menu onClick={this.handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu
key="sub1"
title={
<span>
<MailOutlined />
<span>Navigation One</span>
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Iteom 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<AppstoreOutlined />
<span>Navigation Two</span>
</span>
}
>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<SettingOutlined />
<span>Navigation Three</span>
</span>
}
>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</div>
</div>
)
}
Example #17
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
ExtraAppsWordpressPost = () => {
return (
<div>
<Helmet title="Wordpress Post" />
<div className="row">
<div className="col-xl-9 col-lg-12">
<div className="card">
<div className="card-body">
<div className="mb-2">
<a
href="#"
onClick={e => e.preventDefault()}
className="text-dark font-size-24 font-weight-bold"
>
[Feature Request] How to enable custom font that comes from svg #2460
</a>
</div>
<div className="mb-3">
<a className="font-weight-bold" href="#" onClick={e => e.preventDefault()}>
zxs2162
</a>{' '}
wrote this post 12 days ago · 0 comments
</div>
<div className="mb-4">
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umi
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
React-framework
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umijs
</a>
</div>
<div>
<img
className="img-fluid mb-4"
src="resources/images/content/photos/1.jpeg"
alt="Sea"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil laborum est perferendis consectetur corporis esse labore minima
molestias, exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nihil laborum est perferendis consectetur corporis esse labore
minima molestias, exercitationem consequuntur!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur!
</p>
</div>
</div>
</div>
<div className="card">
<div className="card-body">
<h6 className="mb-4 text-uppercase">
<strong>Comments (76)</strong>
</h6>
<General15 />
<a
href="#"
onClick={e => e.preventDefault()}
className="d-block btn btn-light text-primary mt-3"
>
Load More
</a>
</div>
</div>
<div className="card">
<div className="card-body">
<div className="d-flex align-items-center flex-wrap border-bottom mb-3 pb-3">
<div className="kit__utils__avatar kit__utils__avatar--size110 mr-3 mb-3 align-items-center flex-shrink-0">
<img src="resources/images/avatars/5.jpg" alt="Mary Stanform" />
</div>
<div className="mb-3">
<div className="font-weight-bold font-size-16 text-dark mb-2">Trinity Parson</div>
<p className="font-italic">
“I hope you enjoy reading this as much as I enjoyed writing this.”
</p>
<a href="#" className="btn btn-sm btn-primary">
View Profile
</a>
</div>
</div>
<h5 className="text-dark mb-4">Leave a comment</h5>
<Form className="login-form">
<Form.Item name="userName">
<Input
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Your name"
/>
</Form.Item>
<Form.Item name="mail">
<Input
prefix={<MailOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Your email"
/>
</Form.Item>
<Form.Item name="message">
<TextArea rows={3} placeholder="Your message" />
</Form.Item>
<Form.Item>
<Button className="mr-2" type="primary" style={{ width: 200 }}>
<i className="fa fa-send mr-2" />
Send
</Button>
<Upload>
<Button>
<UploadOutlined />
Attach File
</Button>
</Upload>
</Form.Item>
</Form>
</div>
</div>
</div>
<div className="col-xl-3 col-lg-12">
<div className="pb-4 mb-3 border-bottom">
<label className="font-weight-bold d-block" htmlFor="search-input">
<span className="mb-2 d-inline-block">Search Post</span>
<input
className="form-control width-100p"
type="text"
placeholder="Search post..."
id="search-input"
/>
</label>
</div>
<div className="pb-4 mb-3 border-bottom">
<label className="font-weight-bold d-block" htmlFor="subscribe-input">
<span className="mb-2 d-inline-block">Subscribe</span>
<input
className="form-control width-100p"
type="text"
id="subscribe-input"
placeholder="Enter your email..."
/>
</label>
</div>
<div className="pb-4 mb-3 border-bottom">
<div className="font-weight-bold mb-2">Categories</div>
<div>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umi
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
React-framework
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umijs
</a>
</div>
</div>
<div className="pb-4 mb-3 border-bottom">
<div className="font-weight-bold mb-3">Latest Posts</div>
<List15 />
</div>
</div>
</div>
</div>
)
}
Example #18
| Source File: Settings.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
{this.state.loading ? (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} />
</div>
) : (
<div>
<Modal
title={"Delete Account"}
visible={this.state.deleteAccountModal}
footer={null}
onCancel={() => { this.setState({ deleteAccountModal: false }) }}
confirmLoading={this.state.modalLoading}
>
<DeleteAccountForm logout={this.props.logout.bind(this)} setState={this.setState.bind(this)} />
</Modal>
<Divider />
<div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
<div style={{ display: "flex", flexDirection: "column", justifyContent: "initial", width: "20ch", overflow: "hidden" }}>
<Avatar style={{ backgroundColor: "transparent", width: "12ch", height: "12ch" }} size='large' src={"/static/profile/" + this.props.username + ".webp"} />
<div style={{ marginTop: "2ch", display: "flex" }}>
<Upload
fileList={this.state.fileList}
disabled={this.state.disableUpload}
accept=".png, .jpg, .jpeg, .webp"
action={window.ipAddress + "/v1/profile/upload"}
maxCount={1}
onChange={(file) => {
this.setState({ fileList: file.fileList })
if (file.file.status === "uploading") {
this.setState({ disableUpload: true })
}
else if ("response" in file.file) {
if (file.file.response.success) {
message.success("Uploaded profile picture")
message.success("Reload the page to see your shiny new picture :)!")
}
else {
message.error("Failed to upload profile picture")
if (file.file.response.error === "too-large") {
message.info("Please upload a file smaller than " + file.file.response.size.toString() + " Bytes.")
}
}
this.setState({ fileList: [], disableUpload: false })
}
}}
headers={{ "Authorization": window.IRSCTFToken }}
name="profile_pic"
beforeUpload={file => {
const exts = ["image/png", "image/jpg", "image/jpeg", "image/webp"]
if (!exts.includes(file.type)) {
message.error(`${file.name} is not an image file.`);
return Upload.LIST_IGNORE
}
return true
}}>
<Tooltip title={<span>Upload a custom profile picture.</span>}>
<Button type="primary" icon={<UploadOutlined />}>Upload</Button>
</Tooltip>
</Upload>
<Tooltip title={<span>Reset your profile picture to the default profile picture.</span>}>
<Button danger type="primary" icon={<DeleteOutlined />} style={{ marginLeft: "1ch" }} onClick={() => { this.deleteProfilePic() }} />
</Tooltip>
</div>
</div>
<h1 style={{ fontSize: "5ch", marginLeft: "1ch" }}>{this.props.username}</h1>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<div className="form-style">
<h1 className="settings-header"><KeyOutlined /> Change Password</h1>
<ChangePasswordForm />
</div>
<Divider type="vertical" style={{ height: "inherit" }} />
<div className="form-style">
<h1 className="settings-header"><MailOutlined /> Change Email</h1>
<ChangeEmailForm email={this.state.email} />
</div>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<div className="form-style">
<h1 className="settings-header"><ApartmentOutlined /> Select Participant Category</h1>
<SelectParticipantCategoryForm participantCategory={this.state.participantCategory} categoryList={this.state.categoryList} />
</div>
</div>
<Divider />
<div>
<h3>Very Very Dangerous Button</h3>
<Button danger type="primary" icon={<DeleteOutlined />} onClick={() => { this.setState({ deleteAccountModal: true }) }} >Delete Account</Button>
<p>You will be asked to key in your password to confirm</p>
</div>
</div>
)}
</Layout>
)
}
Example #19
| Source File: login.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ maxWidth: "100vw", maxHeight: "100vh" }}>
<Content style={{ display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0, 0, 0, 0)", backgroundImage: "url(" + require("./../assets/mainBG.webp").default + ")" }}>
<div className="login-banner login-banner-responsive">
<div style={{ fontSize: "7ch", color: "#595959" }}>
<span style={{ fontWeight: "500", textShadow: '1px -1px 1px -1px #000000' }}>Sieberrsec Training Platform</span>
</div>
<div style={{ color: "#595959", fontSize: "5ch" }}>
<p style={{ textShadow: '1px 1px 1px 1px #000000' }}>The Wheel. Reinvented.™</p>
</div>
</div>
<div className="login-page login-page-responsive">
<div style={{ padding: "15px", marginBottom: "5vh" }}>
<img src={require("./../assets/sieberrsec_ctf.svg").default} style={{ width: "100%" }}></img>
</div>
{this.state.login && (
<div style={{ width: "98%" }}>
<h1 style={{ color: "white", fontSize: "3ch" }}>Sign In</h1>
<Form
name="normal_login"
className="login-form"
initialValues={{ remember: true }}
onFinish={this.handleLogin}
style={{ width: "95%" }}
>
<Form.Item
name="username"
rules={[{ required: true, message: 'Please enter your username/email' }]}
>
<Input allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username/Email" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please enter your password.' }]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
allowClear
/>
</Form.Item>
<Form.Item >
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<a href="#" id="forgot-password" onClick={() => { this.setState({ login: false, forgotPass: true }) }}><b>I forgot my password <QuestionCircleOutlined /></b></a>
</div>
</Form.Item>
<Form.Item>
<div style={{ display: "flex", alignItems: "center" }}>
<Button type="primary" htmlType="submit" className="login-form-button" style={{ marginRight: "2ch" }} loading={this.state.loading}>Log in</Button>
<span>Or <a href="#" id="register-toggle" onClick={() => { this.setState({ login: false, register: true }) }} ><b>Register now <RightCircleOutlined /></b></a></span>
</div>
</Form.Item>
</Form>
</div>
)}
{this.state.register && (
<div style={{ width: "98%" }}>
<h1 style={{ color: "white", fontSize: "3ch" }}>Register an Account</h1>
<Form
name="register_form"
id="register-form"
className="register-form"
onFinish={this.handleRegister}
style={{ width: "95%" }}
requiredMark="optional"
>
<Form.Item
name="username"
rules={[{ required: true, message: 'Please enter a username' }, { message: "Please enter an alphanumeric username (without spaces) <= 50 characters.", pattern: /^[a-zA-Z0-9_]{1,50}$/ }]}
>
<Input id="register-username" allowClear prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Enter a new username" />
</Form.Item>
<Form.Item
name="email"
rules={[{ required: true, message: 'Please enter an email' },
{
type: 'email',
message: "Please enter a valid email",
}]}
>
<Input id="register-email" allowClear prefix={<MailOutlined />} placeholder="Enter a new email" />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
{ message: "Please enter a password that is >= 1 character and <= 200 characters", pattern: /^.{1,200}$/ }
]}
hasFeedback
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter a new password" />
</Form.Item>
<Form.Item
name="confirm"
dependencies={['password']}
hasFeedback
rules={[
{
required: true,
message: 'Please confirm your password!',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('Oops, the 2 passwords do not match');
},
}),
]}
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Confirm new password" />
</Form.Item>
<Form.Item>
<Button loading={this.state.loading} type="primary" htmlType="submit" className="login-form-button" style={{ marginBottom: "1.5vh" }}>Register</Button>
<p>Already have an account? <a href="#" onClick={() => { this.setState({ login: true, register: false }) }}><b>Login Here <LeftCircleOutlined /></b></a></p>
</Form.Item>
</Form>
</div>
)}
{this.state.forgotPass && (
<div style={{ width: "98%" }}>
<h1 style={{ color: "white", fontSize: "3ch" }}>Forgot Password</h1>
<Form
onFinish={this.handleForgot}
style={{ width: "95%" }}
>
<Form.Item
name="email"
rules={[{ required: true, message: 'Please enter your email' }, { type: "email", message: "Please enter a valid email" }]}
>
<Input allowClear prefix={<MailOutlined />} placeholder="Email" />
</Form.Item>
<p>
If an account associated with the email above exists, you will receive a password reset email in your inbox <br /><br />
Please note that there is a limit on how often password reset emails can be requested per user. A new email will <b>not be sent if you have just requested for one</b>.
</p>
<Form.Item>
<div style={{ display: "flex", alignItems: "center", marginTop: "4ch" }}>
<Button type="primary" htmlType="submit" style={{ marginRight: "2ch" }} loading={this.state.loading}>Send Email</Button>
<span>Or <a href="#" onClick={() => { this.setState({ login: true, forgotPass: false }) }} ><b>Remember your password? <LeftCircleOutlined /></b></a></span>
</div>
</Form.Item>
</Form>
</div>
)}
{this.state.forgotPassReset && (
<div style={{ width: "98%" }}>
{this.state.forgotPassResetLoading ? (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
<h1>Loading Link Details</h1>
<Ellipsis color="#177ddc" size={120} />
</div>
) : (
<div>
<h1 style={{ color: "white", fontSize: "3ch" }}>Reset Password</h1>
<h4>Resetting password for <u>{this.state.forgotPassUsername}</u></h4>
<Form
onFinish={this.handleResetPasword}
style={{ width: "95%" }}
>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your password',
},
]}
hasFeedback
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter a new password" />
</Form.Item>
<Form.Item
name="confirm"
dependencies={['password']}
hasFeedback
rules={[
{
required: true,
message: 'Please confirm your password',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('Oops, the 2 passwords do not match');
},
}),
]}
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Confirm new password" />
</Form.Item>
<Form.Item>
<div style={{ display: "flex", alignItems: "center", marginTop: "4ch" }}>
<Button type="primary" htmlType="submit" style={{ marginRight: "2ch" }} loading={this.state.loading}>Reset Password</Button>
<span>Or <a href="#" onClick={() => { this.setState({ login: true, forgotPass: false, forgotPassReset: false }) }} ><b>Remember your password? <LeftCircleOutlined /></b></a></span>
</div>
</Form.Item>
</Form>
</div>
)}
</div>
)}
{this.state.needVerify && (
<div style={{ width: "98%" }}>
{this.state.verifyEmailLoading ? (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
<h1>Verifying Email</h1>
<Ellipsis color="#177ddc" size={120} />
</div>
) : (
<div >
<h1 style={{ color: "white", fontSize: "3ch" }}>Email Verification Required</h1>
<p>
Hi, we require you to <b>verify your email (<code>{this.state.verifyEmail}</code>)</b> in order to login to the platform. Please check your inbox and click on the verification link sent to you.
<br /><br />
Did not receive an email? You can resend a verficiation email below!
<br />
Please note that there is a limit on how often verification emails can be sent per user.
</p>
<Button type="primary" icon={<MailOutlined />} loading={this.state.loading} onClick={() => { this.handleResendVerification(this.state.verifyEmail) }}>Resend Verification</Button>
</div>
)}
</div>
)}
</div>
</Content>
</Layout>
);
}
Example #20
| Source File: adminUsers.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title={<span>Change User Permissions <ClusterOutlined /></span>}
visible={this.state.permissionModal}
onOk={this.changePermissions}
onCancel={() => { this.setState({ permissionModal: false }) }}
confirmLoading={this.state.modalLoading}
>
<Select size="large" value={this.state.permissionChangeTo} style={{ width: "30ch" }} onSelect={(value) => { this.setState({ permissionChangeTo: value }) }}>
<Option value="0">0 - Normal User</Option>
<Option value="1">1 - Challenge Creator User</Option>
<Option value="2">2 - Admin User</Option>
</Select>
<br />
<br />
<ul>
<li><b>0 - Normal User</b>: Has access to the basic functions and nothing else</li>
<li><b>1 - Challenge Creator User</b>: Has the additional power of submitting new challenges, but not modifying existing ones</li>
<li><b>2 - Admin User</b>: Has full access to the platform via the admin panel.</li>
</ul>
</Modal>
<Modal
title="Create New Account"
visible={this.state.createUserModal}
footer={null}
onCancel={() => { this.setState({ createUserModal: false }) }}
>
<RegisterForm createAccount={this.createAccount.bind(this)} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Account Password For: " + this.state.username}
visible={this.state.passwordResetModal}
footer={null}
onCancel={() => { this.setState({ passwordResetModal: false }) }}
>
<ChangePasswordForm username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<Modal
title={"Changing Category For: " + this.state.username}
visible={this.state.categoryChangeModal}
footer={null}
onCancel={() => { this.setState({ categoryChangeModal: false }) }}
>
<SelectParticipantCategoryForm fillTableData={this.fillTableData.bind(this)} categoryList={this.state.categoryList} username={this.state.username} participantCategory={this.state.participantCategory} />
</Modal>
<Modal
title={"Changing Email For: " + this.state.username}
visible={this.state.emailChangeModal}
footer={null}
onCancel={() => { this.setState({ emailChangeModal: false }) }}
>
<ChangeEmailForm fillTableData={this.fillTableData.bind(this)} username={this.state.username} setState={this.setState.bind(this)} />
</Modal>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<UserOutlined />} onClick={() => { this.setState({ createUserModal: true }) }}>Create New User</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} ></Ellipsis>
<h1>Loading Users</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await Promise.all([this.fillTableData(), this.getDisableStates()]); message.success("Users list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the user(s) (' + this.state.selectedTableKeys.join(", ") + ')? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Delete Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CheckOutlined style={{ color: "#49aa19" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.verifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Verify Users</Button>
<Button type="default" disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<CloseOutlined style={{ color: "#a61d24" }} />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to un-verify the user(s) (' + this.state.selectedTableKeys.join(", ") + ')?',
content: 'Please note that this action will send a new email per user asking them to re-verify.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.unverifyAccounts(close.bind(this), this.state.selectedTableKeys) },
onCancel: () => { },
});
}}>Un-Verify Users</Button>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No users found/created</h1>
</div>
)
}}>
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Username"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.username.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (a.username < b.username) return -1
else return 1
}}
/>
<Column title="Email" dataIndex="email" key="email"
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Email"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.email.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Permissions" dataIndex="type" key="type" filters={[{ text: "Normal User (0)", value: 0 }, { text: "Challenge Creator (1)", value: 1 }, { text: "Admin (2)", value: 2 }]} onFilter={(value, record) => { return value === record.type }} />
<Column title="Team" dataIndex="team" key="team"
render={(text, row, index) => {
if (text != "N/A") return <Link to={"/Team/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return text;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
placeholder="Search Team"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
autoFocus
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.team.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
/>
<Column title="Category" dataIndex="category" key="category" filters={
this.state.categoryList.map((category) => {
return { text: category, value: category }
})} onFilter={(value, record) => { return value === record.category }} />
<Column title="Verified" dataIndex="verified" key="verified" filters={[{ text: "Verified", value: "True" }, { text: "Unverified", value: "False" }]} onFilter={(value, record) => { return value === record.verified }} />
<Column
title=""
key="action"
render={(text, record) => (
<Dropdown trigger={['click']} overlay={
<Menu>
<Menu.Item onClick={() => {
this.setState({ permissionModal: true, username: record.username, permissionChangeTo: record.type.toString() })
}}>
<span>
Change Permissions <ClusterOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ passwordResetModal: true, username: record.username })
}}>
<span>
Change Password <KeyOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ emailChangeModal: true, username: record.username })
}}>
<span>
Change Email <MailOutlined />
</span>
</Menu.Item>
<Menu.Item onClick={() => {
this.setState({ categoryChangeModal: true, username: record.username, participantCategory: record.category })
}}>
<span>
Change Category <ApartmentOutlined />
</span>
</Menu.Item>
</Menu>
} placement="bottomCenter">
<Button>Actions</Button>
</Dropdown>
)}
/>
</Table>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Disable User Registration: <Switch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("registerDisable", value)} checked={this.state.registerDisable} /></h3>
<p>Disables user registration for unregistered users. Admins can still create users from this page.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable User Logins: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("loginDisable", value)} checked={this.state.loginDisable} /></h3>
<p>Disables user login except for admin users. <br /><b>Note:</b> Users already logged into the platform will remain authenticated as tokens cannot be revoked. If you want to restrict a user from accessing the platform anymore, simply delete their account.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Admin Scores: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("adminShowDisable", value)} checked={this.state.adminShowDisable} /></h3>
<p>Prevents admin scores from showing up on scoreboards and profile pages. Admin solves will still appear under the solve list in challenges. <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Profile Picture Max Upload Size: <InputNumber
formatter={value => `${value}B`}
parser={value => value.replace('B', '')}
value={this.state.uploadSize}
disabled={this.state.uploadLoading}
onChange={(value) => this.setState({ uploadSize: value })}
onPressEnter={(e) => { this.changeSetting("uploadSize", this.state.uploadSize) }} /></h3>
<p>Sets the maximum file upload size for profile pictures (in Bytes). Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Category Switches: <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("categorySwitchDisable", value)} checked={this.state.categorySwitchDisable} /></h3>
<p>Prevents users from switching their scoreboard category. Useful during competitions where you want to lock the user into a category</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>User Category Management <UserOutlined /></h3>
<Space direction="vertical">
{this.state.categoryList.map((category) => {
return (
<div style={{ display: 'flex', alignItems: "center" }}>
<Input disabled value={category} />
<MinusCircleOutlined onClick={() => { this.removeCategory(category) }} style={{ cursor: "pointer", marginLeft: "1ch", color: "#f5222d" }} />
</div>
)
})}
<div style={{ display: "flex" }}>
<Input value={this.state.newCategoryValue} onChange={(e) => { this.setState({ newCategoryValue: e.target.value }) }} />
<Button
loading={this.state.addCategoryLoading}
style={{ marginLeft: "1ch" }}
type="dashed"
onClick={() => {
this.addCategory()
}}
>
<PlusOutlined /> Add Category
</Button>
</div>
</Space>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Max Team Size: <InputNumber
value={this.state.teamMaxSize}
onChange={(value) => this.setState({ teamMaxSize: value })}
onPressEnter={(e) => { this.changeSetting("teamMaxSize", this.state.teamMaxSize) }} />
</h3>
<p>Sets the maximum number of members in a team. Press <b>Enter</b> to save</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Teams: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamMode", value)} checked={this.state.teamMode} /></h3>
<p>Enable teams for the platform. Users in a team will have their scores combined on the scoreboard <br /> Please note that disabling/enabling this will require users to reopen ctfx to resync the scoreboard.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable Team Switching: <Switch disabled={this.state.disableLoading3} onClick={(value) => this.disableSetting("teamChangeDisable", value)} checked={this.state.teamChangeDisable} /></h3>
<p>Prevents users from leaving, joining & creating a team. Enable this option if you want to prevent any team changes during a competition</p>
</Card>
</div>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Enable Password Reset <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("forgotPass", value)} checked={this.state.forgotPass} /></h3>
<p>Allow users to use the "Forgot Password" option to reset their password. <br />Please ensure that you have connected to an SMTP server correctly in the "Email" tab</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Enable Email Verification <Switch disabled={this.state.disableLoading2} onClick={(value) => this.disableSetting("emailVerify", value)} checked={this.state.emailVerify} /></h3>
<p>Forces newly registered users to <b>verify their email</b> before being able to access the site.</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Profile Picture Upload Path
<Input
value={this.state.uploadPath}
onChange={(e) => this.setState({ uploadPath: e.target.value })}
onPressEnter={(e) => { this.changeSetting("uploadPath", this.state.uploadPath) }} /></h3>
<p>Sets the file upload path for profile pictures. Please ensure that the folder has the appropriate permissions <br />set for the Node process to save the file there. Press <b>Enter</b> to save</p>
</Card>
</div>
</Layout>
);
}
