feat: Better sign up UX and allow signup without password

This commit is contained in:
Christian Pauly 2022-05-28 10:01:03 +02:00
parent 708999c59d
commit 0af02539c0
5 changed files with 66 additions and 17 deletions

View File

@ -2825,5 +2825,6 @@
"placeholders": { "placeholders": {
"user": {} "user": {}
} }
} },
"noEmailWarning": "Please enter a valid email address. Otherwise you won't be able to reset your password. If you don't want to, tap again on the button to continue."
} }

View File

@ -34,6 +34,7 @@ abstract class FluffyThemes {
prefixIconColor: Colors.black, prefixIconColor: Colors.black,
iconColor: Colors.black, iconColor: Colors.black,
errorText: errorText, errorText: errorText,
errorMaxLines: 4,
errorStyle: TextStyle( errorStyle: TextStyle(
color: Colors.red.shade200, color: Colors.red.shade200,
shadows: const [ shadows: const [

View File

@ -17,10 +17,15 @@ class SignupPage extends StatefulWidget {
class SignupPageController extends State<SignupPage> { class SignupPageController extends State<SignupPage> {
final TextEditingController passwordController = TextEditingController(); final TextEditingController passwordController = TextEditingController();
final TextEditingController password2Controller = TextEditingController();
final TextEditingController emailController = TextEditingController(); final TextEditingController emailController = TextEditingController();
String? error; String? error;
bool loading = false; bool loading = false;
bool showPassword = true; bool showPassword = false;
bool noEmailWarningConfirmed = false;
bool displaySecondPasswordField = false;
static const int minPassLength = 8;
void toggleShowPassword() => setState(() => showPassword = !showPassword); void toggleShowPassword() => setState(() => showPassword = !showPassword);
@ -28,20 +33,39 @@ class SignupPageController extends State<SignupPage> {
final GlobalKey<FormState> formKey = GlobalKey<FormState>(); final GlobalKey<FormState> formKey = GlobalKey<FormState>();
void onPasswordType(String text) {
if (text.length >= minPassLength && !displaySecondPasswordField) {
setState(() {
displaySecondPasswordField = true;
});
}
}
String? password1TextFieldValidator(String? value) { String? password1TextFieldValidator(String? value) {
const minLength = 8;
if (value!.isEmpty) { if (value!.isEmpty) {
return L10n.of(context)!.chooseAStrongPassword; return L10n.of(context)!.chooseAStrongPassword;
} }
if (value.length < minLength) { if (value.length < minPassLength) {
return L10n.of(context)!.pleaseChooseAtLeastChars(minLength.toString()); return L10n.of(context)!
.pleaseChooseAtLeastChars(minPassLength.toString());
}
return null;
}
String? password2TextFieldValidator(String? value) {
if (value!.isEmpty) {
return L10n.of(context)!.repeatPassword;
}
if (value != passwordController.text) {
return L10n.of(context)!.passwordsDoNotMatch;
} }
return null; return null;
} }
String? emailTextFieldValidator(String? value) { String? emailTextFieldValidator(String? value) {
if (value!.isEmpty) { if (value!.isEmpty && !noEmailWarningConfirmed) {
return L10n.of(context)!.addEmail; noEmailWarningConfirmed = true;
return L10n.of(context)!.noEmailWarning;
} }
if (value.isNotEmpty && !value.contains('@')) { if (value.isNotEmpty && !value.contains('@')) {
return L10n.of(context)!.pleaseEnterValidEmail; return L10n.of(context)!.pleaseEnterValidEmail;
@ -62,14 +86,16 @@ class SignupPageController extends State<SignupPage> {
try { try {
final client = Matrix.of(context).getLoginClient(); final client = Matrix.of(context).getLoginClient();
final email = emailController.text; final email = emailController.text;
Matrix.of(context).currentClientSecret = if (email.isNotEmpty) {
DateTime.now().millisecondsSinceEpoch.toString(); Matrix.of(context).currentClientSecret =
Matrix.of(context).currentThreepidCreds = DateTime.now().millisecondsSinceEpoch.toString();
await client.requestTokenToRegisterEmail( Matrix.of(context).currentThreepidCreds =
Matrix.of(context).currentClientSecret, await client.requestTokenToRegisterEmail(
email, Matrix.of(context).currentClientSecret,
0, email,
); 0,
);
}
await client.uiaRequestBackground( await client.uiaRequestBackground(
(auth) => client.register( (auth) => client.register(

View File

@ -32,8 +32,9 @@ class SignupPageView extends StatelessWidget {
child: TextFormField( child: TextFormField(
readOnly: controller.loading, readOnly: controller.loading,
autocorrect: false, autocorrect: false,
onChanged: controller.onPasswordType,
autofillHints: autofillHints:
controller.loading ? null : [AutofillHints.password], controller.loading ? null : [AutofillHints.newPassword],
controller: controller.passwordController, controller: controller.passwordController,
obscureText: !controller.showPassword, obscureText: !controller.showPassword,
validator: controller.password1TextFieldValidator, validator: controller.password1TextFieldValidator,
@ -56,6 +57,26 @@ class SignupPageView extends StatelessWidget {
), ),
), ),
), ),
if (controller.displaySecondPasswordField)
Padding(
padding: const EdgeInsets.all(16.0),
child: TextFormField(
readOnly: controller.loading,
autocorrect: false,
autofillHints:
controller.loading ? null : [AutofillHints.newPassword],
controller: controller.password2Controller,
obscureText: !controller.showPassword,
validator: controller.password2TextFieldValidator,
decoration: FluffyThemes.loginTextFieldDecoration(
prefixIcon: const Icon(
Icons.repeat_outlined,
color: Colors.black,
),
hintText: L10n.of(context)!.repeatPassword,
),
),
),
Padding( Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
child: TextFormField( child: TextFormField(

View File

@ -932,7 +932,7 @@ packages:
description: description:
path: "." path: "."
ref: null-safety ref: null-safety
resolved-ref: "5aa8786475bca1b90ff35409eff3e0f5a4768601" resolved-ref: "2906e65ffaa96afbe6c72e8477d4dfcdfd06c2c3"
url: "https://github.com/TheOneWithTheBraid/keyboard_shortcuts.git" url: "https://github.com/TheOneWithTheBraid/keyboard_shortcuts.git"
source: git source: git
version: "0.1.4" version: "0.1.4"