mirror of
https://github.com/coder/coder.git
synced 2026-11-07 12:34:23 +08:00
Bryan
69d88b4a6d
#37 implemented the Sign-_in_ flow, but there wasn't a Sign-_out_ flow as part of that PR (aside from letting the cookie expire... or manually deleting the cookie...), which is obviously not ideal. This PR implements a basic sign-out flow, along with a very simple user dropdown:  Bringing in a few pruned down components for the `<UserDropdown />` to integrate into the `<NavBar />`. In addition, this also implements a simple back-end API for `/logout` which just clears the session token.
59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import { makeStyles } from "@material-ui/core/styles"
|
|
import Typography from "@material-ui/core/Typography"
|
|
import React from "react"
|
|
|
|
import { User } from "../../contexts/UserContext"
|
|
import { UserAvatar } from "./UserAvatar"
|
|
|
|
interface UserProfileCardProps {
|
|
user: User
|
|
}
|
|
|
|
export const UserProfileCard: React.FC<UserProfileCardProps> = ({ user }) => {
|
|
const styles = useStyles()
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
<div className={styles.avatarContainer}>
|
|
<UserAvatar className={styles.avatar} user={user} />
|
|
</div>
|
|
<Typography className={styles.userName}>{user.username}</Typography>
|
|
<Typography className={styles.userEmail}>{user.email}</Typography>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
paddingTop: theme.spacing(3),
|
|
textAlign: "center",
|
|
},
|
|
avatarContainer: {
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
avatar: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: "50%",
|
|
marginBottom: theme.spacing(1),
|
|
transition: `transform .2s`,
|
|
|
|
"&:hover": {
|
|
transform: `scale(1.1)`,
|
|
},
|
|
},
|
|
userName: {
|
|
fontSize: 16,
|
|
marginBottom: theme.spacing(0.5),
|
|
},
|
|
userEmail: {
|
|
fontSize: 14,
|
|
letterSpacing: 0.2,
|
|
color: theme.palette.text.secondary,
|
|
marginBottom: theme.spacing(1.5),
|
|
},
|
|
}))
|