Add profile page (#117)

Author: helfi92

src/App/routes.jsx

@@ -85,6 +85,12 @@ export default [
     ),
     path: '/quickstart',
   },
+  {
+    component: loadable(() =>
+      import(/* webpackChunkName: 'Profile' */ '../views/Profile')
+    ),
+    path: '/profile',
+  },
   {
     component: loadable(() =>
       import(/* webpackChunkName: 'HomeOrDashboard' */ '../views/HomeOrDashboard')

src/components/Dashboard/UserMenu.jsx

@@ -1,4 +1,5 @@
 import { Component, Fragment } from 'react';
+import { Link } from 'react-router-dom';
 import { withStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
 import Menu from '@material-ui/core/Menu';
@@ -8,6 +9,8 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import AccountCircleIcon from 'mdi-react/AccountCircleIcon';
+import AccountIcon from 'mdi-react/AccountIcon';
+import HandPeaceIcon from 'mdi-react/HandPeaceIcon';
 import { withAuth } from '../../utils/Auth';
 import SignInDialog from '../SignInDialog';
 
@@ -27,6 +30,9 @@ import SignInDialog from '../SignInDialog';
   icon: {
     fill: theme.palette.text.primary,
   },
+  leftIcon: {
+    marginRight: theme.spacing.unit,
+  },
 }))
 @withAuth
 export default class UserMenu extends Component {
@@ -114,8 +120,16 @@ export default class UserMenu extends Component {
           anchorEl={anchorEl}
           open={Boolean(anchorEl)}
           onClose={this.handleMenuClose}>
-          <MenuItem onClick={this.handleMenuClose}>Manage Credentials</MenuItem>
-          <MenuItem onClick={this.handleClickSignOut}>Sign Out</MenuItem>
+          <MenuItem title="Your Profile" component={Link} to="/profile">
+            <AccountIcon className={classes.leftIcon} />
+            Account
+          </MenuItem>
+          <MenuItem
+            title={`Sign Out of ${process.env.APPLICATION_NAME}`}
+            onClick={this.handleClickSignOut}>
+            <HandPeaceIcon className={classes.leftIcon} />
+            Sign Out
+          </MenuItem>
         </Menu>
       </Fragment>
     );

src/views/Profile/index.jsx

@@ -0,0 +1,92 @@
+import { hot } from 'react-hot-loader';
+import { Component, Fragment } from 'react';
+import { graphql } from 'react-apollo';
+import ErrorPanel from '@mozilla-frontend-infra/components/ErrorPanel';
+import Spinner from '@mozilla-frontend-infra/components/Spinner';
+import Typography from '@material-ui/core/Typography';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Dashboard from '../../components/Dashboard';
+import DateDistance from '../../components/DateDistance';
+import { withAuth } from '../../utils/Auth';
+import profileQuery from './profile.graphql';
+
+@hot(module)
+@withAuth
+@graphql(profileQuery)
+export default class Profile extends Component {
+  render() {
+    const {
+      classes,
+      user,
+      data: { currentScopes, loading, error },
+    } = this.props;
+
+    return (
+      <Dashboard title="Profile" className={classes.root}>
+        {!currentScopes && loading && <Spinner loading />}
+        {error && error.graphQLErrors && <ErrorPanel error={error} />}
+        {user &&
+          currentScopes && (
+            <Fragment>
+              <Typography variant="subheading">
+                Credential Information
+              </Typography>
+              <List>
+                <ListItem>
+                  <ListItemText
+                    primary="Signed In As"
+                    secondary={user.profile.displayName}
+                  />
+                </ListItem>
+                <ListItem>
+                  <ListItemText
+                    primary="Certificate"
+                    secondary={
+                      user.credentials.certificate ? (
+                        <code>{user.credentials.certificate}</code>
+                      ) : (
+                        'n/a'
+                      )
+                    }
+                  />
+                </ListItem>
+                <ListItem>
+                  <ListItemText
+                    primary="Client ID"
+                    secondary={<code>{user.credentials.clientId}</code>}
+                  />
+                </ListItem>
+                <ListItem>
+                  <ListItemText
+                    primary="Expires"
+                    secondary={<DateDistance from={user.expires} />}
+                  />
+                </ListItem>
+                <ListItem>
+                  <ListItemText
+                    primary="Scopes"
+                    secondaryTypographyProps={{ component: 'div' }}
+                    secondary={
+                      currentScopes.length ? (
+                        <List>
+                          {currentScopes.map(scope => (
+                            <ListItem key={scope}>
+                              <ListItemText secondary={<code>{scope}</code>} />
+                            </ListItem>
+                          ))}
+                        </List>
+                      ) : (
+                        'n/a'
+                      )
+                    }
+                  />
+                </ListItem>
+              </List>
+            </Fragment>
+          )}
+      </Dashboard>
+    );
+  }
+}

src/views/Profile/profile.graphql

@@ -0,0 +1,3 @@
+query Profile {
+  currentScopes
+}