Signup and signing are ready
This commit is contained in:
@ -1,16 +1,21 @@
|
||||
// This project is not supposed to be cross-platform,
|
||||
// This project is not supposed to be cross-platform,
|
||||
// so we don't care about this warning
|
||||
// ignore: avoid_web_libraries_in_flutter
|
||||
import 'dart:html';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:softplayer_web/api/grpc/accounts.dart';
|
||||
import 'package:softplayer_web/components/sign_in_form.dart';
|
||||
import 'package:softplayer_web/components/sign_up_form.dart';
|
||||
|
||||
class MenuPanel extends StatefulWidget implements PreferredSizeWidget {
|
||||
final TabName tab;
|
||||
const MenuPanel({super.key, required this.tab})
|
||||
: preferredSize = const Size.fromHeight(kToolbarHeight);
|
||||
final AccountsGrpc accountsGrpc;
|
||||
const MenuPanel({
|
||||
super.key,
|
||||
required this.tab,
|
||||
required this.accountsGrpc,
|
||||
}) : preferredSize = const Size.fromHeight(kToolbarHeight);
|
||||
@override
|
||||
final Size preferredSize;
|
||||
@override
|
||||
@ -37,14 +42,18 @@ class _MenuPanel extends State<MenuPanel> {
|
||||
onPressed: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) => const SignInForm());
|
||||
builder: (BuildContext context) => SignInForm(
|
||||
accountsGrpc: widget.accountsGrpc,
|
||||
));
|
||||
},
|
||||
child: const Text("sign in")),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) => const SignUpForm());
|
||||
builder: (BuildContext context) => SignUpForm(
|
||||
accountsGrpc: widget.accountsGrpc,
|
||||
));
|
||||
},
|
||||
child: const Text("sign up")),
|
||||
];
|
||||
|
||||
@ -1,64 +1,98 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:grpc/grpc_web.dart';
|
||||
import 'package:softplayer_web/api/grpc/accounts.dart';
|
||||
|
||||
class SignInForm extends StatefulWidget {
|
||||
const SignInForm({super.key});
|
||||
const SignInForm({
|
||||
super.key,
|
||||
required this.accountsGrpc,
|
||||
});
|
||||
|
||||
final AccountsGrpc accountsGrpc;
|
||||
@override
|
||||
State<StatefulWidget> createState() => _SignInFormState();
|
||||
}
|
||||
|
||||
class _SignInFormState extends State<SignInForm> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final usernameCtrl = TextEditingController();
|
||||
final passwordCtrl = TextEditingController();
|
||||
static const dialogName = "Sign In";
|
||||
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;
|
||||
widget.accountsGrpc
|
||||
.signIn(username, "", password)
|
||||
.then((value) => null)
|
||||
.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: 140,
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Center(
|
||||
child: Column(children: [
|
||||
TextFormField(
|
||||
autofocus: true,
|
||||
decoration: const InputDecoration(
|
||||
hintText: "Enter your username or email",
|
||||
icon: Icon(Icons.account_circle),
|
||||
label: Text("Username"),
|
||||
),
|
||||
cursorWidth: 1,
|
||||
cursorHeight: 18,
|
||||
cursorRadius: const Radius.circular(10),
|
||||
),
|
||||
TextFormField(
|
||||
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),
|
||||
),
|
||||
])))),
|
||||
width: 420,
|
||||
height: 140,
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Center(
|
||||
child: Column(children: [
|
||||
TextFormField(
|
||||
controller: usernameCtrl,
|
||||
autofocus: true,
|
||||
decoration: const InputDecoration(
|
||||
hintText: "Enter your username or email",
|
||||
icon: Icon(Icons.account_circle),
|
||||
label: Text("Username"),
|
||||
),
|
||||
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),
|
||||
onFieldSubmitted: (v) {
|
||||
if (usernameCtrl.text.isEmpty) {
|
||||
FocusScope.of(context).nextFocus();
|
||||
} else {
|
||||
submitForm();
|
||||
}
|
||||
},
|
||||
),
|
||||
])))),
|
||||
actions: <Widget>[
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context, 'Cancel'),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
// Validate returns true if the form is valid, or false otherwise.
|
||||
if (_formKey.currentState!.validate()) {
|
||||
// If the form is valid, display a snackbar. In the real world,
|
||||
// you'd often call a server or save the information in a database.
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text(_formKey.toString())),
|
||||
);
|
||||
}
|
||||
},
|
||||
onPressed: submitForm,
|
||||
child: const Text('OK'),
|
||||
),
|
||||
],
|
||||
|
||||
@ -1,86 +1,120 @@
|
||||
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});
|
||||
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((value) => null)
|
||||
.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,
|
||||
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(
|
||||
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(
|
||||
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(
|
||||
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),
|
||||
),
|
||||
])))),
|
||||
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: () {
|
||||
// Validate returns true if the form is valid, or false otherwise.
|
||||
if (_formKey.currentState!.validate()) {
|
||||
// If the form is valid, display a snackbar. Up the real world,
|
||||
// you'd often call a server or save the information in a database.
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text(_formKey.toString())),
|
||||
);
|
||||
}
|
||||
},
|
||||
onPressed: submitForm,
|
||||
child: const Text('OK'),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user