react-icons/fi#FiLogOut TypeScript Examples
The following examples show how to use
react-icons/fi#FiLogOut.
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: UserBox.tsx From tobira with Apache License 2.0 | 5 votes |
|
Logout: React.FC = () => {
const { t } = useTranslation();
type State = "idle" | "pending" | "error";
const [state, setState] = useState<State>("idle");
const actionProps = CONFIG.auth.logoutLink !== null
// Just a normal link to the specified URL
? {
htmlLink: true,
linkTo: CONFIG.auth.logoutLink,
}
// Our own internal link
: {
onClick: () => {
// We don't do anything if a request is already pending.
if (state === "pending") {
return;
}
setState("pending");
fetch("/~session", { method: "DELETE" })
.then(() => {
// We deliberately ignore the `status`. See `handle_logout`
// for more information.
//
// We hard forward to the home page to get rid of any stale state.
window.location.href = "/";
})
.catch(error => {
// TODO: this is not great. It should happen only
// extremely rarely, but still, just showing a triangle
// is not very great for the uesr.
// eslint-disable-next-line no-console
console.error("Error during logout: ", error);
setState("error");
});
},
};
return (
<MenuItem
icon={match(state, {
"idle": () => <FiLogOut />,
"pending": () => <Spinner />,
"error": () => <FiAlertTriangle />,
})}
borderTop
css={{ color: "var(--danger-color)" }}
{...actionProps}
>{t("user.logout")}</MenuItem>
);
}
Example #2
| Source File: App.tsx From clarity with Apache License 2.0 | 4 votes |
|
render() {
return (
<nav
className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
id="mainNav"
>
<a className="navbar-brand" href="/">
<img src={logo} alt="logo" />
<span className={'navbar-brand-title'}>
Clarity Explorer <FaMapMarkedAlt className={'navbar-brand-icon'} />
</span>
</a>
<div className="navbar-network-info d-none d-md-inline-block">
<p>
Connected to:
<span className={'navbar-network-highlight'}>
{window.config?.network?.name}
</span>
Block Height:
<span className={'navbar-network-highlight'}>
{this.props.networkInfoContainer.blockHeight}
</span>
</p>
<p>
Block Hash:
<span className={'navbar-network-highlight'}>
{this.props.networkInfoContainer.blockHash || 'null'}
</span>
</p>
</div>
<button
className="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
{/* Side Bar */}
<ul className="navbar-nav navbar-sidenav" id="sideMenu">
{SideMenuItems.map(x => x.toRoute())}
</ul>
{/* Side Bar Toggle */}
<ul className="navbar-nav sidenav-toggler">
<li className="nav-item">
<a className="nav-link text-center" id="sidenavToggler">
<i className="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
{this.props.auth.user && (
<div className="username text-white">
<span className="welcome">Welcome</span>
{this.props!.auth!.user!.name}
</div>
)}
</li>
<li className="nav-item">
{this.props.auth.user ? (
<a
className="nav-link text-white"
onClick={_ => this.props.auth.logout()}
>
<FiLogOut /> Sign Out
</a>
) : (
<a
className="nav-link text-center"
onClick={_ => this.props.auth.login()}
>
<i className="fa fa-fw fa-sign-in-alt"></i>Sign In
</a>
)}
</li>
<li
className="nav-item"
style={{ paddingLeft: '1rem', paddingTop: '.3rem' }}
>
<ConnectButton auth={this.props.auth} />
</li>
</ul>
</div>
</nav>
);
}
Example #3
| Source File: App.tsx From casper-clarity with Apache License 2.0 | 4 votes |
|
render() {
return (
<nav
className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
id="mainNav"
>
<a className="navbar-brand" href="/">
<img src={logo} alt="logo" />
<span className={'navbar-brand-title'}>
Clarity Explorer <FaMapMarkedAlt className={'navbar-brand-icon'} />
</span>
</a>
<div className="navbar-network-info d-none d-md-inline-block">
<p>
Connected to:
<span className={'navbar-network-highlight'}>
{window.config?.network?.name}
</span>
Block Height:
<span className={'navbar-network-highlight'}>
{this.props.networkInfoContainer.blockHeight}
</span>
</p>
<p>
Block Hash:
<span className={'navbar-network-highlight'}>
{this.props.networkInfoContainer.blockHash || 'null'}
</span>
</p>
</div>
<button
className="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
{/* Side Bar */}
<ul className="navbar-nav navbar-sidenav" id="sideMenu">
{SideMenuItems.map(x => x.toRoute())}
</ul>
{/* Side Bar Toggle */}
<ul className="navbar-nav sidenav-toggler">
<li className="nav-item">
<a
className="nav-link text-center"
id="sidenavToggler"
href={'/#'}
>
<i className="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
{this.props.auth.user && (
<div className="username text-white">
<span className="welcome">Welcome</span>
{this.props!.auth!.user!.name}
</div>
)}
</li>
<li className="nav-item">
{this.props.auth.user ? (
<a
href={'/#'}
className="nav-link text-white"
onClick={_ => this.props.auth.logout()}
>
<FiLogOut /> Sign Out
</a>
) : (
<a
href={'/#'}
className="nav-link text-center"
onClick={_ => this.props.auth.login()}
>
<i className="fa fa-fw fa-sign-in-alt"></i>Sign In
</a>
)}
</li>
<li
className="nav-item"
style={{ paddingLeft: '1rem', paddingTop: '.3rem' }}
>
<ConnectButton auth={this.props.auth} />
</li>
</ul>
</div>
</nav>
);
}
