softplayer-web/lib/components/sign_up_form.dart

import 'dart:html';

import 'package:flutter/material.dart';
import 'package:grpc/grpc_web.dart';
import 'package:softplayer_web/api/grpc/accounts.dart';

class SignUpForm extends StatefulWidget {
  const SignUpForm({
    super.key,
    required this.accountsGrpc,
  });

  final AccountsGrpc accountsGrpc;
  @override
  State<StatefulWidget> createState() => _SignUpFormState();
}

class _SignUpFormState extends State<SignUpForm> {
  final _formKey = GlobalKey<FormState>();

  final usernameCtrl = TextEditingController();
  final passwordCtrl = TextEditingController();
  final passwordVerifyCtrl = TextEditingController();
  final emailCtrl = TextEditingController();

  static const dialogName = "Sign Up";

  void submitForm() {
    // Validate returns true if the form is valid, or false otherwise.
    if (_formKey.currentState!.validate()) {
      final username = usernameCtrl.text;
      final password = passwordCtrl.text;
      final email = emailCtrl.text;
      widget.accountsGrpc.signUp(username, email, password).then((rs) {
        window.localStorage["token"] = rs.token;
        window.localStorage["uuid"] = rs.uuid;
        Navigator.of(context, rootNavigator: true).pop();
      }).catchError((e) {
        GrpcError error = e;
        String msg;
        if (error.message != null) {
          msg = error.message!;
        } else {
          msg = error.toString();
        }
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(msg),
          backgroundColor: Colors.red,
          showCloseIcon: true,
          behavior: SnackBarBehavior.floating,
        ));
        passwordCtrl.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) => AlertDialog(
        title: const Text(dialogName),
        content: SizedBox(
            width: 420,
            height: 280,
            child: Form(
                key: _formKey,
                child: Center(
                    child: Column(children: [
                  TextFormField(
                    autofocus: true,
                    controller: usernameCtrl,
                    decoration: const InputDecoration(
                      hintText: "Enter your username",
                      icon: Icon(Icons.account_circle),
                      label: Text("Username"),
                    ),
                    cursorWidth: 1,
                    cursorHeight: 18,
                    cursorRadius: const Radius.circular(10),
                  ),
                  TextFormField(
                    controller: emailCtrl,
                    autofocus: true,
                    decoration: const InputDecoration(
                      hintText: "Enter your email",
                      icon: Icon(Icons.email),
                      label: Text("Email"),
                    ),
                    cursorWidth: 1,
                    cursorHeight: 18,
                    cursorRadius: const Radius.circular(10),
                  ),
                  TextFormField(
                    controller: passwordCtrl,
                    obscureText: true,
                    decoration: const InputDecoration(
                        hintText: "Enter your password",
                        icon: Icon(Icons.password),
                        label: Text("Password")),
                    cursorWidth: 1,
                    cursorHeight: 18,
                    cursorRadius: const Radius.circular(10),
                  ),
                  TextFormField(
                    controller: passwordVerifyCtrl,
                    obscureText: true,
                    decoration: const InputDecoration(
                        hintText: "Verify your password",
                        icon: Icon(Icons.password),
                        label: Text("Confirm Password")),
                    cursorWidth: 1,
                    cursorHeight: 18,
                    cursorRadius: const Radius.circular(10),
                  ),
                ])))),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.pop(context, 'Cancel'),
            child: const Text('Cancel'),
          ),
          TextButton(
            onPressed: submitForm,
            child: const Text('OK'),
          ),
        ],
      );
}