desktop login/password screen

This commit is contained in:
julian 2022-11-08 13:50:53 -06:00
parent 95716bd0f6
commit cede571350
3 changed files with 179 additions and 17 deletions
lib
pages_desktop_specific
utilities
widgets/custom_buttons

View file

@ -1,7 +1,14 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
import 'package:stackwallet/widgets/desktop/primary_button.dart';
import 'package:stackwallet/widgets/stack_text_field.dart';
class DesktopLoginView extends StatefulWidget {
const DesktopLoginView({
@ -18,28 +25,155 @@ class DesktopLoginView extends StatefulWidget {
}
class _DesktopLoginViewState extends State<DesktopLoginView> {
late final TextEditingController passwordController;
late final FocusNode passwordFocusNode;
bool hidePassword = true;
bool _continueEnabled = false;
@override
void initState() {
passwordController = TextEditingController();
passwordFocusNode = FocusNode();
super.initState();
}
@override
void dispose() {
passwordController.dispose();
passwordFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Material(
child: Column(
return DesktopScaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Login",
style: STextStyles.desktopH3(context),
),
PrimaryButton(
label: "Login",
onPressed: () {
// todo auth
SizedBox(
width: 480,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SvgPicture.asset(
Assets.svg.stackIcon(context),
width: 100,
),
const SizedBox(
height: 42,
),
Text(
"Stack Wallet",
style: STextStyles.desktopH1(context),
),
const SizedBox(
height: 24,
),
SizedBox(
width: 350,
child: Text(
"Open source multicoin wallet for everyone",
textAlign: TextAlign.center,
style: STextStyles.desktopSubtitleH1(context),
),
),
const SizedBox(
height: 24,
),
ClipRRect(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
child: TextField(
key: const Key("desktopLoginPasswordFieldKey"),
focusNode: passwordFocusNode,
controller: passwordController,
style: STextStyles.desktopTextMedium(context).copyWith(
height: 2,
),
obscureText: hidePassword,
enableSuggestions: false,
autocorrect: false,
decoration: standardInputDecoration(
"Enter password",
passwordFocusNode,
context,
).copyWith(
suffixIcon: UnconstrainedBox(
child: SizedBox(
height: 70,
child: Row(
children: [
const SizedBox(
width: 24,
),
GestureDetector(
key: const Key(
"restoreFromFilePasswordFieldShowPasswordButtonKey"),
onTap: () async {
setState(() {
hidePassword = !hidePassword;
});
},
child: SvgPicture.asset(
hidePassword
? Assets.svg.eye
: Assets.svg.eyeSlash,
color: Theme.of(context)
.extension<StackColors>()!
.textDark3,
width: 24,
height: 24,
),
),
const SizedBox(
width: 12,
),
],
),
),
),
),
onChanged: (newValue) {
setState(() {
_continueEnabled = passwordController.text.isNotEmpty;
});
},
),
),
const SizedBox(
height: 24,
),
PrimaryButton(
label: "Continue",
enabled: _continueEnabled,
onPressed: () {
// todo auth
Navigator.of(context).pushNamedAndRemoveUntil(
DesktopHomeView.routeName,
(route) => false,
);
},
)
Navigator.of(context).pushNamedAndRemoveUntil(
DesktopHomeView.routeName,
(route) => false,
);
},
),
const SizedBox(
height: 60,
),
BlueTextButton(
text: "Forgot password?",
textSize: 20,
onTap: () {
// todo: new screen
},
),
],
),
),
],
),
);

View file

@ -508,6 +508,25 @@ class STextStyles {
// Desktop
static TextStyle desktopH1(BuildContext context) {
switch (_theme(context).themeType) {
case ThemeType.light:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 40,
height: 40 / 40,
);
case ThemeType.dark:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 40,
height: 40 / 40,
);
}
}
static TextStyle desktopH2(BuildContext context) {
switch (_theme(context).themeType) {
case ThemeType.light:

View file

@ -10,11 +10,13 @@ class BlueTextButton extends ConsumerStatefulWidget {
required this.text,
this.onTap,
this.enabled = true,
this.textSize,
}) : super(key: key);
final String text;
final VoidCallback? onTap;
final bool enabled;
final double? textSize;
@override
ConsumerState<BlueTextButton> createState() => _BlueTextButtonState();
@ -67,7 +69,14 @@ class _BlueTextButtonState extends ConsumerState<BlueTextButton>
textAlign: TextAlign.center,
text: TextSpan(
text: widget.text,
style: STextStyles.link2(context).copyWith(color: color),
style: widget.textSize == null
? STextStyles.link2(context).copyWith(
color: color,
)
: STextStyles.link2(context).copyWith(
color: color,
fontSize: widget.textSize,
),
recognizer: widget.enabled
? (TapGestureRecognizer()
..onTap = () {