@ant-design/icons#LeftCircleOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#LeftCircleOutlined.
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: Grid.js From label-studio-frontend with Apache License 2.0 | 5 votes |
|
render() {
const i = this.state.item;
const { annotations, store: { selected } } = this.props;
const isRenderingNext = i < annotations.length && annotations[i] === selected;
return (
<div className={styles.container}>
<div ref={this.container} className={styles.grid}>
{annotations.filter(c => !c.hidden).map((c) => (
<div id={`c-${c.id}`} key={`anno-${c.id}`} style={{ position: 'relative' }}>
<EntityTab
entity={c}
onClick={() => this.select(c)}
prediction={c.type === "prediction"}
bordered={false}
style={{ height: 44 }}
/>
{!this.state.loaded.has(c.id) && (
<div style={{
top: 0,
left: 0,
position: 'absolute',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<Spin size="large" />
</div>
)}
</div>
))}
{isRenderingNext && (
<div id={`c-tmp`} key={`anno-tmp`} style={{ opacity: 0, position: 'relative', right: 99999 }}>
<EntityTab
entity={selected}
prediction={selected.type === "prediction"}
bordered={false}
style={{ height: 44 }}
/>
<Item root={this.props.root} onFinish={this.onFinish} key={i} annotation={selected} />
</div>
)}
</div>
<Button type="text" onClick={this.left} className={styles.left} icon={<LeftCircleOutlined />} />
<Button type="text" onClick={this.right} className={styles.right} icon={<RightCircleOutlined />} />
</div>
);
}
Example #2
| Source File: challenges.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<div id="Header" className="challenge-header-style">
<h1 style={{
color: "white",
fontSize: "280%",
letterSpacing: ".3rem",
fontWeight: 300,
marginBottom: "10px"
}}> CHALLENGES
</h1>
{this.state.currentCategory && (<h4 className="category-header">{this.state.currentCategory}</h4>)}
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignContent: "center", marginBottom: "10px", textAlign: "center" }}>
<Button size="large" disabled={!this.state.currentCategory} icon={<LeftCircleOutlined />} style={{ backgroundColor: "#1f1f1f" }} onClick={() => { this.props.history.push("/Challenges"); this.setState({ currentCategory: false, foundChallenge: false }) }}>Back</Button>
{this.state.currentCategory && this.state.countDownTimerStrings[this.state.currentCategory] && (
<h1 style={{
color: "white",
fontSize: "170%",
letterSpacing: ".3rem",
fontWeight: 300,
color: "#d89614",
}}>
{this.state.countDownTimerStrings[this.state.currentCategory]}
</h1>
)}
<div>
<Select disabled={!this.state.currentCategory} defaultValue="points" style={{ width: "20ch", backgroundColor: "#1f1f1f" }} onChange={this.sortCats.bind(this)}>
<Option value="points">Sort by ↑Points</Option>
<Option value="pointsrev">Sort by ↓Points</Option>
<Option value="abc">Sort A→Z</Option>
<Option value="abcrev">Sort Z→A</Option>
</Select>
</div>
</div>
<div>
<Transition
items={this.state.loadingChall}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}>
{(props, toggle) => {
if (toggle === true) {
return (<animated.div style={{ ...props, position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</animated.div>)
}
else {
return (<animated.div style={{ ...props }}>
{!this.state.currentCategory && (
<List
grid={{
xs: 1,
sm: 2,
md: 2,
lg: 3,
xl: 3,
xxl: 4,
gutter: 20
}}
dataSource={this.state.categories}
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 => {
return (
<List.Item key={item._id}>
<Link to={"/Challenges/" + item._id}>
<div onClick={() => {
this.setState({ currentCategory: item._id, currentSolvedStatus: item.challenges, currentCategoryChallenges: [this.state.originalData[item._id]] });
}}>
<Card
hoverable
type="inner"
bordered={true}
className="card-design hover"
cover={<img style={{ overflow: "hidden" }} alt="Category Card" src={"/static/category/" + item._id + ".webp"} />}
>
<Meta
title={
<div style={{ display: "flex", flexDirection: "column", textAlign: "center" }}>
<div id="Title" style={{ display: "flex", color: "#f5f5f5", alignItems: "center", marginBottom: "2ch" }}>
<h1 style={{ color: "white", fontSize: "2.5ch", width: "40ch", textOverflow: "ellipsis", overflow: "hidden" }}>{item._id}</h1>
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
<h2 style={{ fontSize: "2.5ch", marginLeft: "1vw", color: "#faad14", fontWeight: 700 }}>{item.challenges.solved}/{item.challenges.challenges}</h2>
<Progress type="circle" percent={item.challenges.percentage} width="7ch" strokeColor={{
'0%': '#177ddc',
'100%': '#49aa19',
}} style={{ marginLeft: "1vw", fontSize: "2ch" }} />
</div>
</div>
<div>
{"time" in item.meta && (
<span style={{
color: "#d89614",
letterSpacing: ".1rem",
fontWeight: 300,
whiteSpace: "initial"
}}>{this.state.countDownTimerStrings[item._id]}</span>
)}
{item.meta.visibility === false && (
<h4 style={{ color: "#d9d9d9" }}>Hidden Category <EyeInvisibleOutlined /></h4>
)}
</div>
</div>
}
/>
</Card> {/*Pass entire datasource as prop*/}
</div>
</Link>
</ List.Item>
)
}
}
/>
)}
{this.state.currentCategory && (
<ChallengesTagSort originalData={this.state.originalData} permissions={this.props.permissions} disableNonCatFB={this.state.disableNonCatFB} userCategories={this.state.userCategories} obtainScore={this.props.obtainScore.bind(this)} match={this.props.match} history={this.props.history} foundChallenge={this.state.foundChallenge} currentCategoryChallenges={this.state.currentCategoryChallenges} handleRefresh={this.handleRefresh.bind(this)} ref={this.tagSortRef} category={this.state.currentCategory}></ChallengesTagSort>
)}
</animated.div>)
}
}
}
</Transition>
</div>
</Layout>
);
}
Example #3
| 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>
);
}
