Store token in App.js state, show temporarily in profile

frontend/src/components/App.js

@@ -9,6 +9,7 @@ export default class App extends Component {
     super(props);
     this.state = {
       nickname: null,
+      token: null,
     }
   }
 
@@ -23,7 +24,7 @@ export default class App extends Component {
           <HomePage setAppState={this.setAppState}/>
         </div>
         <div className='bottomBar'>
-          <BottomBar nickname={this.state.nickname} setAppState={this.setAppState} />
+          <BottomBar {...this.state} setAppState={this.setAppState} />
         </div>
       </>
     );

frontend/src/components/BottomBar.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Badge, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
+import {Badge, TextField, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
 import MediaQuery from 'react-responsive'
 
 // Icons
@@ -16,6 +16,7 @@ import EqualizerIcon from '@mui/icons-material/Equalizer';
 import SendIcon from '@mui/icons-material/Send';
 import PublicIcon from '@mui/icons-material/Public';
 import NumbersIcon from '@mui/icons-material/Numbers';
+import PasswordIcon from '@mui/icons-material/Password';
 
 // pretty numbers
 function pn(x) {
@@ -191,7 +192,7 @@ export default class BottomBar extends Component {
             <List>
                 <Divider/>
                 <ListItem className="profileNickname">
-                    <ListItemText secondary="Your robot pseudonymous">
+                    <ListItemText secondary="Your robot">
                     <Typography component="h6" variant="h6">
                     {this.props.nickname ? "⚡"+this.props.nickname+"⚡" : ""}
                     </Typography>
@@ -211,14 +212,31 @@ export default class BottomBar extends Component {
                     <ListItemIcon>
                         <NumbersIcon color="primary"/>
                     </ListItemIcon>
-                    <ListItemText color="primary" primary={'One active order #'+this.state.active_order_id} secondary="Your current order"/>
+                    <ListItemText primary={'One active order #'+this.state.active_order_id} secondary="Your current order"/>
                 </ListItemButton>
                 :
                 <ListItem>
                     <ListItemIcon><NumbersIcon/></ListItemIcon>
-                    <ListItemText primary="No active orders" secondary="Your current order"/>
+                    <ListItemText secondary="Your current order"/>
                 </ListItem>
                 }
+                <ListItem>
+                    <ListItemIcon>
+                        <PasswordIcon/>
+                    </ListItemIcon>
+                    <ListItemText secondary="Last generated token.">
+                    {this.props.token ?  
+                    <TextField
+                        disabled
+                        label='Store safely'
+                        value={this.props.token }
+                        variant='filled'
+                        size='small'/>
+                    : 
+                    'Cannot remember'}
+              </ListItemText>
+                </ListItem>
+
             </List>
             </DialogContent>
             

frontend/src/components/UserGenPage.js

@@ -61,6 +61,7 @@ export default class UserGenPage extends Component {
         &
         this.props.setAppState({
           nickname: data.nickname,
+          token: this.state.token,
       });
       });
   }