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'),
          ),
        ],
      );
}