@ant-design/icons#LockFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#LockFilled.
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: PluginDrawer.tsx From posthog-foss with MIT License | 6 votes |
|
SecretFieldIcon = (): JSX.Element => (
<>
<Tooltip
placement="topLeft"
title="This is a secret write-only field. Its value is not available after saving."
>
<LockFilled style={{ marginRight: 5 }} />
</Tooltip>
</>
)
Example #2
| Source File: UserAvatar.tsx From condo with MIT License | 6 votes |
|
UserAvatar: React.FC<IUserAvatar> = (props) => {
const auth = useAuth()
const {
borderRadius = 8,
isBlocked = false,
iconSize = '30px',
} = props
const avatarUrl = get(auth, ['user', 'avatar', 'publicUrl'])
const AvatarContent = avatarUrl
? <ResponsiveAvatar src={avatarUrl} borderRadius={borderRadius}/>
: <DefaultAvatarContainer borderRadius={borderRadius}>
<AvatarWrapper>
<DefaultAvatarSvg/>
</AvatarWrapper>
</DefaultAvatarContainer>
return isBlocked
? (
<BlockedIconWrapper>
<BlockedIcon>
<LockFilled style={{ fontSize: iconSize }} />
</BlockedIcon>
<OpacityWrapper>
{AvatarContent}
</OpacityWrapper>
</BlockedIconWrapper>
)
: AvatarContent
}
Example #3
| Source File: ChangePassword.tsx From mayoor with MIT License | 5 votes |
|
ChangePassword: React.FC = () => {
const { t } = useTranslation();
const [changePassword, { loading }] = useMutation<
ChangePasswordMutation,
ChangePasswordMutationVariables
>(CHANGE_PASSWORD_MUTATION);
const formik = useFormik<FormValues>({
initialValues: {
oldPassword: '',
newPassword: '',
newPasswordRepeat: '',
},
validate: (values) => {
const errors: FormikErrors<FormValues> = {};
if (values.newPassword !== values.newPasswordRepeat) {
errors.newPasswordRepeat = t('new_passwords_must_match');
}
return errors;
},
onSubmit: async ({ oldPassword, newPassword }) => {
try {
await changePassword({ variables: { oldPassword, newPassword } });
message.success(t('pwd_changed'));
formik.resetForm();
} catch (err) {
if (err instanceof ApolloError) {
if (err.graphQLErrors[0].extensions?.code === 'INVALID_PASSWORD') {
formik.setErrors({
oldPassword: t('old_pwd_incorrect'),
});
} else {
message.error(t('error_changing_pwd'));
}
}
}
},
});
const getPasswordField = (name: keyof FormValues, label: string) => {
const errorMessage = formik.touched[name] && formik.errors[name];
const status = errorMessage ? 'error' : '';
return (
<FormItemStyled validateStatus={status} help={errorMessage}>
<Input
prefix={<LockFilled />}
placeholder={label}
name={name}
onChange={formik.handleChange}
value={formik.values[name]}
type="password"
/>
</FormItemStyled>
);
};
return (
<form onSubmit={formik.handleSubmit}>
<h4>{t('Change your password')}</h4>
{getPasswordField('oldPassword', t('Old Password'))}
<Row gutter={16}>
<Col span={12}>{getPasswordField('newPassword', t('New Password'))}</Col>
<Col span={12}>
{getPasswordField('newPasswordRepeat', t('Repeat New Password'))}
</Col>
</Row>
<Button type="primary" htmlType="submit" loading={loading}>
{t('Change password')}
</Button>
</form>
);
}
Example #4
| Source File: index.tsx From foodie with MIT License | 4 votes |
|
Login: React.FC = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isPasswordVisible, setPasswordVisible] = useState(false);
const dispatch = useDispatch();
useDocumentTitle('Login to Foodie');
useEffect(() => {
return () => {
dispatch(setAuthErrorMessage(null));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const { error, isLoading } = useSelector((state: IRootReducer) => ({
error: state.error.authError,
isLoading: state.loading.isLoadingAuth
}));
const onUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const val = e.target.value.trim();
setUsername(val);
};
const onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const val = e.target.value;
setPassword(val);
};
const onSubmit = async (e: FormEvent) => {
e.preventDefault();
if (username && password) {
dispatch(loginStart(username, password));
}
};
return (
<div className="min-h-screen flex bg-white">
<div
className="relative laptop:w-7/12 h-screen laptop:p-8 hidden laptop:justify-start laptop:items-end laptop:!bg-cover laptop:!bg-no-repeat laptop:!bg-center laptop:flex"
style={{
background: `#f7f7f7 url(${bg})`
}}
>
{/* --- LOGO --- */}
<Link className="absolute left-8 top-8" to="/">
<img src={logo} alt="Foodie Logo" className="w-24" />
</Link>
{/* -- INFO --- */}
<h3 className="animate-fade text-white w-9/12 mb-14">
Looking for a new idea for your next menu? You're in the right place.
</h3>
{/* --- CREDITS LINK --- */}
<a
className="animate-fade absolute bottom-8 left-8 text-1xs text-white underline"
target="_blank"
rel="noreferrer"
href="https://infinityrimapts.com/5-reasons-host-dinner-party/friends-enjoying-a-meal/"
>
Photo: Credits to the photo owner
</a>
</div>
<div className="animate-fade laptop:w-5/12 w-full flex items-center flex-col justify-center pt-8 laptop:pt-0 relative">
<Link to="/">
<img
src={logo_dark}
alt="Foodie Logo"
className="w-24 relative mx-auto laptop:hidden"
/>
</Link>
{error && (
<div className="py-2 w-full text-center bg-red-100 border-red-300 absolute top-0 left-0">
<p className="text-red-500">{error?.error?.message || 'Something went wrong :('}</p>
</div>
)}
<div className="w-full laptop:px-14 px-8 text-center laptop:text-left">
<div>
<h2 className="mt-6 text-xl laptop:text-2xl font-extrabold text-gray-900">
Login to Foodie
</h2>
</div>
<form className="mt-8 space-y-6" onSubmit={onSubmit}>
<div className="rounded-md shadow-sm -space-y-px">
<div className="mb-2">
<label htmlFor="username" className="sr-only">Username</label>
<input
id="username"
name="username"
type="text"
autoComplete="username"
value={username}
required
maxLength={30}
className={`text-center ${error ? 'input--error' : ''} laptop:text-left`}
placeholder="Username"
readOnly={isLoading}
onChange={onUsernameChange}
/>
</div>
<div className="relative">
<label htmlFor="password" className="sr-only">Password</label>
<input
id="password"
name="password"
type={isPasswordVisible ? 'text' : 'password'}
autoComplete="current-password"
required
className={`text-center !pr-12 ${error ? 'input--error' : ''} laptop:text-left`}
placeholder="Password"
minLength={8}
maxLength={100}
onChange={onPasswordChange}
readOnly={isLoading}
value={password}
/>
<div className="absolute right-0 top-0 bottom-0 my-auto flex items-center justify-center w-12 h-12 hover:bg-gray-200 cursor-pointer rounded-tr-full rounded-br-full z-10">
{isPasswordVisible ? (
<EyeInvisibleOutlined
className="h-full w-full outline-none text-gray-500"
onClick={() => setPasswordVisible(false)}
/>
) : (
<EyeOutlined
className="h-full w-full outline-none"
onClick={() => setPasswordVisible(true)}
/>
)}
</div>
</div>
</div>
<Link className="font-medium text-sm text-gray-400 inline-block laptop:block my-4 laptop:mb-0 hover:text-indigo-500 underline laptop:w-2/4 laptop:pl-4" to="/forgot-password">
Forgot your password?
</Link>
<button type="submit" className="button--stretch" disabled={isLoading}>
<LockFilled className="absolute left-8 top-0 bottom-0 my-auto" />
{isLoading ? 'Logging In...' : 'Login'}
</button>
{/* -- TOO HARD TO REPLICATE PSEUDO IN TAILWIND :() */}
<i className="social-login-divider">OR</i>
<div className="flex justify-between space-x-2">
<SocialLogin isLoading={isLoading} />
</div>
</form>
<div className="text-center mt-8">
<Link
className="underline font-medium"
onClick={(e) => isLoading && e.preventDefault()}
to={REGISTER}
>
I dont have an account
</Link>
</div>
{/* --- COPYRIGHT -- */}
<span className="text-gray-400 text-xs mx-auto text-center block mt-4">
©Copyright {new Date().getFullYear()} Foodie
</span>
</div>
</div>
</div>
);
}
Example #5
| Source File: LoginForm.tsx From mayoor with MIT License | 4 votes |
|
LoginForm: React.FC = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const [login, { loading }] = useMutation<LoginMutation, LoginMutationVariables>(LOGIN_MUTATION);
const { errors, handleSubmit, values, handleChange, isValid, setErrors, touched } = useFormik<
FormValues
>({
initialValues: {
username: '',
password: '',
},
validate: (values) => {
const errors: FormikErrors<FormValues> = {};
if (!values.password) {
errors.password = t('password_required');
}
if (!values.username) {
errors.username = t('username_required');
}
return errors;
},
onSubmit: async ({ username, password }) => {
try {
const result = await login({ variables: { email: username, password } });
if (result.data?.login) {
dispatch({
type: 'SET_CURRENT_USER',
user: result.data.login.user,
});
localStorage.setItem('auth-token', result.data.login.token);
}
} catch (err) {
if (err instanceof ApolloError) {
if (err.graphQLErrors[0].extensions?.code === 'USER_NOT_FOUND') {
setErrors({
username: t('user_not_found'),
});
}
if (err.graphQLErrors[0].extensions?.code === 'INVALID_PASSWORD') {
setErrors({
password: t('invalid_password'),
});
}
}
}
},
});
return (
<CenteredWrapper>
<S.LoginWrapper onSubmit={handleSubmit}>
<S.Logo src={LogoImage} />
<S.FormItemStyled
validateStatus={touched.username && errors.username ? 'error' : ''}
help={touched.username && errors.username}
>
<Input
prefix={<UserOutlined />}
placeholder={t('Username')}
name="username"
onChange={handleChange}
value={values.username}
data-test-id="login-username"
/>
</S.FormItemStyled>
<S.FormItemStyled
validateStatus={touched.password && errors.password ? 'error' : ''}
help={touched.password && errors.password}
>
<Input
prefix={<LockFilled />}
placeholder={t('Password')}
name="password"
onChange={handleChange}
value={values.password}
type="password"
data-test-id="login-password"
/>
</S.FormItemStyled>
<Button
icon={<LoginOutlined />}
loading={loading}
disabled={!isValid}
htmlType="submit"
data-test-id="login-submit-button"
>
{t('Log In')}
</Button>
<S.LanguageSwitchWrapper>
<LanguageSwitch />
</S.LanguageSwitchWrapper>
</S.LoginWrapper>
</CenteredWrapper>
);
}
