The members screen will display a screen of users who are currently a part of the selected team. Various options for management will be available.

Functionalities:

• Invite more users (reuse parts from CreateTeamForm)
• Email users

When launching Bor on an iOS simulator (tested on iPhone 12 Pro and iPad Pro 12.9 inch, 5th generation) with flutter run, it throws the following exception:

[VERBOSE-2:ui_dart_state.cc(209)] Unhandled Exception: Null check operator used on a null value 

Seems to be an issue on Flutter's end, but worth taking a look into.

Validate any forms (see client/lib/forms) when the enter key is pressed. This can be done using the onFieldSubmitted property in TextFormField.

This should be done using the authtoken provided by Django Rest Framework. It will also require a login page and we will have to update some of the get requests made from the client to provide the token. The login screen will replace JoinTeamScreen as home route.

The login page should be the initial route for any user that is logged out (once authentication is implemented). Stick to the style of form seen in JoinTeamStack. No need to implement any http logic yet, just the UI. To get started, here is the base template for the screen:

class LoginScreen extends StatelessWidget {
  const JoinTeamScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leadingWidth: 400,
        leading: Container(
          margin: const EdgeInsets.all(5),
          child: Text(
            "Bor",
            style: GoogleFonts.ubuntu(
              color: Colors.deepPurpleAccent,
              fontWeight: FontWeight.bold,
              fontSize: 46
            ),
          ),
        ),
      ),

      body: Center(
        child: LoginForm()
      )
    );
  }
}

Currently, the JWT is stored as a variable in main.dart like so:

var token; //not type-safe either

There are multiple issues with using this. It is easily prone to an attack and secondly, the variable state is not persistent, as it will reset when a route is not loaded by the app (eg. url/api request). Instead, the JWT should be saved to whatever the secure storage system is, belonging the platform that the app is running on. These are as follows:

Web: WebCrypto (experimental)
iOS: Keychain
Android: KeyStore/EncryptedSharedPreferences (see discussion)

I found a Flutter package that achieves just this, which we could use.
It also may be worth creating a couple functions in lib/auth/tokens.dart to access the token easily.

Example:

String? getToken() {
//null check, return token from storage
}

void setToken(String token) {
//update token key in storage
}

Once the user logs in, they need to be sent to the actual app screen. The layout should feature a sidebar with a dropdown at the top to select a team. If the user is not part of any teams, a popup will appear, prompting the user to create a team or join a team before continuing.

Haven't looked in to how to do this yet, and isn't a big issue at the moment, but we should implement password reset via email. I found this diagram which is a really good demonstration of the steps required. If anyone wants to look into this, go ahead, although it is probably a big job.

Eg. have '/join/:code/' send you to the join page for that team.

This is achievable in Flutter. There are a few different ways to achieve it.
https://stackoverflow.com/questions/57552885/how-can-a-named-route-have-url-parameters-in-flutter-web

To reduce mess, there should be a seperate widget from the JoinTeamStack that only displays the equivalent of the second indexed stack in JoinTeamStack. You can pass the team code through the widget's constructor (see below).

const JoinTeamCard(code: args.code);

I have signed up to sendgrid.com, as they have a very generous email API plan. I will begin adding this in the coming week.

Instead of manually applying styling to each widget, we can define a universal theme in main.dart. This would save a lot of hassle going forward.

I suspect that this might be because the build method is called first, rather than waiting to call the constructor (why? I have no idea). Maybe the PageView should be turned into a builder, that waits for viewIndex to be initialised. I can take a look at this at some stage.

A PageView would allow a sliding animation between the two widgets. Pass an index in the constructor to specify which screen for routing.

setState should rebuild the entire widget, but does not appear to be updating when global variable currentTeam is reassigned. For example, when navigating to the projects screen, it will not update projects because the widget has not been rebuilt. It may be worth considering something like a ValueListener to wrap the PageView in.