TF-518 Apply new UI for login in mobile

2022-05-04 20:15:40 +07:00
parent 0932cf0185
commit cc66d141d4
13 changed files with 465 additions and 99 deletions
@@ -6,6 +6,7 @@ import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/login/domain/state/authentication_user_state.dart';
 import 'package:tmail_ui_user/features/login/domain/usecases/authentication_user_interactor.dart';
+import 'package:tmail_ui_user/features/login/presentation/login_form_type.dart';
 import 'package:tmail_ui_user/features/login/presentation/state/login_state.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
@@ -26,6 +27,7 @@ class LoginController extends GetxController {
  );

  var loginState = LoginState(Right(LoginInitAction())).obs;
+  final loginFormType = LoginFormType.baseUrlForm.obs;

  String? _urlText;
  String? _userNameText;
@@ -43,6 +45,20 @@ class LoginController extends GetxController {

  Password? _parsePassword(String? password) => password != null ? Password(password.trim()) : null;

+  void handleNextInUrlInputFormPress() {
+    completeInputUrlAction();
+  }
+
+  void handleBackInCredentialForm() {
+    loginState.value = LoginState(Right(LoginInitAction()));
+    loginFormType.value = LoginFormType.baseUrlForm;
+  }
+
+  void completeInputUrlAction() {
+    loginState.value = LoginState(Right(InputUrlCompletion()));
+    loginFormType.value = LoginFormType.credentialForm;
+  }
+
  void handleLoginPressed() {
    final baseUri = kIsWeb ? _parseUri(AppConfig.baseUrl) : _parseUri(_urlText);
    final userName = _parseUserName(_userNameText);
@@ -82,7 +98,7 @@ class LoginController extends GetxController {

  @override
  void onClose() {
-    urlInputController.dispose();
+    urlInputController.clear();
    super.onClose();
  }
 }
@@ -0,0 +1,3 @@
+enum LoginFormType {
+  none, baseUrlForm, credentialForm
+}
@@ -1,18 +1,20 @@
 import 'package:core/core.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/login/domain/state/authentication_user_state.dart';
 import 'package:tmail_ui_user/features/login/presentation/login_controller.dart';
+import 'package:tmail_ui_user/features/login/presentation/login_form_type.dart';
 import 'package:tmail_ui_user/features/login/presentation/state/login_state.dart';
 import 'package:tmail_ui_user/features/login/presentation/widgets/login_input_decoration_builder.dart';
+import 'package:tmail_ui_user/features/login/presentation/widgets/login_text_input_builder.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class LoginView extends GetWidget<LoginController> {

  final loginController = Get.find<LoginController>();
  final imagePaths = Get.find<ImagePaths>();
-  final responsiveUtils = Get.find<ResponsiveUtils>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
  final keyboardUtils = Get.find<KeyboardUtils>();

  LoginView({Key? key}) : super(key: key);
@@ -20,97 +22,161 @@ class LoginView extends GetWidget<LoginController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      resizeToAvoidBottomInset: false,
+      resizeToAvoidBottomInset: true,
      backgroundColor: AppColor.primaryLightColor,
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: SafeArea(
-          child: Center(
-            child: SingleChildScrollView(
-              reverse: true,
-              child: Padding(
-                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
-                child: Container(
-                  alignment: Alignment.center,
-                  padding: const EdgeInsets.only(top: 40),
-                  child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    crossAxisAlignment: CrossAxisAlignment.center,
-                    children: [
-                      _buildSlogan(context),
-                      Obx(() => _buildLoginMessage(context, loginController.loginState.value)),
-                      if (!kIsWeb) _buildUrlInput(context),
-                      _buildUserNameInput(context),
-                      _buildPasswordInput(context),
-                      Obx(() => loginController.loginState.value.viewState.fold(
-                        (failure) => _buildLoginButton(context),
-                        (success) => success is LoginLoadingAction ? _buildLoadingCircularProgress() : _buildLoginButton(context))),
-                    ],
-                  ),
-                ),
+          child: _supportScrollForm(context)
+            ? Stack(
+                children: [
+                  Center(child: SingleChildScrollView(child: _buildCenterForm(context), scrollDirection: Axis.vertical)),
+                  Obx(() {
+                    return loginController.loginFormType.value == LoginFormType.credentialForm
+                      ? _buildBackButton(context)
+                      : const SizedBox.shrink();
+                  })
+                ]
+              )
+            : Stack(
+                children: [
+                  _buildCenterForm(context),
+                  Obx(() {
+                    return loginController.loginFormType.value == LoginFormType.credentialForm
+                      ? _buildBackButton(context)
+                      : const SizedBox.shrink();
+                  })
+                ]
+            ),
+        ),
+    ));
+  }
+
+  Widget _buildCenterForm(BuildContext context) {
+    return Center(
+      child: ConstrainedBox(
+        constraints: _supportScrollForm(context)
+          ? const BoxConstraints(minWidth: 240, maxWidth: 400)
+          : const BoxConstraints(minWidth: double.infinity),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          mainAxisSize: MainAxisSize.max,
+          children: [
+            Padding(
+              padding: EdgeInsets.only(
+                top: _responsiveUtils.isHeightShortest(context) ? 64 : 0),
+              child: Text(
+                AppLocalizations.of(context).login,
+                style: const TextStyle(fontSize: 32, color: AppColor.colorNameEmail, fontWeight: FontWeight.w900)
              )
            ),
-          ),
+            Obx(() => _buildLoginMessage(context, loginController.loginState.value)),
+            Obx(() {
+              switch (controller.loginFormType.value) {
+                case LoginFormType.baseUrlForm:
+                  return _buildUrlInput(context);
+                case LoginFormType.credentialForm:
+                  return _buildInputCredentialForm(context);
+                default:
+                  return const SizedBox.shrink();
+              }
+            }),
+            Obx(() {
+              switch (controller.loginFormType.value) {
+                case LoginFormType.baseUrlForm:
+                  return _supportScrollForm(context)
+                    ? _buildNextButton(context)
+                    : _buildExpandedButton(context, _buildNextButton(context));
+                case LoginFormType.credentialForm:
+                  return Obx(() => loginController.loginState.value.viewState.fold(
+                    (failure) => _buildLoginButtonInContext(context),
+                    (success) => success is LoginLoadingAction
+                      ? _buildLoadingCircularProgress()
+                      : _buildLoginButtonInContext(context)));
+                default:
+                  return const SizedBox.shrink();
+              }
+            })
+          ]
        ),
-      ),
+      )
    );
  }

-  Widget _buildSlogan(BuildContext context) {
-    return (SloganBuilder()
-        ..setSloganText(AppLocalizations.of(context).login_text_slogan)
-        ..setSloganTextAlign(TextAlign.center)
-        ..setSloganTextStyle(const TextStyle(color: AppColor.primaryColor, fontSize: 16, fontWeight: FontWeight.w700))
-        ..setLogo(imagePaths.icLogoTMail))
-      .build();
+  Widget _buildBackButton(BuildContext context) {
+    return Positioned(
+        left: 12,
+        top: 12,
+        child: IconButton(
+          key: const Key('login_arrow_back_button'),
+          onPressed: () => controller.handleBackInCredentialForm(),
+          icon: SvgPicture.asset(
+            imagePaths.icBack,
+            alignment: Alignment.center,
+            color: AppColor.primaryColor
+          )
+        ),
+    );
  }

  Widget _buildLoginMessage(BuildContext context, LoginState loginState) {
    return Padding(
-      padding: const EdgeInsets.only(bottom: 24, top: 60),
+      padding: const EdgeInsets.only(top: 11, bottom: 36, left: 58, right: 58),
      child: SizedBox(
-        width: responsiveUtils.getWidthLoginTextField(context),
+        width: _responsiveUtils.getWidthLoginTextField(context),
        child: CenterTextBuilder()
          .key(const Key('login_message'))
          .text(loginState.viewState.fold(
            (failure) => failure is AuthenticationUserFailure
              ? AppLocalizations.of(context).unknown_error_login_message
-              : AppLocalizations.of(context).login_text_login_to_continue,
-            (success) => AppLocalizations.of(context).login_text_login_to_continue))
+              : AppLocalizations.of(context).loginInputUrlMessage,
+            (success) => AppLocalizations.of(context).loginInputUrlMessage))
          .textStyle(TextStyle(
+            fontSize: 15,
+            fontWeight: FontWeight.w400,
            color: loginState.viewState.fold(
              (failure) => failure is AuthenticationUserFailure
                ? AppColor.textFieldErrorBorderColor
-                : AppColor.appColor,
-              (success) => AppColor.appColor)))
+                : AppColor.colorNameEmail,
+              (success) => AppColor.colorNameEmail)))
          .build()
      )
    );
  }

+  Widget _buildInputCredentialForm(BuildContext context) {
+    return Column(
+      children: [
+        _buildUserNameInput(context),
+        _buildPasswordInput(context)
+      ],
+    );
+  }
+
  Widget _buildUrlInput(BuildContext context) {
    return Padding(
-      padding: const EdgeInsets.only(bottom: 16),
-      child: SizedBox(
-        width: responsiveUtils.getWidthLoginTextField(context),
+      padding: const EdgeInsets.only(right: 24, left: 24, bottom: 24),
+      child: Container(
        child: (TextFieldBuilder()
            ..key(const Key('login_url_input'))
            ..onChange((value) => loginController.formatUrl(value))
            ..textInputAction(TextInputAction.next)
            ..addController(loginController.urlInputController)
            ..keyboardType(TextInputType.url)
+            ..onSubmitted((value) {
+                controller.handleNextInUrlInputFormPress();
+              })
            ..textDecoration((LoginInputDecorationBuilder()
-                ..setLabelText(AppLocalizations.of(context).prefix_https)
-                ..setPrefixText(AppLocalizations.of(context).prefix_https))
-                .build()))
+                  ..setLabelText(AppLocalizations.of(context).prefix_https)
+                  ..setPrefixText(AppLocalizations.of(context).prefix_https))
+               .build()))
          .build()));
  }

  Widget _buildUserNameInput(BuildContext context) {
    return Padding(
-      padding: const EdgeInsets.only(bottom: 16),
-      child: SizedBox(
-        width: responsiveUtils.getWidthLoginTextField(context),
+      padding: const EdgeInsets.only(bottom: 16, right: 24, left: 24),
+      child: Container(
        child: (TextFieldBuilder()
            ..key(const Key('login_username_input'))
            ..onChange((value) => loginController.setUserNameText(value))
@@ -125,40 +191,78 @@ class LoginView extends GetWidget<LoginController> {

  Widget _buildPasswordInput(BuildContext context) {
    return Padding(
-      padding: const EdgeInsets.only(bottom: 40),
-      child: SizedBox(
-        width: responsiveUtils.getWidthLoginTextField(context),
-        child: (TextFieldBuilder()
+      padding: const EdgeInsets.only(bottom: 40, right: 24, left: 24),
+      child: Container(
+        child: (LoginTextInputBuilder(context, imagePaths)
+            ..setOnSubmitted((value) => loginController.handleLoginPressed())
+            ..passwordInput(true)
            ..key(const Key('login_password_input'))
            ..obscureText(true)
            ..onChange((value) => loginController.setPasswordText(value))
            ..textInputAction(TextInputAction.done)
-            ..textDecoration((LoginInputDecorationBuilder()
-                ..setLabelText(AppLocalizations.of(context).password)
-                ..setHintText(AppLocalizations.of(context).password))
-                .build()))
+            ..hintText(AppLocalizations.of(context).password))
          .build()));
  }

+  Widget _buildExpandedButton(BuildContext context, Widget child) {
+    return Expanded(
+      child: Align(
+        alignment: FractionalOffset.bottomCenter,
+        child: child
+      )
+    );
+  }
+
+  Widget _buildNextButton(BuildContext context) {
+    return Container(
+      margin:  const EdgeInsets.only(bottom: 16, left: 24, right: 24),
+      width: _responsiveUtils.getDeviceWidth(context),height: 48,
+      child: ElevatedButton(
+        key: const Key('nextToCredentialForm'),
+        style: ButtonStyle(
+          foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
+          backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.primaryColor),
+          shape: MaterialStateProperty.all(RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(10),
+            side: const BorderSide(width: 0, color: AppColor.primaryColor)
+          ))
+        ),
+        child: Text(AppLocalizations.of(context).next,
+          style: const TextStyle(fontSize: 16, color: Colors.white)
+        ),
+        onPressed: () {
+          loginController.handleNextInUrlInputFormPress();
+        }
+      )
+    );
+  }
+
+  Widget _buildLoginButtonInContext(BuildContext context) {
+    return _supportScrollForm(context)
+      ? _buildLoginButton(context)
+      : _buildExpandedButton(context, _buildLoginButton(context));
+  }
+
  Widget _buildLoginButton(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 16),
-      child: SizedBox(
-        key: const Key('login_confirm_button'),
-        width: responsiveUtils.getWidthLoginButton(),
-        height: 48,
-        child: ElevatedButton(
-          style: ButtonStyle(
-            foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
-            backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.buttonColor),
-            shape: MaterialStateProperty.all(RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(80),
-              side: const BorderSide(width: 0, color: AppColor.buttonColor)))),
-          child: Text(AppLocalizations.of(context).login, style: const TextStyle(fontSize: 16, color: Colors.white)),
-          onPressed: () {
-            keyboardUtils.hideKeyboard(context);
-            loginController.handleLoginPressed();
-          }),
+    return Container(
+      margin:  const EdgeInsets.only(bottom: 16, left: 24, right: 24),
+      width: _responsiveUtils.getDeviceWidth(context),height: 48,
+      child: ElevatedButton(
+        key: const Key('loginSubmitForm'),
+        style: ButtonStyle(
+          foregroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => Colors.white),
+          backgroundColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.primaryColor),
+          shape: MaterialStateProperty.all(RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(10),
+            side: const BorderSide(width: 0, color: AppColor.primaryColor)
+          ))
+        ),
+        child: Text(AppLocalizations.of(context).login,
+          style: const TextStyle(fontSize: 16, color: Colors.white)
+        ),
+        onPressed: () {
+          loginController.handleLoginPressed();
+        }
      )
    );
  }
@@ -170,4 +274,8 @@ class LoginView extends GetWidget<LoginController> {
      height: 40,
      child: CircularProgressIndicator(color: AppColor.primaryColor));
  }
+  
+  bool _supportScrollForm(BuildContext context) {
+    return !(responsiveUtils.isMobile(context) && responsiveUtils.isPortrait(context));
+  }
 }
@@ -7,6 +7,12 @@ class LoginState extends AppState {
  LoginState(Either<Failure, Success> viewState) : super(viewState);
 }

+@immutable
+class InputUrlCompletion extends ViewState {
+  @override
+  List<Object?> get props => [];
+}
+
@immutable
 class LoginLoadingAction extends ViewState {
  @override
@@ -8,13 +8,13 @@ class LoginInputDecorationBuilder extends InputDecorationBuilder {
  InputDecoration build() {
    return InputDecoration(
      enabledBorder: enabledBorder ?? const OutlineInputBorder(
-        borderRadius: BorderRadius.all(Radius.circular(29)),
+        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(width: 1, color: AppColor.textFieldBorderColor)),
-      focusedBorder: enabledBorder ?? const OutlineInputBorder(
-        borderRadius: BorderRadius.all(Radius.circular(29)),
+      focusedBorder:  focusBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(width: 2, color: AppColor.textFieldFocusedBorderColor)),
      errorBorder: const OutlineInputBorder(
-        borderRadius: BorderRadius.all(Radius.circular(29)),
+        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(width: 1, color: AppColor.textFieldErrorBorderColor)),
      prefixText: prefixText,
      labelText: labelText,
@@ -0,0 +1,196 @@
+// LinShare is an open source filesharing software, part of the LinPKI software
+// suite, developed by Linagora.
+//
+// Copyright (C) 2020 LINAGORA
+//
+// This program is free software: you can redistribute it and/or modify it under the
+// terms of the GNU Affero General Public License as published by the Free Software
+// Foundation, either version 3 of the License, or (at your option) any later version,
+// provided you comply with the Additional Terms applicable for LinShare software by
+// Linagora pursuant to Section 7 of the GNU Affero General Public License,
+// subsections (b), (c), and (e), pursuant to which you must notably (i) retain the
+// display in the interface of the “LinShare™” trademark/logo, the "Libre & Free" mention,
+// the words “You are using the Free and Open Source version of LinShare™, powered by
+// Linagora © 2009–2020. Contribute to Linshare R&D by subscribing to an Enterprise
+// offer!”. You must also retain the latter notice in all asynchronous messages such as
+// e-mails sent with the Program, (ii) retain all hypertext links between LinShare and
+// http://www.linshare.org, between linagora.com and Linagora, and (iii) refrain from
+// infringing Linagora intellectual property rights over its trademarks and commercial
+// brands. Other Additional Terms apply, see
+// <http://www.linshare.org/licenses/LinShare-License_AfferoGPL-v3.pdf
+//
+// for more details.
+// This program is distributed in the hope that it will be useful, but WITHOUT ANY
+// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for
+// more details.
+// You should have received a copy of the GNU Affero General Public License and its
+// applicable Additional Terms for LinShare along with this program. If not, see
+// <http://www.gnu.org/licenses
+// for the GNU Affero General Public License version
+//
+// 3 and <http://www.linshare.org/licenses/LinShare-License_AfferoGPL-v3.pdf
+// for
+//
+// the Additional Terms applicable to LinShare software.
+
+import 'dart:async';
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import 'login_input_decoration_builder.dart';
+
+typedef SetErrorString = String? Function(String);
+typedef OnSubmitted = void Function(String);
+
+class LoginTextInputBuilder {
+  Key? _key;
+  String? _title;
+  String? _hintText;
+  String? _labelText;
+  String? _prefixText;
+  SetErrorString? _setErrorString;
+  String? _errorText;
+  Timer? _debounce;
+  bool? _obscureText;
+  ValueChanged<String>? _onTextChange;
+  TextInputAction? _textInputAction;
+  TextEditingController? _textEditingController;
+  bool? _passwordInput;
+  OnSubmitted? _onSubmitted;
+
+  final BuildContext context;
+  final ImagePaths imagePaths;
+
+  LoginTextInputBuilder(this.context, this.imagePaths);
+
+  void key(Key key) {
+    _key = key;
+  }
+
+  void title(String? title) {
+    _title = title;
+  }
+
+  void hintText(String? hintText) {
+    _hintText = hintText;
+  }
+
+  void labelText(String? labelText) {
+    _labelText = labelText;
+  }
+
+  void prefixText(String? prefixText) {
+    _prefixText = prefixText;
+  }
+
+  void textInputAction(TextInputAction inputAction) {
+    _textInputAction = inputAction;
+  }
+
+  void obscureText(bool obscureText) {
+    _obscureText = obscureText;
+  }
+
+  void onChange(ValueChanged<String> onChange) {
+    _onTextChange = onChange;
+  }
+
+  void setErrorString(SetErrorString setErrorString) {
+    _setErrorString = setErrorString;
+  }
+
+  void passwordInput(bool? passwordInput) {
+    _passwordInput = passwordInput;
+  }
+
+  void setTextEditingController(TextEditingController textEditingController) {
+    _textEditingController = textEditingController;
+  }
+
+  void _onTextChanged(String name, StateSetter setState) {
+    if (_onTextChange != null) {
+      _onTextChange!(name);
+    }
+    if (_debounce?.isActive ?? false) _debounce?.cancel();
+    _debounce = Timer(const Duration(milliseconds: 500), () {
+      setState(() {
+        _errorText = (_setErrorString != null) ? _setErrorString!(name) : '';
+      });
+    });
+  }
+
+  void errorText(String? errorText) {
+    _errorText = errorText;
+  }
+
+  void _onObscureTextChanged(bool? value, StateSetter setState) {
+    setState(() {
+      _obscureText = value == true ? false : true;
+    });
+  }
+
+  void setOnSubmitted(OnSubmitted onSubmitted) {
+    _onSubmitted = onSubmitted;
+  }
+
+  Widget build() {
+    return StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+      return Wrap(
+        key: _key,
+        children: <Widget>[
+          Text(_title ?? '', style: const TextStyle(color: AppColor.loginTextFieldHintColor, fontSize: 14, fontWeight: FontWeight.normal)),
+          Padding(
+            padding: const EdgeInsets.only(top: 8),
+            child: Stack(
+              alignment: AlignmentDirectional.centerEnd,
+              children: [
+                TextFormField(
+                  onFieldSubmitted: _onSubmitted,
+                  onChanged: (value) => _onTextChanged(value, setState),
+                  obscureText: _obscureText ?? false,
+                  textInputAction: _textInputAction,
+                  controller: _textEditingController,
+                  cursorColor: AppColor.primaryColor,
+                  style: const TextStyle(color: AppColor.loginTextFieldHintColor, fontSize: 16, fontWeight: FontWeight.normal),
+                  decoration: (LoginInputDecorationBuilder()
+                      ..setHintText(_hintText)
+                      ..setPrefixText(_prefixText)
+                      ..setErrorText(_errorText)
+                      ..setHintStyle(const TextStyle(color: AppColor.loginTextFieldHintColor, fontSize: 16, fontWeight: FontWeight.normal))
+                      ..setPrefixStyle(const TextStyle(color: AppColor.loginTextFieldHintColor, fontSize: 16, fontWeight: FontWeight.normal))
+                      ..setErrorTextStyle(const TextStyle(color: AppColor.loginTextFieldErrorBorder, fontSize: 13, fontWeight: FontWeight.normal))
+                      ..setFocusBorder(const OutlineInputBorder(
+                          borderRadius: BorderRadius.all(Radius.circular(10)),
+                          borderSide: BorderSide(width: 1, color: AppColor.loginTextFieldFocusedBorder)))
+                      ..setEnabledBorder(const OutlineInputBorder(
+                          borderRadius: BorderRadius.all(Radius.circular(10)),
+                          borderSide: BorderSide(width: 1, color: AppColor.loginTextFieldBorderColor)))
+                      ..setErrorBorder(const OutlineInputBorder(
+                          borderRadius: BorderRadius.all(Radius.circular(10)),
+                          borderSide: BorderSide(width: 1, color: AppColor.loginTextFieldErrorBorder))))
+                    .build(),
+                ),
+                if (_passwordInput == true)
+                  Transform(
+                    transform: Matrix4.translationValues(
+                      0.0,
+                      (_errorText != null && _errorText!.isNotEmpty) ? -10.0 : 0.0,
+                      0.0),
+                    child: IconButton(
+                      onPressed: () => _onObscureTextChanged(_obscureText, setState),
+                      icon: SvgPicture.asset(
+                        _obscureText == true ? imagePaths.icEye : imagePaths.icEyeOff,
+                        width: 18,
+                        height: 18,
+                        fit: BoxFit.fill)))
+              ]
+            )
+          ),
+        ],
+      );
+    });
+  }
+}
@@ -29,6 +29,14 @@ class AppLocalizations {
        name: 'login_text_slogan');
  }

+  String get loginInputUrlMessage {
+    return Intl.message('To login and access your message please connect to your JMAP server', name: 'loginInputUrlMessage');
+  }
+  
+  String get next {
+    return Intl.message('Next', name: 'next');
+  }
+
  String get prefix_https {
    return Intl.message('https://',
        name: 'prefix_https');
@@ -49,11 +57,6 @@ class AppLocalizations {
        name: 'login');
  }

-  String get login_text_login_to_continue {
-    return Intl.message('Please login to continue',
-        name: 'login_text_login_to_continue');
-  }
-
  String get unknown_error_login_message {
    return Intl.message('Unknown error occurred, please try again',
        name: 'unknown_error_login_message');