feat: New onboarding design
This commit is contained in:
parent
a15b510c78
commit
87afa8ac3d
18 changed files with 862 additions and 699 deletions
|
|
@ -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 'package:fluffychat/widgets/matrix.dart';
|
||||
import 'login.dart';
|
||||
|
||||
|
|
@ -13,102 +14,119 @@ class LoginView extends StatelessWidget {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return OnePageCard(
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: controller.loading ? Container() : const BackButton(),
|
||||
elevation: 0,
|
||||
title: Text(
|
||||
L10n.of(context)!.logInTo(Matrix.of(context)
|
||||
.getLoginClient()
|
||||
.homeserver
|
||||
.toString()
|
||||
.replaceFirst('https://', '')),
|
||||
),
|
||||
return LoginScaffold(
|
||||
appBar: AppBar(
|
||||
automaticallyImplyLeading: !controller.loading,
|
||||
backgroundColor: Colors.transparent,
|
||||
iconTheme: const IconThemeData(color: Colors.white),
|
||||
elevation: 0,
|
||||
centerTitle: true,
|
||||
title: Text(
|
||||
L10n.of(context)!.logInTo(Matrix.of(context)
|
||||
.getLoginClient()
|
||||
.homeserver
|
||||
.toString()
|
||||
.replaceFirst('https://', '')),
|
||||
style: const TextStyle(color: Colors.white),
|
||||
),
|
||||
body: Builder(builder: (context) {
|
||||
return AutofillGroup(
|
||||
child: ListView(
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: TextField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
autofocus: true,
|
||||
onChanged: controller.checkWellKnownWithCoolDown,
|
||||
controller: controller.usernameController,
|
||||
textInputAction: TextInputAction.next,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.username],
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: const Icon(Icons.account_box_outlined),
|
||||
hintText: L10n.of(context)!.emailOrUsername,
|
||||
errorText: controller.usernameError,
|
||||
labelText: L10n.of(context)!.emailOrUsername),
|
||||
),
|
||||
body: Builder(builder: (context) {
|
||||
return AutofillGroup(
|
||||
child: ListView(
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: TextField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
autofocus: true,
|
||||
onChanged: controller.checkWellKnownWithCoolDown,
|
||||
controller: controller.usernameController,
|
||||
textInputAction: TextInputAction.next,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.username],
|
||||
decoration: FluffyThemes.loginTextFieldDecoration(
|
||||
prefixIcon: const Icon(Icons.account_box_outlined),
|
||||
errorText: controller.usernameError,
|
||||
hintText: L10n.of(context)!.emailOrUsername,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: TextField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.password],
|
||||
controller: controller.passwordController,
|
||||
textInputAction: TextInputAction.next,
|
||||
obscureText: !controller.showPassword,
|
||||
onSubmitted: controller.login,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: const Icon(Icons.lock_outlined),
|
||||
hintText: '****',
|
||||
errorText: controller.passwordError,
|
||||
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,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: TextField(
|
||||
readOnly: controller.loading,
|
||||
autocorrect: false,
|
||||
autofillHints:
|
||||
controller.loading ? null : [AutofillHints.password],
|
||||
controller: controller.passwordController,
|
||||
textInputAction: TextInputAction.next,
|
||||
obscureText: !controller.showPassword,
|
||||
onSubmitted: controller.login,
|
||||
decoration: FluffyThemes.loginTextFieldDecoration(
|
||||
prefixIcon: const Icon(Icons.lock_outlined),
|
||||
errorText: controller.passwordError,
|
||||
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)!.password,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Hero(
|
||||
tag: 'loginButton',
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: ElevatedButton(
|
||||
onPressed: controller.loading
|
||||
? null
|
||||
: () => controller.login(context),
|
||||
child: controller.loading
|
||||
? const LinearProgressIndicator()
|
||||
: Text(L10n.of(context)!.login),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Divider(height: 32),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
),
|
||||
Hero(
|
||||
tag: 'signinButton',
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: ElevatedButton(
|
||||
onPressed: controller.loading
|
||||
? null
|
||||
: controller.passwordForgotten,
|
||||
: () => controller.login(context),
|
||||
style: ElevatedButton.styleFrom(
|
||||
primary: Theme.of(context).secondaryHeaderColor,
|
||||
onPrimary: Colors.red,
|
||||
primary: Colors.white.withAlpha(200),
|
||||
onPrimary: Colors.black,
|
||||
shadowColor: Colors.white,
|
||||
),
|
||||
child: Text(L10n.of(context)!.passwordForgotten),
|
||||
child: controller.loading
|
||||
? const LinearProgressIndicator()
|
||||
: Text(L10n.of(context)!.login),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
const Expanded(child: Divider(color: Colors.white)),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Text(
|
||||
L10n.of(context)!.or,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
const Expanded(child: Divider(color: Colors.white)),
|
||||
],
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: ElevatedButton(
|
||||
onPressed:
|
||||
controller.loading ? () {} : controller.passwordForgotten,
|
||||
style: ElevatedButton.styleFrom(
|
||||
primary: Colors.white.withAlpha(156),
|
||||
onPrimary: Colors.red,
|
||||
shadowColor: Colors.white,
|
||||
),
|
||||
child: Text(L10n.of(context)!.passwordForgotten),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue