react-icons/fi#FiLogIn TypeScript Examples
The following examples show how to use
react-icons/fi#FiLogIn.
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.tsx From ecoleta with MIT License | 6 votes |
|
Home = () => {
return (
<div id="page-home">
<div className="content">
<header>
<img src={logo} alt="Ecoleta Logo"/>
</header>
<main>
<h1>Seu marketplace de coleta de resíduos.</h1>
<p>Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.</p>
<Link to="/create-point">
<span>
<FiLogIn />
</span>
<strong>Cadastre um ponto de coleta</strong>
</Link>
</main>
</div>
</div>
);
}
Example #2
| Source File: index.tsx From ecoleta with MIT License | 6 votes |
|
Home = () => {
return (
<div id="page-home">
<div className="content">
<header>
<img src={logo} alt="Ecoleta" />
</header>
<main>
<h1>Seu marketplace de coleta de resíduos.</h1>
<p>
Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.
</p>
<Link to="/create-point">
<span>
<FiLogIn />
</span>
<strong>Cadastre um pronto de coleta</strong>
</Link>
</main>
</div>
</div>
);
}
Example #3
| Source File: index.tsx From ecoleta with MIT License | 6 votes |
|
Home: React.FC = () => {
const { title } = useContext(ThemeContext);
return (
<Container>
<Content>
<header>
{title === 'light' ? (
<img src={logo} alt="Ecoleta" />
) : (
<img src={logoDark} alt="Ecoleta" />
)}
<Link to="/create-point">
<FiLogIn />
Cadastre um ponto de coleta
</Link>
</header>
<Main>
<h1>Seu marketplace de coleta de resíduos.</h1>
<p>
Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.
</p>
<Link to="/list-points">
<span>
<FiArchive />
</span>
<strong>Listar Pontos de coleta</strong>
</Link>
</Main>
</Content>
</Container>
);
}
Example #4
| Source File: index.tsx From nlw-01-omnistack with MIT License | 6 votes |
|
Home = () => {
return (
<div id="page-home">
<div className="content">
<header>
<img src={logo} alt="Ecoleta" />
</header>
<main>
<h1>Seu marketplace de coleta de resíduos.</h1>
<p>Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.</p>
<Link to="/create-point">
<span>
<FiLogIn />
</span>
<strong>Cadastre um ponto de coleta</strong>
</Link>
</main>
</div>
</div>
)
}
Example #5
| Source File: index.tsx From nlw-ecoleta with MIT License | 6 votes |
|
export function Home() {
return (
<div id="page-home">
<div className='content'>
<header>
<img src={logo} alt="Ecoleta" />
</header>
<main>
<h1>Seu maketplace de coleta de resíduos.</h1>
<p>Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.</p>
<Link to="/create-point">
<span> <FiLogIn /> </span>
<strong>Cadastre um ponto de coleta</strong>
</Link>
</main>
</div>
</div>
);
}
Example #6
| Source File: index.tsx From NextLevelWeek with MIT License | 6 votes |
|
Home: React.FC = () => {
return (
<div id="page-home">
<div className="content">
<header>
<img src={logo} alt="Ecoleta" />
</header>
<main>
<h1>Seu marketplace de coleta de resíduos.</h1>
<p>
Ajudamos pessoas a encontrarem pontos de coleta de forma
eficiente
</p>
<Link to="/create">
<span>
<FiLogIn />
</span>
<strong>Cadastre um ponto de coleta</strong>
</Link>
</main>
</div>
</div>
);
}
Example #7
| Source File: index.tsx From NLW-1.0 with MIT License | 6 votes |
|
Home: React.FC = () => {
return (
<div id="page-home">
<div className="content">
<header>
<img src={logo} alt="Ecoleta" />
</header>
<main>
<h1>Seu marketplace de coleta de resíduos.</h1>
<p>
Ajudamos pessoas a encontrarem pontos de coleta de forma eficiente.
</p>
<Link to="/create-point">
<span>
<FiLogIn />
</span>
<strong>Cadastre um ponto de coleta</strong>
</Link>
</main>
</div>
</div>
);
}
Example #8
| Source File: styles.ts From vagasExplorer with MIT License | 5 votes |
|
IconLogin = styled(FiLogIn)``
Example #9
| Source File: UserBox.tsx From tobira with Apache License 2.0 | 5 votes |
|
Menu: React.FC<MenuProps> = ({ close, container }) => {
const { t } = useTranslation();
type State = "main" | "language";
const [state, setState] = useState<State>("main");
const userState = useUser();
const user = userState === "none" || userState === "unknown" ? null : userState;
// Close menu on clicks anywhere outside of it.
useOnOutsideClick(container, close);
const items = match(state, {
main: () => <>
{/* Login button if the user is NOT logged in */}
{!user && (
<MenuItem
icon={<FiLogIn />}
borderBottom
linkTo={CONFIG.auth.loginLink ?? LOGIN_PATH}
htmlLink={!!CONFIG.auth.loginLink}
css={{
color: "var(--nav-color)",
[`@media not all and (max-width: ${BREAKPOINT_MEDIUM}px)`]: {
display: "none",
},
}}
>{t("user.login")}</MenuItem>
)}
{user && <>
{user.canUpload && <MenuItem
icon={<FiUpload />}
linkTo={"/~upload"}
onClick={() => close()}
>{t("upload.title")}</MenuItem>}
<MenuItem
icon={<FiFilm />}
linkTo="/~manage"
onClick={() => close()}
>{t("user.manage-content")}</MenuItem>
</>}
<MenuItem icon={<HiOutlineTranslate />} onClick={() => setState("language")}>
{t("language")}
</MenuItem>
{/* Logout button if the user is logged in */}
{user && <Logout />}
</>,
language: () => <>
<MenuItem icon={<FiChevronLeft />} onClick={() => setState("main")} borderBottom>
{t("back")}
</MenuItem>
<LanguageMenu />
</>,
});
return (
<ul css={{
position: "absolute",
zIndex: 1000,
top: "100%",
right: 8,
marginTop: 8,
borderRadius: 4,
border: "1px solid var(--grey80)",
boxShadow: "1px 1px 5px var(--grey92)",
backgroundColor: "white",
minWidth: 200,
paddingLeft: 0,
margin: 0,
overflow: "hidden",
}}>{items}</ul>
);
}
Example #10
| Source File: UserBox.tsx From tobira with Apache License 2.0 | 5 votes |
|
LoggedOut: React.FC<LoggedOutProps> = ({ menu }) => {
const { t } = useTranslation();
const ref = useRef(null);
return (
<div ref={ref} css={{ display: "flex", padding: "8px 0" }}>
<Link
to={CONFIG.auth.loginLink ?? LOGIN_PATH}
onClick={() => {
// If we are linking to our internal login page, store a
// redirect link in session storage.
if (!CONFIG.auth.loginLink) {
window.sessionStorage.setItem(REDIRECT_STORAGE_KEY, window.location.href);
}
}}
htmlLink={!!CONFIG.auth.loginLink}
css={{
alignSelf: "center",
borderRadius: 10,
cursor: "pointer",
padding: "5px 14px",
marginRight: 8,
display: "flex",
gap: 8,
alignItems: "center",
backgroundColor: "var(--nav-color)",
color: "var(--nav-color-bw-contrast)",
"&:hover": {
backgroundColor: "var(--nav-color-dark)",
color: "var(--nav-color-bw-contrast)",
},
"&:focus-visible": {
outline: "none",
boxShadow: "0 0 0 2px black",
},
[`@media (max-width: ${BREAKPOINT_MEDIUM}px)`]: {
display: "none",
},
}}
><FiLogIn />{t("user.login")}</Link>
<UserSettingsIcon t={t} onClick={menu.toggle} />
{menu.isOpen && <Menu close={menu.close} container={ref} />}
</div>
);
}
Example #11
| Source File: index.tsx From gobarber-web with MIT License | 5 votes |
|
SignIn: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const history = useHistory();
const { signIn } = useAuth();
const { addToast } = useToast();
const handleSubmit = useCallback(
async (data: SignInFormData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.required('E-mail é obrigatório')
.email('Digite um e-mail válido'),
password: Yup.string().required('Senha é obrigatória'),
});
await schema.validate(data, { abortEarly: false });
await signIn({
email: data.email,
password: data.password,
});
history.push('/dashboard');
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na autenticação',
description:
'Ocorreu um error ao fazer login, cheque as credenciais.',
});
}
},
[signIn, addToast, history],
);
return (
<Container>
<Content>
<AnimationContainer>
<img src={logoImg} alt="GoBarber" />
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Faça seu logon</h1>
<Input name="email" icon={FiMail} placeholder="E-mail" />
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Senha"
/>
<Button type="submit">Entrar</Button>
<Link to="/forgot-password">Esqueci minha senha</Link>
</Form>
<Link to="/signup">
<FiLogIn />
Criar conta
</Link>
</AnimationContainer>
</Content>
<Background />
</Container>
);
}
Example #12
| Source File: index.tsx From gobarber-web with MIT License | 5 votes |
|
ForgotPassword: React.FC = () => {
const [loading, setLoading] = useState(false);
const formRef = useRef<FormHandles>(null);
// const history = useHistory();
const { addToast } = useToast();
const handleSubmit = useCallback(
async (data: ForgotPasswordFormData) => {
try {
setLoading(true);
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.required('E-mail é obrigatório')
.email('Digite um e-mail válido'),
});
await schema.validate(data, { abortEarly: false });
await api.post('/password/forgot', {
email: data.email,
});
addToast({
type: 'success',
title: 'E-mail de recuperação enviado',
description:
'Enviamos um e-mail para confirmar a recuperação de senha, cheque sua caixa de entrada.',
});
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na recuperação de senha',
description:
'Ocorreu um error ao tentar realizar a recuperação de senha',
});
} finally {
setLoading(false);
}
},
[addToast],
);
return (
<Container>
<Content>
<AnimationContainer>
<img src={logoImg} alt="GoBarber" />
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Recuperar senha</h1>
<Input name="email" icon={FiMail} placeholder="E-mail" />
<Button loading={loading} type="submit">
Recuperar
</Button>
</Form>
<Link to="/">
<FiLogIn />
Voltar ao login
</Link>
</AnimationContainer>
</Content>
<Background />
</Container>
);
}
Example #13
| Source File: index.tsx From gobarber-project with MIT License | 4 votes |
|
ForgotPassword: React.FC = () => {
const [loading, setLoading] = useState(false);
const formRef = useRef<FormHandles>(null);
const { addToast } = useToast();
const handleSubmit = useCallback(
async (data: ForgotPasswordFormData) => {
try {
setLoading(true);
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.required('E-mail obrigatório')
.email('Digite um e-mail válido'),
});
await schema.validate(data, {
abortEarly: false,
});
await api.post('/password/forgot', {
email: data.email,
});
addToast({
type: 'success',
title: 'E-mail de recuperação enviado',
description:
'Enviamos um e-mail para confirmar a recuperação de senha, cheque sua caixa de entrada',
});
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na recuperação de senha',
description:
'Ocorreu um erro ao tentar realizar a recuperação de senha, tente novamente.',
});
} finally {
setLoading(false);
}
},
[addToast],
);
return (
<Container>
<Content>
<AnimationContainer>
<img src={logoImg} alt="GoBarber" />
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Recuperar senha</h1>
<Input name="email" icon={FiMail} placeholder="E-mail" />
<Button loading={loading} type="submit">
Recuperar
</Button>
</Form>
<Link to="/">
<FiLogIn />
Voltar ao login
</Link>
</AnimationContainer>
</Content>
<Background />
</Container>
);
}
Example #14
| Source File: index.tsx From gobarber-project with MIT License | 4 votes |
|
SignIn: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const [loading, setLoading] = useState(false);
const { signIn } = useAuth();
const { addToast } = useToast();
const history = useHistory();
const handleSubmit = useCallback(
async (data: SignInFormData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.email('Digite um e-mail válido')
.required('E-mail obrigatório'),
password: Yup.string().required('Senha obrigatória'),
});
await schema.validate(data, {
abortEarly: false,
});
setLoading(true);
await signIn({
email: data.email,
password: data.password,
});
setLoading(false);
history.push('/dashboard');
} catch (err) {
setLoading(false);
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na autenticação',
description: 'Ocorreu um erro ao fazer login, cheque as credenciais',
});
}
},
[signIn, addToast, history],
);
return (
<Container>
<Content>
<AnimationContainer>
<img src={logo} alt="GoBarber" />
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Faça seu logon</h1>
<Input
name="email"
icon={FiMail}
type="text"
placeholder="E-mail"
/>
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Senha"
/>
<Button loading={loading} type="submit">
Entrar
</Button>
<Link to="/forgot-password">Esqueci minha senha</Link>
</Form>
<Link to="signup">
<FiLogIn />
Criar conta
</Link>
</AnimationContainer>
</Content>
<Background />
</Container>
);
}
Example #15
| Source File: index.tsx From GoBarber with MIT License | 4 votes |
|
ForgotPassword: React.FC = () => {
const [loading, setLoading] = useState<boolean>(false);
const formRef = useRef<FormHandles>(null);
const { addToast } = useToast();
const handleSubmit = useCallback(
async (data: ForgotPasswordFormData) => {
try {
setLoading(true);
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.email('Digite email válido')
.required('Email obrigatório'),
});
await schema.validate(data, {
abortEarly: false,
});
await api.post('/password/forgot', {
email: data.email,
});
addToast({
type: 'success',
title: 'Email de recuperação enviado',
description:
'Enviamos um email para confirmar a recuperação de senha',
});
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na recuperação de senha',
description: 'Ocorreu um erro ao tentar recuperar a senha',
});
} finally {
formRef.current?.setFieldValue('email', '');
setLoading(false);
}
},
[addToast],
);
return (
<Container>
<Content>
<AnimationContainer>
<img src={logoImg} alt="logo" />
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Recuperar senha</h1>
<Input
name="email"
icon={FiMail}
type="email"
placeholder="E-mail"
/>
<Button isLoading={loading} type="submit">
Recuperar
</Button>
</Form>
<Link to="/">
<FiLogIn />
Voltar ao Login
</Link>
</AnimationContainer>
</Content>
<Background />
</Container>
);
}
Example #16
| Source File: index.tsx From GoBarber with MIT License | 4 votes |
|
SignIn: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const history = useHistory();
const { signIn } = useAuth();
const { addToast } = useToast();
const handleSubmit = useCallback(
async (data: SignInFormData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.email('Digite email válido')
.required('Email obrigatório'),
password: Yup.string().required('Senha obrigatória'),
});
await schema.validate(data, {
abortEarly: false,
});
await signIn({
email: data.email,
password: data.password,
});
history.push('/dashboard');
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na autenticação',
description:
'Ocorreu um erro ao fazer login, cheque suas credenciais',
});
}
},
[signIn, addToast, history],
);
return (
<Container>
<Content>
<AnimationContainer>
<img src={logoImg} alt="logo" />
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Faça seu logon</h1>
<Input
name="email"
icon={FiMail}
type="email"
placeholder="E-mail"
/>
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Senha"
/>
<Button type="submit">Entrar</Button>
<Link to="/forgot">Esqueci minha senha</Link>
</Form>
<Link to="/signup">
<FiLogIn />
Criar conta
</Link>
</AnimationContainer>
</Content>
<Background />
</Container>
);
}
Example #17
| Source File: index.tsx From front-entenda-direito with GNU General Public License v3.0 | 4 votes |
|
SignIn: React.FC = () => {
const formRef = useRef<FormHandles>(null);
const { signIn } = useAuth();
const { addToast } = useToast();
const history = useHistory();
const handleSubmit = useCallback(
async (data: SignInFormData) => {
try {
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.required('E-mail obrigatório')
.email('Digite um e-mail válido'),
password: Yup.string().required('Senha obrigatória'),
});
await schema.validate(data, {
abortEarly: false,
});
await signIn({
email: data.email,
password: data.password,
});
history.push('/dashboard');
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na autenticação',
description: 'Ocorreu um erro ao fazer login, cheque as credenciais.',
});
}
},
[signIn, history, addToast],
);
return (
<Container>
<Content>
<AnimationContainer>
<img src={logoImg} alt="Entenda Direito" />
<h1>ENTENDA DIREITO</h1>
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Faça seu logon</h1>
<Input name="email" icon={FiMail} placeholder="E-mail" />
<Input
name="password"
icon={FiLock}
type="password"
placeholder="Password"
/>
<Button type="submit">Entrar</Button>
<Link to="/forgot-password">Esqueci minha senha</Link>
</Form>
<Link to="/signup">
<FiLogIn />
Criar Conta
</Link>
</AnimationContainer>
</Content>
<Background />
</Container>
);
}
Example #18
| Source File: index.tsx From front-entenda-direito with GNU General Public License v3.0 | 4 votes |
|
ForgotPassword: React.FC = () => {
const [loading, setLoading] = useState(false);
const formRef = useRef<FormHandles>(null);
const { addToast } = useToast();
const handleSubmit = useCallback(
async (data: ForgotPasswordFormData) => {
try {
setLoading(true);
formRef.current?.setErrors({});
const schema = Yup.object().shape({
email: Yup.string()
.required('E-mail obrigatório')
.email('Digite um e-mail válido'),
});
await schema.validate(data, {
abortEarly: false,
});
await api.post('/password/forgot', {
email: data.email,
});
addToast({
type: 'success',
title: 'E-mail de recuperação de senha enviado',
description:
'Enviamos um e-mail para confirmar a recuperação de senha, cheque sua caixa de entrada.',
});
} catch (err) {
if (err instanceof Yup.ValidationError) {
const errors = getValidationErrors(err);
formRef.current?.setErrors(errors);
return;
}
addToast({
type: 'error',
title: 'Erro na recuperação de senha',
description:
'Ocorreu um erro ao tentar realizar a recuperação de senha, tente novamente.',
});
} finally {
setLoading(false);
}
},
[addToast],
);
return (
<Container>
<Background />
<Content>
<AnimationContainer>
<img src={logoImg} alt="Entenda Direito" />
<h1>ENTENDA DIREITO</h1>
<Form ref={formRef} onSubmit={handleSubmit}>
<h1>Recuperar senha</h1>
<Input name="email" icon={FiMail} placeholder="E-mail" />
<Button loading={loading} type="submit">
Recuperar
</Button>
</Form>
<Link to="/">
<FiLogIn />
Voltar ao Login
</Link>
</AnimationContainer>
</Content>
</Container>
);
}
