@ant-design/icons#LockOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#LockOutlined.
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: index.js From react_management_template with Apache License 2.0 | 6 votes |
|
render() {
return (
<Row className="login" justify="center" align="middle" >
<Col span={8}>
<h1>欢迎登录后台管理系统</h1>
<Form className="login-form" initialValues={{ remember: true }}>
<Form.Item name="username" rules={[{ required: true, message: '请输入用户名!!!' }]}>
<Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: '请输入密码!!!' }]}>
<Input name="password" prefix={<LockOutlined className="site-form-item-icon" />}type="password" placeholder="请输入密码" onChange={this.onInputChange} />
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>记住用户和密码</Checkbox>
</Form.Item>
<a className="login-form-forgot" >
忘记密码
</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onSubmit} >
登录
</Button>
</Form.Item>
</Form>
</Col>
</Row>
);
}
Example #2
| Source File: Login.js From kafka-map with Apache License 2.0 | 6 votes |
|
render() {
return (
<div className='login-bg'
style={{width: this.state.width, height: this.state.height, backgroundColor: '#F0F2F5'}}>
<Card className='login-card' title={null}>
<div style={{textAlign: "center", margin: '15px auto 30px auto', color: '#1890ff'}}>
<Title level={1}>Kafka Map</Title>
</div>
<Form onFinish={this.handleSubmit} className="login-form">
<Form.Item name='username' rules={[{required: true, message: '请输入登录账号！'}]}>
<Input prefix={<UserOutlined/>} placeholder="登录账号"/>
</Form.Item>
<Form.Item name='password' rules={[{required: true, message: '请输入登录密码！'}]}>
<Input.Password prefix={<LockOutlined/>} placeholder="登录密码"/>
</Form.Item>
{/*<Form.Item name='remember' valuePropName='checked' initialValue={false}>*/}
{/* <Checkbox>记住登录</Checkbox>*/}
{/*</Form.Item>*/}
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button"
loading={this.state.inLogin}>
登录
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
Example #3
| Source File: SignupForm.jsx From React-Nest-Admin with MIT License | 6 votes |
|
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className={styles["login-form"]}>
<Form.Item>
{getFieldDecorator("username", {
rules: [{ required: true, message: "请输入用户名！" }]
})(
<Input
prefix={<UserOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
placeholder="帐号"
autoComplete="on"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator("password", {
rules: [{ required: true, message: "请输入密码！" }]
})(
<Input
prefix={<LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
type="password"
placeholder="密码"
autoComplete="on"
/>
)}
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className={styles["login-form-button"]}
>
注册
</Button>
</Form.Item>
</Form>
);
}
Example #4
| Source File: Login.js From Peppermint with GNU General Public License v3.0 | 5 votes |
|
Login = () => {
const history = useHistory();
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const { signin } = useContext(GlobalContext);
const onSubmit = async () => {
signin(email, password);
};
return (
<div>
<Form
style={{ position: "absolute" }}
name="normal_login"
className="login-form"
initialValues={{
remember: true,
}}
>
<div className="logo-login">
<Image alt="logo" src={logo} width={300} preview={false} />
</div>
<Form.Item
name="username"
rules={[
{
required: true,
message: "Please input your Email!",
},
]}
>
<Input
style={{ width: 300 }}
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder="Email"
onChange={(e) => setEmail(e.target.value)}
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: "Please input your Password!",
},
]}
>
<Input.Password
style={{ width: 300 }}
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
iconRender={(visible) =>
visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
}
onChange={(e) => setPassword(e.target.value)}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
onClick={() => {
onSubmit();
setTimeout(() => history.push("/"), 1000);
}}
>
Log in
</Button>
</Form.Item>
</Form>
</div>
);
}
Example #5
| Source File: index.js From one_month_code with Apache License 2.0 | 5 votes |
|
render() {
// 肯定没有登录, 登录页面
// 跳转到后台首页 /
if (isLogin()) {
return <Redirect to={"/"}/>
}
return (
<div className={"login_container"}>
<div className="login_pane">
<div className="top">
联通-后台管理系统
</div>
<div className="login_form">
<Form
name="lt_user_login"
className="login-form"
onFinish={this.onFinish}
>
<Form.Item
name="account"
rules={[
{ required: true, message: '请必须输入账号' },
{ min: 3, message: "长度必须大于等于3"}
]}
>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入账号" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: '请必须输入密码' }]}
>
<Input.Password
prefix={<LockOutlined className="site-form-item-icon" />}
placeholder="请输入密码"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-button">
立即登录
</Button>
</Form.Item>
</Form>
</div>
</div>
</div>
)
}
Example #6
| Source File: index.js From ant-simple-pro with MIT License | 5 votes |
|
Login = () => {
const history = useHistory();
const loading = useSelector(({ other }) => other.loading);
const onFinish = async (values) => {
const { email, password } = values
let res = await login({ email, password });
if (res.code === requestCode.successCode) {
localStorage.setItem('token', res.data);
history.push("/home");
}
};
return (
<div className={style.login}>
<div className={style.content}>
<div className={style.bg}>
<img src={logon} alt="logon" />
</div>
<div className={style.fill}>
<div className={style.logon}>
<SvgIcon iconClass='logon' fontSize='30px' className={style.img} />
<h2>Ant Simple Pro</h2>
</div>
<div className={style.from}>
<Form name="basic" initialValues={{ remember: true }} layout='vertical' onFinish={onFinish}>
<Form.Item name="email" rules={[{ required: true, message: '请输入邮箱' }]}>
<Input
prefix={<UserOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder="请填写邮箱"
size='large'
allowClear
/>
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
<Input
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
type="password"
placeholder="请填写密码"
size='large'
allowClear
/>
</Form.Item>
<Form.Item className={style.space}>
<Button type="primary" htmlType="submit"
loading={loading}
className={style.submit}
size='large'
>
登录
</Button>
</Form.Item>
</Form>
</div>
</div>
</div>
<Footer name='Ant Simple Pro' ahthor='Lgf&qyh' />
</div>
)
}
Example #7
| Source File: UpdatePassword.jsx From starter-antd-admin-crud-auth-mern with MIT License | 5 votes |
|
export default function UpdatePassword({ config }) {
const dispatch = useDispatch();
const { current } = useSelector(selectUpdatedItem);
const { state } = useCrudContext();
const [form] = Form.useForm();
const { onFetch, result, isLoading, isSuccess } = useOnFetch();
const handelSubmit = (fieldsValue) => {
const id = current._id;
const updateFn = () => {
return request.patch("admin/password-update/" + id, fieldsValue);
};
onFetch(updateFn);
};
useEffect(() => {
if (isSuccess) {
// readBox.open();
form.resetFields();
dispatch(crud.resetAction("update"));
}
}, [isSuccess]);
const { isAdvancedBoxOpen } = state;
const show = isAdvancedBoxOpen
? { display: "block", opacity: 1 }
: { display: "none", opacity: 0 };
return (
<div style={show}>
<Loading isLoading={isLoading}>
<h3>Update Password</h3>
<div className="space"></div>
<Form form={form} layout="vertical" onFinish={handelSubmit}>
<Form.Item
label="New Password"
name="password"
rules={[
{
required: true,
message: "Please input your Password!",
len: 8,
},
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
autoComplete="off"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Update
</Button>
</Form.Item>
</Form>
</Loading>
</div>
);
}
Example #8
| Source File: AdminDataTable.jsx From starter-antd-admin-crud-auth-mern with MIT License | 5 votes |
|
function DropDownRowMenu({ row }) {
const dispatch = useDispatch();
const { crudContextAction } = useCrudContext();
const {
panel,
collapsedBox,
modal,
advancedBox,
readBox,
editBox,
} = crudContextAction;
const item = useSelector(selectItemById(row._id));
const Show = () => {
dispatch(crud.currentItem(item));
panel.open();
collapsedBox.open();
readBox.open();
};
function Edit() {
dispatch(crud.currentAction("update", item));
editBox.open();
panel.open();
collapsedBox.open();
}
function UpdatePassword() {
dispatch(crud.currentAction("update", item));
advancedBox.open();
panel.open();
collapsedBox.open();
}
function Delete() {
dispatch(crud.currentAction("delete", item));
modal.open();
}
return (
<Menu style={{ minWidth: 130 }}>
<Menu.Item key={`${uniqueId()}`} icon={<EyeOutlined />} onClick={Show}>
Show
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<EditOutlined />} onClick={Edit}>
Edit
</Menu.Item>
<Menu.Item
key={`${uniqueId()}`}
icon={<LockOutlined />}
onClick={UpdatePassword}
>
Update Password
</Menu.Item>
<Menu.Item
key={`${uniqueId()}`}
icon={<DeleteOutlined />}
onClick={Delete}
>
Delete
</Menu.Item>
</Menu>
);
}
Example #9
| Source File: AdminDataTable.jsx From erp-crm with MIT License | 5 votes |
|
function DropDownRowMenu({ row }) {
const dispatch = useDispatch();
const { crudContextAction } = useCrudContext();
const { panel, collapsedBox, modal, advancedBox, readBox, editBox } = crudContextAction;
const item = useSelector(selectItemById(row._id));
const Show = () => {
dispatch(crud.currentItem({ data: item }));
panel.open();
collapsedBox.open();
readBox.open();
};
function Edit() {
dispatch(crud.currentItem({ data: item }));
dispatch(crud.currentAction({ actionType: 'update', data: item }));
editBox.open();
panel.open();
collapsedBox.open();
}
function UpdatePassword() {
dispatch(crud.currentItem({ data: item }));
dispatch(crud.currentAction({ actionType: 'update', data: item }));
advancedBox.open();
panel.open();
collapsedBox.open();
}
function Delete() {
dispatch(crud.currentAction({ actionType: 'delete', data: item }));
modal.open();
}
return (
<Menu style={{ minWidth: 130 }}>
<Menu.Item key={`${uniqueId()}`} icon={<EyeOutlined />} onClick={Show}>
Show
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<EditOutlined />} onClick={Edit}>
Edit
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<LockOutlined />} onClick={UpdatePassword}>
Update Password
</Menu.Item>
<Menu.Item key={`${uniqueId()}`} icon={<DeleteOutlined />} onClick={Delete}>
Delete
</Menu.Item>
</Menu>
);
}
Example #10
| Source File: LoginForm.jsx From erp-crm with MIT License | 5 votes |
|
export default function LoginForm() {
return (
<>
<Form.Item
name="email"
rules={[
{
required: true,
message: 'Please input your Email!',
},
]}
>
<Input
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder="[email protected]"
autoComplete="email"
size="large"
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your Password!',
},
]}
>
<Input.Password
prefix={<LockOutlined className="site-form-item-icon" />}
placeholder="admin123"
size="large"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<a className="login-form-forgot" href="">
Forgot password
</a>
</Form.Item>
</>
);
}
Example #11
| Source File: index.jsx From mixbox with GNU General Public License v3.0 | 5 votes |
|
render() {
const {loading, message, isMount} = this.state;
const formItemStyleName = isMount ? 'form-item active' : 'form-item';
return (
<div styleName="root" className="login-bg">
<Helmet title="欢迎登陆"/>
<div styleName="left">
<Banner/>
</div>
<div styleName="right">
<div styleName="box">
<Form
ref={form => this.form = form}
name="login"
className='inputLine'
onFinish={this.handleSubmit}
>
<div styleName={formItemStyleName}>
<div styleName="header">欢迎登录</div>
</div>
<div styleName={formItemStyleName}>
<Form.Item
name="userName"
rules={[{required: true, message: '请输入用户名'}]}
>
<Input allowClear autoFocus prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/>
</Form.Item>
</div>
<div styleName={formItemStyleName}>
<Form.Item
name="password"
rules={[{required: true, message: '请输入密码'}]}
>
<Input.Password prefix={<LockOutlined className="site-form-item-icon"/>} placeholder="密码"/>
</Form.Item>
</div>
<div styleName={formItemStyleName}>
<Form.Item shouldUpdate={true} style={{marginBottom: 0}}>
{() => (
<Button
styleName="submit-btn"
loading={loading}
type="primary"
htmlType="submit"
disabled={
!this.form?.isFieldsTouched(true) ||
this.form?.getFieldsError().filter(({errors}) => errors.length).length
}
>
登录
</Button>
)}
</Form.Item>
</div>
</Form>
<div styleName="error-tip">{message}</div>
</div>
</div>
</div>
);
}
Example #12
| Source File: Login.js From next-terminal with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return (
<div className='login-bg'
style={{width: this.state.width, height: this.state.height, background: `url(${Background})`}}>
<Card className='login-card' title={null}>
<div style={{textAlign: "center", margin: '15px auto 30px auto', color: '#1890ff'}}>
<Title level={1}>Next Terminal</Title>
</div>
<Form onFinish={this.handleSubmit} className="login-form">
<Form.Item name='username' rules={[{required: true, message: '请输入登录账号！'}]}>
<Input prefix={<UserOutlined/>} placeholder="登录账号"/>
</Form.Item>
<Form.Item name='password' rules={[{required: true, message: '请输入登录密码！'}]}>
<Input.Password prefix={<LockOutlined/>} placeholder="登录密码"/>
</Form.Item>
<Form.Item name='remember' valuePropName='checked' initialValue={false}>
<Checkbox>记住登录</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button"
loading={this.state.inLogin}>
登录
</Button>
</Form.Item>
</Form>
</Card>
<Modal title="双因素认证" visible={this.state.totpModalVisible} confirmLoading={this.state.confirmLoading}
maskClosable={false}
okButtonProps={{form:'totp-form', key: 'submit', htmlType: 'submit'}}
onOk={() => {
this.formRef.current
.validateFields()
.then(values => {
this.handleOk(values);
// this.formRef.current.resetFields();
});
}}
onCancel={this.handleCancel}>
<Form id='totp-form' ref={this.formRef}>
<Form.Item name='totp' rules={[{required: true, message: '请输入双因素认证APP中显示的授权码'}]}>
<Input ref={this.totpInputRef} prefix={<OneToOneOutlined/>} placeholder="请输入双因素认证APP中显示的授权码"/>
</Form.Item>
</Form>
</Modal>
</div>
);
}
Example #13
| Source File: index.js From react_management_template with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Card title="内敛表单" className="card-wrap-login">
<Form name="horizontal_login" layout="inline">
<Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
<Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码"/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
登录
</Button>
</Form.Item>
</Form>
</Card>
<Card title="外联表单" className="card-wrap">
<Form name="normal_login" className="login-form" initialValues={{ remember: true }}>
<Form.Item rules={[{ required: true, message: '请输入用户名！！！' }]}>
<Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
</Form.Item>
<Form.Item rules={[{ required: true, message: '请输入密码！！！' }]}>
<Input name="password" prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" onChange={this.onInputChange}/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>记住密码</Checkbox>
</Form.Item>
<a className="login-form-forgot" href="">
忘记密码
</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onhandleSubmit}>
登录
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
Example #14
| Source File: ResetPwdForm.jsx From React-Nest-Admin with MIT License | 5 votes |
|
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className={styles["login-form"]}>
<Form.Item>
{getFieldDecorator("username", {
rules: [{ required: true, message: "请输入用户名！" }]
})(
<Input
prefix={<UserOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
placeholder="帐号"
autoComplete="on"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator("oldPwd", {
rules: [{ required: true, message: "请输入原密码！" }]
})(
<Input
prefix={<LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
type="password"
placeholder="原密码"
autoComplete="on"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator("newPwd", {
rules: [{ required: true, message: "请输入新密码！" }]
})(
<Input
prefix={<LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
type="password"
placeholder="新密码"
autoComplete="on"
/>
)}
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className={styles["login-form-button"]}
>
提交
</Button>
</Form.Item>
</Form>
);
}
Example #15
| Source File: LoginPage.js From cra-template-redux-auth-starter with MIT License | 5 votes |
|
function LoginPage() {
const loader = useSelector(state => state.authentication.loader)
const dispatch = useDispatch();
return (
<div className="container">
<Form
name="normal_login"
className="form"
initialValues={{
remember: true,
}}
onFinish={() => dispatch(login(
{'email': '[email protected]', 'password': 'cityslicka'},
))
}
>
<Form.Item
name="username"
rules={[
{
required: true,
message: 'Please input your Username!',
},
]}
>
<Input size="large"
prefix={<UserOutlined className="site-form-item-icon"/>}
placeholder="Username"
autoComplete="username"
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your Password!',
},
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon"/>}
type="password"
placeholder="Password"
size="large"
autoComplete="current-password"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item>
<Button loading={loader} type="primary" htmlType="submit" className="login-form-button"
size="large">Log in
</Button>
</Form.Item>
</Form>
</div>
);
}
Example #16
| Source File: Settings.js From ctf_platform with MIT License | 5 votes |
|
DeleteAccountForm = (props) => {
const [form] = Form.useForm();
return (
<Form
form={form}
name="changePassword"
className="change-password-form"
onFinish={(values) => {
fetch(window.ipAddress + "/v1/account/delete", {
method: 'post',
headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
body: JSON.stringify({
"password": values.password
})
}).then((results) => {
return results.json(); //return data in JSON (since its JSON data)
}).then((data) => {
if (data.success === true) {
message.success({ content: "Account deleted successfully" })
props.setState({ deleteAccountModal: false })
props.logout()
form.resetFields()
}
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" });
})
}}
style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "100%", marginBottom: "2vh" }}
>
<h4>Your account data will be <b style={{ color: "#d32029" }}>deleted permanently</b>. Please ensure you really no longer want this account.</h4>
<h3>Please Enter Your Password To Confirm:</h3>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password', }]}>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter password." />
</Form.Item>
<Form.Item>
<Button style={{ marginRight: "1.5vw" }} onClick={() => { props.setState({ deleteAccountModal: false }) }}>Cancel</Button>
<Button type="primary" htmlType="submit" danger icon={<KeyOutlined />}>Delete Account</Button>
</Form.Item>
</Form>
);
}
Example #17
| 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 #18
| 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 #19
| Source File: LoginForm.jsx From React-Nest-Admin with MIT License | 5 votes |
|
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className={styles["login-form"]}>
<Form.Item>
{getFieldDecorator("username", {
rules: [{ required: true, message: "请输入用户名！" }]
})(
<Input
prefix={<UserOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
placeholder="帐号"
autoComplete="on"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator("password", {
rules: [{ required: true, message: "请输入密码！" }]
})(
<Input
prefix={<LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
type="password"
placeholder="密码"
autoComplete="on"
/>
)}
</Form.Item>
<Form.Item>
<span className={styles["others-box"]}>
<i onClick={this.toParentGoSignup}>现在注册！</i>
<i onClick={this.toParentGoResetPwd}>重置密码</i>
</span>
<Button
type="primary"
htmlType="submit"
className={styles["login-form-button"]}
>
登录
</Button>
</Form.Item>
</Form>
);
}
Example #20
| Source File: challengesTagSortList.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Collapse bordered={false} defaultActiveKey={Object.keys(this.props.tag)}>
{
this.props.selectedTags.map((category) => {
const key = category
const value = this.props.tag[category]
return (
<Panel header={<span style={{ color: "#177ddc", fontSize: "120%", textTransform: "capitalize", textAlign: "center", fontWeight: 700 }}>{key} - <span style={{ color: "#d89614" }}>{"(" + String(value.length) + ")"}</span> </span>} key={key}>
<List
grid={{
xs: 1,
sm: 2,
md: 2,
lg: 3,
xl: 4,
xxl: 5,
gutter: 20
}}
dataSource={value}
key={key + "cat"}
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%" }}>Oops, no challenges have been created.</h1>
</div>
)
}}
renderItem={item => {
if (!("firstBlood" in item)) {
item.firstBlood = "No Solves Yet!"
}
if (item.requires && !item.requiresSolved && this.props.permissions < 2) {
return (
<List.Item key={item._id}>
<Tooltip title={<span>Please solve "<b><u>{item.requiresName}</u></b>" to unlock this challenge.</span>}>
<div id={item._id}>
<Card
type="inner"
bordered={true}
className="card-design"
>
<Meta
description={
<div className="card-design-body" >
<LockOutlined className="disabled-style"/>
<h1 className="card-design-name" >{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</Tooltip>
</List.Item>
)
}
else if (item.solved === false) {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.props.loadChallengeDetails(item._id, item.solved); }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design hover"
>
<Meta
description={
<div className="card-design-body">
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.props.loadingChallenge && this.props.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
else {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.props.loadChallengeDetails(item._id, item.solved);}}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design solved hover"
>
<Meta
description={
<div className="card-design-body">
<CheckOutlined className="correct-style"/>
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.props.loadingChallenge && this.props.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
}
}
/>
</Panel>
)
})
}
</Collapse>
)
}
Example #21
| Source File: index.js From react_management_template with Apache License 2.0 | 4 votes |
|
render() {
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const offsetLayout={
wrapperCol:{
xs:24,
sm:{
span:16,
offset:6
}
}
}
const RadioGroup = Radio.Group;
const { Option } = Select;
const TextArea = Input.TextArea;
return (
<div>
<Card title="注册表单" className="card-wrap">
<Form name="normal_login" className="login-form" initialValues={{ remember: true }}>
<Form.Item {...formItemLayout} name="username" label="用户名" rules={[{ required: true, message: '请输入用户名！！！' }]}>
<Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
</Form.Item>
<Form.Item {...formItemLayout} name="password" label="密码" rules={[{ required: true, message: '请输入密码！！！' }]}>
<Input name="password" prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" onChange={this.onInputChange}/>
</Form.Item>
<Form.Item {...formItemLayout} name="sex" label="性别" rules={[{ required: true }]}>
<RadioGroup defaultValue="1">
<Radio value="1">男</Radio>
<Radio value="2">女</Radio>
</RadioGroup>
</Form.Item>
<Form.Item {...formItemLayout} name="age" label="年龄" rules={[{ required: true }]}>
<InputNumber min={1} max={100} defaultValue={18}/>
</Form.Item>
<Form.Item {...formItemLayout} name="state" label="状态" rules={[{ required: true }]}>
<Select defaultValue="3">
<Option value="1">上学</Option>
<Option value="2">工作</Option>
<Option value="3">财富自由</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} name="hobby" label="爱好" rules={[{ required: true }]}>
<Select mode="multiple" defaultValue="4">
<Option value="1">游泳</Option>
<Option value="2">打篮球</Option>
<Option value="3">踢足球</Option>
<Option value="4">跑步</Option>
<Option value="5">爬山</Option>
<Option value="6">骑行</Option>
<Option value="7">桌球</Option>
<Option value="8">麦霸</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} name="is_married" label="是否已婚">
<Switch defaultChecked/>
</Form.Item>
<Form.Item {...formItemLayout} name="time" label="生日">
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
</Form.Item>
<Form.Item {...formItemLayout} name="address" label="地址">
<TextArea/>
</Form.Item>
<Form.Item {...formItemLayout} name="icon" label="头像">
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
onChange={this.handleChange}
>
{this.state.userImg ? <img src={this.state.userImg} alt="avatar" style={{ width: '100%' }} /> : <PlusOutlined />}
</Upload>
</Form.Item>
<Form.Item {...offsetLayout} name="xieyi" >
<Checkbox>我已阅读过<a href="#">协议</a></Checkbox>
</Form.Item>
<Form.Item {...offsetLayout} name="register" >
<Button type="primary" >注册 </Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
Example #22
| Source File: login.jsx From credit with Apache License 2.0 | 4 votes |
|
render() {
const onFinish = (values) => {
// console.log('Received values of form: ', values);
// setToken(values.name);
// this.props.history.push('/admin');
loginApi({
email: values.name,
password: values.password
})
.then(res => {
let status = res.data.status;
let data = res.data.data;
if(status !== "success")
{
message.error(data.errMsg);
} else {
message.info("登录成功");
setToken(data);
if(data.startsWith("super")) {
this.props.history.push("/admin/supervisedashboard");
} else if(data.startsWith("user")) {
this.props.history.push("/admin/userdashboard");
} else {
this.props.history.push("/admin/institutiondashboard");
}
}
})
.catch(err => {
message.error("登录出错");
console.error(err);
})
};
return (
<Card title="登录" className="login-card">
<Form
name="normal_login"
className="login-form"
initialValues={{
remember: true,
}}
onFinish={onFinish}
>
<Form.Item
name="name"
rules={[
{
required: true,
message: '请输入用户名！',
},
]}
>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: '请输入密码！',
},
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>记住我</Checkbox>
</Form.Item>
<a className="login-form-forgot" href="#1">
忘记密码
</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
登录
</Button>
从助记词还原 <Link to="/register">使用账户助记词导入</Link><br/>
没有账户 <Link to="/register">注册</Link>
</Form.Item>
</Form>
</Card>
);
}
Example #23
| Source File: PasswordResetForm.js From Codelabz with Apache License 2.0 | 4 votes |
|
PasswordResetForm = ({ actionCode }) => {
const firebase = useFirebase();
const dispatch = useDispatch();
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [success, setSuccess] = useState(false);
const errorProp = useSelector(({ auth }) => auth.recoverPassword.resetError);
const loadingProp = useSelector(
({ auth }) => auth.recoverPassword.resetLoading
);
const email = useSelector(({ auth }) => auth.recoverPassword.user);
useEffect(() => setError(errorProp), [errorProp]);
useEffect(() => setLoading(loadingProp), [loadingProp]);
const onSubmit = async ({ password }) => {
setError("");
setLoading(true);
await confirmPasswordReset({ actionCode, password })(firebase, dispatch);
setLoading(false);
};
useEffect(() => {
if (errorProp === false && loadingProp === false) {
setSuccess(true);
} else {
setSuccess(false);
}
}, [errorProp, loadingProp]);
return (
<>
<Title level={4} style={{ textAlign: "center", marginBottom: "40px" }}>
Reset password for {email}
</Title>
{error && (
<Alert
message={""}
description={error}
severity="error"
closable
className="login-error mb-16"
/>
)}
{success && (
<>
<Alert
message={""}
description={"Successfully changed your password"}
severity="success"
closable
className="mb-16"
/>
<Grid justify="center" align="center" className="mt-24">
<Grid sm={24} className="center">
<Link to={"/login"}>Sign in</Link>
</Grid>
</Grid>
</>
)}
{!success && (
<>
<form onFinish={onSubmit}>
<FormControl
name="password"
rules={[
{
required: true,
message: "Please enter a password",
},
]}
hasFeedback
>
<Input.Password
prefix={<LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
placeholder="Password"
/>
</FormControl>
<FormControl
name="confirm"
dependencies={["password"]}
hasFeedback
rules={[
{
required: true,
message: "Please re-type the password",
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
"The two passwords that you entered does not match"
);
},
}),
]}
>
<Input.Password
prefix={<LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
required
placeholder="Confirm password"
/>
</FormControl>
<FormControl>
<Button type="primary" htmlType="submit" block loading={loading}>
{loading ? "Changing your password..." : "Change password"}
</Button>
</FormControl>
</form>
<Grid justify="center" align="center" className="mt-24">
<Grid sm={24} className="center">
Back to <Link to={"/login"}>CodeLabz</Link>
</Grid>
</Grid>
</>
)}
</>
);
}
Example #24
| Source File: Signup.js From react-chat-app with MIT License | 4 votes |
|
Signup = () => {
const history = useHistory();
const [serverError, setServerError] = useState("");
const [loading, setLoading] = useState(false);
function lowerLetters(str) {
return str.toLowerCase();
}
const signup = ({ userName, password }, { setSubmitting }) => {
alert("The limit for new accounts has been reached. Please use Sample Account")
return null
setLoading(true)
//@chat.engine is added to login because of Firebase requiring email string
fb.auth
.createUserWithEmailAndPassword(
`${encodeURIComponent(lowerLetters(userName))}@chat.engine`,
password
)
.then((res) => {
console.log("Firebase account created");
})
.catch((err) => {
if (err.code === "auth/email-already-in-use") {
setServerError("An account with this username already exists");
} else {
setServerError(
"We're having trouble signing you up. Please try again."
);
}
})
.finally(() => {
setSubmitting(false)
setLoading(false)
});
};
return (
<div className="auth-form signup-fields">
<div className="logo">
<CommentOutlined />
<div className="logo-text">
<div className="logo-text-first"> Chat</div>
<div className="logo-text-second"> App</div>
</div>
</div>
<Formik
onSubmit={signup}
validateOnMount={true}
initialValues={defaultValues}
validationSchema={validationSchema}
>
{({ isValid, isSubmitting }) => (
<Form>
<div className="login-fields ">
<div className="login-field">
<UserOutlined />
<FormField name="userName" placeholder="Username" />
</div>
<ErrorMessage component='div' name="userName" className="error" />
<div className="login-field">
<LockOutlined />
<FormField name="password" type="password" placeholder="Password" />
</div>
<ErrorMessage component='div' name="password" className="error" />
<div className="login-field">
<LockOutlined />
<FormField name="verifyPassword" placeholder="Verify Password" type="password" />
</div>
<ErrorMessage component='div' name="verifyPassword" className="error" />
</div>
{!loading ?
<button type="submit">
Sign Up (Disabled)
</button> : <div className="loading-image"><img src={loadingAnimation} alt="" /></div>}
<div className="auth-link-container already-account">
Already have an account?{" "}
<span className="auth-link signup-text" onClick={() => history.push("react-chat-app")}>
Log In!
</span>
</div>
</Form>
)}
</Formik>
{!!serverError && <div className="error">{serverError}</div>}
</div>
);
}
Example #25
| Source File: Login.js From react-chat-app with MIT License | 4 votes |
|
Login = () => {
const [serverError, setServerError] = useState("");
const history = useHistory();
const [loading, setLoading] = useState(false);
function lowerLetters(str) {
return str.toLowerCase();
}
const login = ({ userName, password }, { setSubmitting }) => {
setLoading(true)
// @chat.engine is added to login because of Firebase requiring email string
fb.auth
.signInWithEmailAndPassword(
`${encodeURIComponent(lowerLetters(userName))}@chat.engine`,
password
)
.then((res) => {
if (!res.user) {
setServerError(
"We're having trouble logging you in. Please try again."
);
}
})
.catch((err) => {
console.log(err);
if (err.code === "auth/wrong-password") {
setServerError("Username or password is invalid");
} else if (err.code === "auth/user-not-found") {
setServerError("No account for this username");
} else {
setServerError("Something went wrong :(");
}
})
.finally(() => {
setLoading(false)
});
};
return (
<div className="auth-form">
<div className="logo">
<CommentOutlined />
<div className="logo-text">
<div className="logo-text-first"> Chat</div>
<div className="logo-text-second"> App</div>
</div>
</div>
<Formik
onSubmit={login}
validateOnMount={true}
initialValues={defaultValues}
validationSchema={validationSchema}
>
{({ isValid, isSubmitting }) => (
<Form>
<div className="login-fields">
<div className="login-field">
<UserOutlined />
<FormField name="userName" placeholder="Username" /></div>
<ErrorMessage component='div' name="userName" className="error" /> <br />
<div className="login-field">
<LockOutlined />
<FormField name="password" placeholder="Password" type="password" />
</div>
<ErrorMessage component='div' name="password" className="error" />
</div>
<div className="auth-link-container">
Don't have an account?{" "}
<span
className="auth-link signup-text"
onClick={() => history.push("signup")}
>
Sign Up!
</span>
</div>
{!loading ?
<div className="login-buttons">
<button type="submit">
Login
</button>
<button
className="sample-account-button"
onClick={() => {
login({userName: "john doe", password: "password123"}, { setSubmitting: true })
}}>
Sample Account
</button>
</div> : <div className="loading-image"><img src={loadingAnimation} alt="" /></div>}
{!!serverError && <div className="error server-error">{serverError}</div>}
</Form>
)}
</Formik>
<div className="social-media">
<div className="social-media-header">
<hr /> Login with social media<hr />
</div>
<div className="social-login">
<div
className="google"
/*onClick={() => fb.auth.signInWithRedirect(googleProvider)}*/
onClick={() => {
alert("The limit for new accounts has been reached. Please use Sample Account")
}}
>
<GoogleOutlined /> Google
</div>
<div
className="google"
/*onClick={() => fb.auth.signInWithRedirect(facebookProvider)}*/
onClick={() => {
alert("The limit for new accounts has been reached. Please use Sample Account")
}}
>
<FacebookOutlined /> Facebook
</div>
</div>
</div>
</div>
);
}
Example #26
| Source File: Login.jsx From starter-antd-admin-crud-auth-mern with MIT License | 4 votes |
|
LoginPage = () => {
// const [error, setError] = useState();
// const { setAdminData } = useContext(AdminContext);
// const history = useHistory();
const { loading: isLoading } = useSelector(selectAuth);
// function handleChange(e) {
// const { name, value } = e.target;
// setInputs((inputs) => ({ ...inputs, [name]: value }));
// }
const dispatch = useDispatch();
const onFinish = (values) => {
dispatch(login(values));
};
return (
<>
<Layout className="layout">
<Row>
<Col span={12} offset={6}>
<Content
style={{
padding: "150px 0 180px",
maxWidth: "360px",
margin: "0 auto",
}}
>
<h1>Login</h1>
{/* {error && (
<ErrorNotice
message={error}
clearError={() => setError(undefined)}
/>
)} */}
<Divider />
<div className="site-layout-content">
{" "}
<Form
name="normal_login"
className="login-form"
initialValues={{
remember: true,
}}
onFinish={onFinish}
>
<Form.Item
name="email"
rules={[
{
required: true,
message: "Please input your Email!",
},
]}
>
<Input
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder="[email protected]"
autoComplete="off"
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: "Please input your Password!",
},
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="123456"
autoComplete="off"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<a className="login-form-forgot" href="">
Forgot password
</a>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
loading={isLoading}
>
Log in
</Button>
Or <a href="">register now!</a>
</Form.Item>
</Form>
</div>
</Content>
</Col>
</Row>
<Footer style={{ textAlign: "center" }}>
Open Source CRM based on AntD & React ©2020 Created by Salah Eddine
Lalami
</Footer>
</Layout>
</>
);
}
Example #27
| Source File: adminUsers.js From ctf_platform with MIT License | 4 votes |
|
ChangePasswordForm = (props) => {
const [form] = Form.useForm();
return (
<Form
form={form}
name="changePassword"
className="change-password-form"
onFinish={(values) => {
fetch(window.ipAddress + "/v1/account/adminChangePassword", {
method: 'post',
headers: { 'Content-Type': 'application/json', "Authorization": window.IRSCTFToken },
body: JSON.stringify({
"password": values.newPassword,
"username": props.username,
})
}).then((results) => {
return results.json(); //return data in JSON (since its JSON data)
}).then((data) => {
if (data.success === true) {
message.success({ content: "Password changed successfully." })
form.resetFields()
props.setState({ passwordResetModal: false })
}
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 Password:</h3>
<Form.Item
name="newPassword"
rules={[
{
required: true,
message: 'Please input the new password',
},
]}
hasFeedback
>
<Input.Password allowClear prefix={<LockOutlined />} placeholder="Enter a new password" />
</Form.Item>
<h3>Confirm New Password:</h3>
<Form.Item
name="confirm"
dependencies={['newPassword']}
hasFeedback
rules={[
{
required: true,
message: 'Please retype the new password to confirm',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('newPassword') === 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({ passwordResetModal: false }) }}>Cancel</Button>
<Button type="primary" htmlType="submit" icon={<KeyOutlined />}>Change Password</Button>
</Form.Item>
</Form>
);
}
Example #28
| Source File: challengesTagSort.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="pageTransition" style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal
title="Hint"
visible={this.state.hintModal}
onCancel={() => { this.setState({ hintModal: false }) }}
footer={null}
>
<p>{this.state.hintContent}</p>
</Modal>
<Modal
title={null}
visible={this.state.challengeModal}
footer={null}
bodyStyle={{ textAlign: "center" }}
onCancel={() => { this.setState({ challengeModal: false }); this.props.history.push("/Challenges/" + this.props.category); }}
>
<Tabs defaultActiveKey="challenge">
<TabPane
tab={<span><ProfileOutlined /> Challenge</span>}
key="challenge"
>
{this.state.challengeWriteup !== "" && this.state.challengeWriteup !== "CompleteFirst" && (
<Tooltip title="View writeups for this challenge">
<Button shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} onClick={() => { window.open(this.state.challengeWriteup) }} />
</Tooltip>
)}
{this.state.challengeWriteup === "" && (
<Tooltip title="Writeups are not available for this challenge">
<Button disabled shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} />
</Tooltip>
)}
{this.state.challengeWriteup === "CompleteFirst" && (
<Tooltip title="Writeups are available for this challenge but you must complete the challenge first to view it.">
<Button shape="circle" size="large" style={{ position: "absolute", right: "2ch", color: "#13a8a8" }} icon={<SolutionOutlined />} />
</Tooltip>
)}
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<div style={{ display: "flex", justifyContent: "center" }}>
<h1 style={{ fontSize: "150%", maxWidth: "35ch", whiteSpace: "initial" }}>{this.state.viewingChallengeDetails.name}
<Tooltip title="Copy challenge link to clipboard.">
<LinkOutlined style={{ color: "#1890ff", marginLeft: "0.5ch" }} onClick={
async () => {
await navigator.clipboard.writeText(window.location.href);
message.success("Challenge link copied to clipboard.")
}} /></Tooltip>
</h1>
</div>
<div>
{this.state.challengeTags}
</div>
<h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.viewingChallengeDetails.points}</h2>
<div className="challengeModal">
<MarkdownRender >{this.state.viewingChallengeDetails.description}</MarkdownRender>
</div>
<div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
{this.state.challengeHints}
</div>
</Suspense>
<div style={{ display: "flex" }}>
<SubmitFlagForm submitFlag={this.submitFlag.bind(this)} currentChallengeStatus={this.state.currentChallengeStatus} currentChallengeSolved={this.state.currentChallengeSolved}></SubmitFlagForm>
</div>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "-1vh" }}>
<p>Challenge Author: <em>{this.state.viewingChallengeDetails.author}</em></p>
<p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.viewingChallengeDetails.max_attempts}</p>
</div>
</TabPane>
<TabPane
tab={<span><UnlockOutlined /> Solves ({this.state.viewingChallengeDetails.solves.length}) </span>}
key="solves"
>
<List
itemLayout="horizontal"
dataSource={this.state.viewingChallengeDetails.solves}
locale={{
emptyText: (
<div>
<SmileOutlined style={{ fontSize: "500%" }} />
<br />
<br />
<p style={{ fontSize: "150%" }}>No solves yet. Maybe you can be the first!</p>
</div>
)
}}
renderItem={item => {
return (
<List.Item key={item}>
<List.Item.Meta
avatar={<Avatar src={"/static/profile/" + item + ".webp"} />}
title={<Link to={"/Profile/" + item}><a style={{ fontSize: "110%", fontWeight: 700 }} onClick={() => { this.setState({ challengeModal: false }) }}>{item}</a></Link>}
/>
</List.Item>
)
}
} />
</TabPane>
</Tabs>
</Modal>
<Divider style={{ marginTop: "0px" }}>Select Tags</Divider>
<span className="tag-holder" >
{Object.keys(this.state.tag).map((tag) => {
return (
<CheckableTag className="tag-select-style" key={tag} checked={this.state.selectedTags.indexOf(tag) !== -1}
onChange={(checked) => {
let selectedTags = this.state.selectedTags
if (!checked) selectedTags.splice(selectedTags.indexOf(tag), 1)
else selectedTags.push(tag)
if (selectedTags.length === 0) this.sortCats(this.state.sortType, true)
this.setState({ selectedTags: selectedTags })
}}>{tag} <span style={{ color: "#d89614" }}>({this.state.tag[tag].length})</span></CheckableTag>
)
})}
</span>
<Divider />
{this.state.tag && this.state.selectedTags.length > 0 ? (
<ChallengesTagSortList tag={this.state.tag} selectedTags={this.state.selectedTags} permissions={this.props.permissions} loadChallengeDetails={this.loadChallengeDetails.bind(this)} loadingChallenge={this.state.loadingChallenge} currentChallenge={this.state.currentChallenge} />
) : (
<List
grid={{
xs: 1,
sm: 2,
md: 2,
lg: 3,
xl: 4,
xxl: 5,
gutter: 20
}}
dataSource={this.state.challenges}
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 challenges have been released yet</h1>
</div>
)
}}
renderItem={item => {
if (item.solves.length === 0) item.firstBlood = "No First Blood Yet!"
else {
if (this.props.disableNonCatFB) {
item.firstBlood = "No First blood Yet"
for (let i = 0; i < item.solves.length; i++) {
if (this.props.userCategories[item.solves[i]] !== "none") {
item.firstBlood = item.solves[i]
break
}
}
}
else item.firstBlood = item.solves[0]
}
if (item.requires && !item.requiresSolved && this.props.permissions < 2) {
return (
<List.Item key={item._id}>
<Tooltip title={<span>Please solve "<b><u>{item.requiresName}</u></b>" to unlock this challenge.</span>}>
<div id={item._id}>
<Card
type="inner"
bordered={true}
className="card-design"
>
<Meta
description={
<div className="card-design-body" >
<LockOutlined className="disabled-style" />
<h1 className="card-design-name" >{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</Tooltip>
</List.Item>
)
}
else if (!item.solved) {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved, item.firstBlood) }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design hover"
>
<Meta
description={
<div className="card-design-body">
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
else {
return (
<List.Item key={item._id}>
<div id={item._id} onClick={() => { this.loadChallengeDetails(item._id, item.solved) }}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design solved hover"
>
<Meta
description={
<div className="card-design-body">
<CheckOutlined className="correct-style" />
<h1 className="card-design-name">{item.name}</h1>
<h1 className="card-design-points">{item.points}</h1>
<h1 className="card-design-firstblood"><img alt="First Blood" src={require("./../assets/blood.svg").default} /> {item.firstBlood}</h1>
{this.state.loadingChallenge && this.state.currentChallenge === item._id && (
<div style={{ width: "100%", height: "100%", backgroundColor: "red", zIndex: 1 }}>
<LoadingOutlined style={{ color: "#177ddc", fontSize: "500%", position: "absolute", zIndex: 1, left: "40%", top: "30%" }} />
</div>
)}
{item.visibility === false && (
<h1 style={{ color: "#d9d9d9" }}>Hidden Challenge <EyeInvisibleOutlined /></h1>
)}
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</List.Item>
)
}
}
}
/>)}
</Layout>
);
}
Example #29
| Source File: index.jsx From erp-crm with MIT License | 4 votes |
|
function SidePanelTopContent({ config, formElements }) {
const { crudContextAction, state } = useCrudContext();
const { entityDisplayLabels } = config;
const { panel, advancedBox, modal, readBox, editBox } = crudContextAction;
const { isReadBoxOpen, isEditBoxOpen, isAdvancedBoxOpen } = state;
const { result: currentItem } = useSelector(selectCurrentItem);
const dispatch = useDispatch();
const [labels, setLabels] = useState('');
useEffect(() => {
if (currentItem) {
const currentlabels = entityDisplayLabels.map((x) => currentItem[x]).join(' ');
setLabels(currentlabels);
}
}, [currentItem]);
const removeItem = () => {
dispatch(crud.currentAction({ actionType: 'delete', data: currentItem }));
modal.open();
};
const editItem = () => {
dispatch(crud.currentAction({ actionType: 'update', data: currentItem }));
editBox.open();
};
const updatePassword = () => {
dispatch(crud.currentAction({ actionType: 'update', data: currentItem }));
advancedBox.open();
};
const show =
isReadBoxOpen || isEditBoxOpen || isAdvancedBoxOpen ? { opacity: 1 } : { opacity: 0 };
return (
<>
<Row style={show}>
{/* <Col span={13}>
<p style={{ marginBottom: "10px" }}>{labels}</p>
</Col> */}
<Col span={24}>
<Button
onClick={removeItem}
type="text"
icon={<DeleteOutlined />}
size="small"
style={{
float: 'left',
marginRight: '5px',
marginLeft: '-5px',
}}
>
remove
</Button>
<Button
onClick={editItem}
type="text"
icon={<EditOutlined />}
size="small"
style={{ float: 'left', marginRight: '5px' }}
>
edit
</Button>
<Button
onClick={updatePassword}
type="text"
icon={<LockOutlined />}
size="small"
style={{ float: 'left', marginRight: '0px' }}
>
update password
</Button>
</Col>
<Col span={24}></Col>
<div className="space10"></div>
</Row>
<ReadItem config={config} />
<UpdateForm config={config} formElements={formElements} />
<UpdatePassword config={config} />
</>
);
}
