Giter VIP home page Giter VIP logo

bor's Introduction

  • Melbourne, Australia
  • Python
  • Flutter
  • Django
  • Flask
  • Next.js
  • Mobile and web

bor's People

Contributors

greenspud avatar william-herring avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

bor's Issues

Create a universal theme

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.

Validate forms on enter key

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

Create members screen

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

Create login page

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()
      )
    );
  }
}

Token should be stored in secure local storage by Flutter

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
}

Add token authentication

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.

Password reset via email

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.

image

Create app home layout

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.

PageView should refresh screen widgets on currentTeam reassign

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.

Allow URL arguments when navigating to '/join'

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);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.