@ant-design/icons#CommentOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#CommentOutlined.
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: FeedbackButton.jsx From ui with MIT License | 4 votes |
|
FeedbackButton = () => {
const [visible, setVisible] = useState(false);
const [feedbackText, setFeedbackText] = useState('');
const submitFeedback = async () => {
setVisible(false);
const pageContext = [
{
type: 'mrkdwn',
text: '*URL posted from:*',
},
{
type: 'mrkdwn',
text: window.location.href,
},
];
let user;
try {
user = await Auth.currentAuthenticatedUser();
} catch (e) {
console.warn('User not authenticated');
}
const userContext = user ? [
{
type: 'mrkdwn',
text: '*User email:*',
},
{
type: 'mrkdwn',
text: user.attributes.email,
},
{
type: 'mrkdwn',
text: '*User name:*',
},
{
type: 'plain_text',
text: user.attributes.name,
},
{
type: 'mrkdwn',
text: '*User UUID:*',
},
{
type: 'plain_text',
text: user.username,
},
] : [];
const feedbackData = {
blocks: [
{
type: 'section',
text: {
type: 'plain_text',
text: feedbackText,
},
},
{
type: 'context',
elements: [
...pageContext,
...userContext,
],
},
],
};
try {
const { getWebhookUrl } = await import('utils/slack');
const r = await fetch(getWebhookUrl(), {
method: 'POST',
body: JSON.stringify(feedbackData),
});
if (!r.ok) {
throw new Error('Invalid status code returned.');
}
setFeedbackText('');
pushNotificationMessage('success', endUserMessages.FEEDBACK_SUCCESSFUL);
} catch (e) {
handleError(e, endUserMessages.FEEDBACK_ERROR);
}
};
const overlay = () => (
<div>
<Card size='small'>
<Space direction='vertical' style={{ width: '100%' }}>
<TextArea
value={feedbackText}
onChange={(e) => {
setFeedbackText(e.target.value);
}}
rows={4}
placeholder={'Please write your feedback/issues here. We\'ll get back to you ASAP'}
bordered={false}
ref={(ref) => { if (ref) { ref.focus(); } }}
style={{
resize: 'none', width: 300, border: 'none', outline: 'none',
}}
/>
<Space>
<Button size='small' onClick={() => setVisible(false)}>Cancel</Button>
<Button size='small' type='primary' onClick={submitFeedback}>Send</Button>
</Space>
</Space>
</Card>
</div>
);
return (
<Dropdown
visible={visible}
onVisibleChange={(v) => setVisible(v)}
overlay={overlay}
placement='bottomRight'
trigger='click'
>
<Button type='dashed' icon={<CommentOutlined />}>
Feedback or issues?
<DownOutlined />
</Button>
</Dropdown>
);
}
Example #2
| 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 #3
| 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>
);
}
