X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fapp%2FUser.js;fp=resources%2Fjs%2Fcomponents%2Fapp%2FUser.js;h=6f589269e575a260640723ed18e92872db02a48d;hb=a0bca4306e882d77ba192eed889bd7ed52896dad;hp=0000000000000000000000000000000000000000;hpb=e4e7cbc7e4944b08d74f5752de337ba7700367f4;p=alttp.git

diff --git a/resources/js/components/app/User.js b/resources/js/components/app/User.js
new file mode 100644
index 0000000..6f58926
--- /dev/null
+++ b/resources/js/components/app/User.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Nav } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import { useUser } from '../../helpers/UserContext';
+import { getAvatarUrl } from '../../helpers/User';
+
+const User = ({ doLogout }) => {
+	const { t } = useTranslation();
+	const user = useUser();
+
+	return user
+		? <>
+			<Nav className="ms-auto">
+				<LinkContainer to={`/users/${user.id}`}>
+					<Nav.Link>
+						<img alt="" src={getAvatarUrl(user)} />
+						{user.username}
+						{user.discriminator && user.discriminator !== '0' ?
+							<span className="text-muted">#{user.discriminator}</span>
+						: null}
+					</Nav.Link>
+				</LinkContainer>
+			</Nav>
+			<Button
+			className="ms-2"
+				onClick={doLogout}
+				title={t('button.logout')}
+				variant="outline-secondary"
+			>
+				<Icon.LOGOUT title="" />
+			</Button>
+		</>
+		: <Button
+			className="ms-auto"
+			href="/login"
+			onClick={() => {
+				if (location.pathname.length > 1) {
+					localStorage.setItem('returnPath', location.pathname.substr(1));
+				}
+			}}
+			title={t('button.login')}
+			variant="discord"
+		>
+			<Icon.DISCORD />
+			{' '}
+			{t('button.login')}
+		</Button>;
+};
+
+User.propTypes = {
+	doLogout: PropTypes.func,
+};
+
+export default User;