feat: New onboarding design
This commit is contained in:
Christian Pauly
parent
a15b510c78
commit
87afa8ac3d
18 changed files with 862 additions and 699 deletions
|
|
@ -16,13 +16,11 @@ class SignupPage extends StatefulWidget {
|
|||
}
|
||||
|
||||
class SignupPageController extends State<SignupPage> {
|
||||
final TextEditingController usernameController = TextEditingController();
|
||||
final TextEditingController passwordController = TextEditingController();
|
||||
final TextEditingController passwordController2 = TextEditingController();
|
||||
final TextEditingController emailController = TextEditingController();
|
||||
String? error;
|
||||
bool loading = false;
|
||||
bool showPassword = false;
|
||||
bool showPassword = true;
|
||||
|
||||
void toggleShowPassword() => setState(() => showPassword = !showPassword);
|
||||
|
||||
|
|
@ -30,15 +28,6 @@ class SignupPageController extends State<SignupPage> {
|
|||
|
||||
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
|
||||
|
||||
String? usernameTextFieldValidator(String? value) {
|
||||
usernameController.text =
|
||||
usernameController.text.trim().toLowerCase().replaceAll(' ', '_');
|
||||
if (value!.isEmpty) {
|
||||
return L10n.of(context)!.pleaseChooseAUsername;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
String? password1TextFieldValidator(String? value) {
|
||||
const minLength = 8;
|
||||
if (value!.isEmpty) {
|
||||
|
|
@ -50,18 +39,11 @@ class SignupPageController extends State<SignupPage> {
|
|||
return null;
|
||||
}
|
||||
|
||||
String? password2TextFieldValidator(String? value) {
|
||||
if (value!.isEmpty) {
|
||||
return L10n.of(context)!.chooseAStrongPassword;
|
||||
}
|
||||
if (value != passwordController.text) {
|
||||
return L10n.of(context)!.passwordsDoNotMatch;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
String? emailTextFieldValidator(String? value) {
|
||||
if (value!.isNotEmpty && !value.contains('@')) {
|
||||
if (value!.isEmpty) {
|
||||
return L10n.of(context)!.addEmail;
|
||||
}
|
||||
if (value.isNotEmpty && !value.contains('@')) {
|
||||
return L10n.of(context)!.pleaseEnterValidEmail;
|
||||
}
|
||||
return null;
|
||||
|
|
@ -92,7 +74,7 @@ class SignupPageController extends State<SignupPage> {
|
|||
}
|
||||
await client.uiaRequestBackground(
|
||||
(auth) => client.register(
|
||||
username: usernameController.text,
|
||||
username: Matrix.of(context).loginUsername!,
|
||||
password: passwordController.text,
|
||||
initialDeviceDisplayName: PlatformInfos.clientName,
|
||||
auth: auth,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import 'package:flutter/material.dart';
|
|||
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
|
||||
import 'package:fluffychat/widgets/layouts/one_page_card.dart';
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/widgets/layouts/login_scaffold.dart';
|
||||
import 'signup.dart';
|
||||
|
||||
class SignupPageView extends StatelessWidget {
|
||||
|
|
@ -11,121 +12,78 @@ class SignupPageView extends StatelessWidget {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return OnePageCard(
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(L10n.of(context)!.signUp),
|
||||
return LoginScaffold(
|
||||
appBar: AppBar(
|
||||
automaticallyImplyLeading: !controller.loading,
|
||||
backgroundColor: Colors.transparent,
|
||||
iconTheme: const IconThemeData(color: Colors.white),
|
||||
elevation: 0,
|
||||
title: Text(
|
||||
L10n.of(context)!.signUp,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
),
|
||||
body: Form(
|
||||
key: controller.formKey,
|
||||
child: ListView(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: TextFormField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
controller: controller.usernameController,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.username],
|
||||
validator: controller.usernameTextFieldValidator,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: const Icon(Icons.account_circle_outlined),
|
||||
hintText: L10n.of(context)!.username,
|
||||
labelText: L10n.of(context)!.username,
|
||||
prefixText: '@',
|
||||
prefixStyle: const TextStyle(fontWeight: FontWeight.bold),
|
||||
suffixStyle: const TextStyle(fontWeight: FontWeight.w200),
|
||||
suffixText: ':${controller.domain}'),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: TextFormField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.password],
|
||||
controller: controller.passwordController,
|
||||
obscureText: !controller.showPassword,
|
||||
validator: controller.password1TextFieldValidator,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: const Icon(Icons.vpn_key_outlined),
|
||||
hintText: '****',
|
||||
suffixIcon: IconButton(
|
||||
tooltip: L10n.of(context)!.showPassword,
|
||||
icon: Icon(controller.showPassword
|
||||
? Icons.visibility_off_outlined
|
||||
: Icons.visibility_outlined),
|
||||
onPressed: controller.toggleShowPassword,
|
||||
),
|
||||
labelText: L10n.of(context)!.password,
|
||||
),
|
||||
body: Form(
|
||||
key: controller.formKey,
|
||||
child: ListView(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: TextFormField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.password],
|
||||
controller: controller.passwordController,
|
||||
obscureText: !controller.showPassword,
|
||||
validator: controller.password1TextFieldValidator,
|
||||
decoration: FluffyThemes.loginTextFieldDecoration(
|
||||
prefixIcon: const Icon(Icons.vpn_key_outlined),
|
||||
suffixIcon: IconButton(
|
||||
tooltip: L10n.of(context)!.showPassword,
|
||||
icon: Icon(controller.showPassword
|
||||
? Icons.visibility_off_outlined
|
||||
: Icons.visibility_outlined),
|
||||
onPressed: controller.toggleShowPassword,
|
||||
),
|
||||
hintText: L10n.of(context)!.chooseAStrongPassword,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: TextFormField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.password],
|
||||
controller: controller.passwordController2,
|
||||
obscureText: true,
|
||||
validator: controller.password2TextFieldValidator,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: const Icon(Icons.repeat_outlined),
|
||||
hintText: '****',
|
||||
labelText: L10n.of(context)!.repeatPassword,
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: TextFormField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
controller: controller.emailController,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.username],
|
||||
validator: controller.emailTextFieldValidator,
|
||||
decoration: InputDecoration(
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: TextFormField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
controller: controller.emailController,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.username],
|
||||
validator: controller.emailTextFieldValidator,
|
||||
decoration: FluffyThemes.loginTextFieldDecoration(
|
||||
prefixIcon: const Icon(Icons.mail_outlined),
|
||||
labelText: L10n.of(context)!.addEmail,
|
||||
hintText: 'email@example.abc',
|
||||
hintText: L10n.of(context)!.enterAnEmailAddress,
|
||||
errorText: controller.error),
|
||||
),
|
||||
),
|
||||
Hero(
|
||||
tag: 'loginButton',
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: ElevatedButton(
|
||||
onPressed: controller.loading ? () {} : controller.signup,
|
||||
style: ElevatedButton.styleFrom(
|
||||
primary: Colors.white.withAlpha(200),
|
||||
onPrimary: Colors.black,
|
||||
shadowColor: Colors.white,
|
||||
),
|
||||
child: controller.loading
|
||||
? const LinearProgressIndicator()
|
||||
: Text(L10n.of(context)!.signUp),
|
||||
),
|
||||
),
|
||||
const Divider(),
|
||||
const SizedBox(height: 12),
|
||||
if (controller.error != null) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Text(
|
||||
controller.error!,
|
||||
style: const TextStyle(color: Colors.red),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
const Divider(),
|
||||
const SizedBox(height: 12),
|
||||
],
|
||||
Hero(
|
||||
tag: 'loginButton',
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: ElevatedButton(
|
||||
onPressed: controller.loading ? null : controller.signup,
|
||||
child: controller.loading
|
||||
? const LinearProgressIndicator()
|
||||
: Text(L10n.of(context)!.signUp),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue