Sketch login status widget and add to main layout

[JamesPrice76]

Sketch login status widget and add to main layout

[razzeee]

Probably shouldn't be added to the header, as long as it's devs only. Footer is probably the sensible choice.

[kymckay]

• Widget element itself can be roughed in immediately ready for functionality
• I imagine we want this to be the point of initiation for login when not logged in (i.e. the log in link).
• Logged in user status/details (for display) to be stored frontend. Requires
  • #163

[kymckay]

Still pretty green to React and Next, so there may be a more appropriate plan for this that I'm missing (e.g. a suitable existing component that can just be dropped in), but thinking as a first step:

1. Introduce a React component (e.g. LoginStatus) to encapsulate the look with conditional rendering (arbitrary placeholder condition for now):
   • Probably want to show avatar/placeholder and display name when logged in, links to user page
   • Show "Developer login" or similar when not logged in, links to login page
2. Include this in the footer output and update styling to position it nicely (perhaps as a new column on the right)
3. Thinking ahead to handling updating the component when login state changes:
   • Assuming once login flow completes we will either store logged in data in session storage or some other form of state via React.
   • Need to determine if it makes more sense to make a stateful component or just call rendering again with the new data as props when this happens (or some other way). I'm guessing the former is a better practice and the latter simpler to implement.

I'll start on points 1 and 2 now, but @razzeee you have more experience than me with this frontend stack so feel free to shout at me if you foresee any problems or there's a better way to do something 😁 That goes for any of these issues - will probably take me some hacking around at the start here to pick up the React way of thinking.