From b7a79fd2a4ad1865ea6ff35ba486877130637044 Mon Sep 17 00:00:00 2001 From: Nikolai Rodionov Date: Thu, 4 Apr 2024 23:40:00 +0200 Subject: [PATCH] WIP: Add forms --- Containerfile | 2 +- lib/components/menubar.dart | 10 +++- lib/components/sign_in_form.dart | 15 +++++- lib/components/sign_up_form.dart | 88 ++++++++++++++++++++++++++++++++ 4 files changed, 110 insertions(+), 5 deletions(-) create mode 100644 lib/components/sign_up_form.dart diff --git a/Containerfile b/Containerfile index b7e28ec..ec3a91d 100644 --- a/Containerfile +++ b/Containerfile @@ -19,7 +19,7 @@ ENV PATH="$FLUTTER_SDK/bin:$FLUTTER_SDK/bin/cache/dart-sdk/bin:${PATH}" RUN mkdir $APP COPY . $APP WORKDIR $APP -RUN flutter build web +RUN flutter build web --web-renderer html # once heare the app will be compiled and ready to deploy diff --git a/lib/components/menubar.dart b/lib/components/menubar.dart index 9161235..3d15d3e 100644 --- a/lib/components/menubar.dart +++ b/lib/components/menubar.dart @@ -5,6 +5,7 @@ import 'dart:html'; import 'package:flutter/material.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; @@ -40,7 +41,12 @@ class _MenuPanel extends State { }, child: const Text("sign in")), TextButton( - onPressed: () => print("sign up"), child: const Text("sign up")), + onPressed: () { + showDialog( + context: context, + builder: (BuildContext context) => const SignUpForm()); + }, + child: const Text("sign up")), ]; } } @@ -89,7 +95,7 @@ class _MenuPanel extends State { Navigator.pushNamed(context, "/about"); }), ]), - backgroundColor: Colors.cyan, + backgroundColor: const Color.fromRGBO(46, 51, 78, 1.0), automaticallyImplyLeading: false, actions: accountActions(), ); diff --git a/lib/components/sign_in_form.dart b/lib/components/sign_in_form.dart index 5a75733..0b7b700 100644 --- a/lib/components/sign_in_form.dart +++ b/lib/components/sign_in_form.dart @@ -13,7 +13,10 @@ class _SignInFormState extends State { @override Widget build(BuildContext context) => AlertDialog( title: const Text(dialogName), - content: Form( + content: SizedBox( + width: 420, + height: 140, + child: Form( key: _formKey, child: Center( child: Column(children: [ @@ -22,16 +25,24 @@ class _SignInFormState extends State { 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), ), - ]))), + ])))), actions: [ TextButton( onPressed: () => Navigator.pop(context, 'Cancel'), diff --git a/lib/components/sign_up_form.dart b/lib/components/sign_up_form.dart new file mode 100644 index 0000000..dc7b008 --- /dev/null +++ b/lib/components/sign_up_form.dart @@ -0,0 +1,88 @@ +import 'package:flutter/material.dart'; + +class SignUpForm extends StatefulWidget { + const SignUpForm({super.key}); + + @override + State createState() => _SignUpFormState(); +} + +class _SignUpFormState extends State { + final _formKey = GlobalKey(); + static const dialogName = "Sign Up"; + @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), + ), + ])))), + actions: [ + 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())), + ); + } + }, + child: const Text('OK'), + ), + ], + ); +}