mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-04-01 11:59:06 +00:00
desktop login/password screen
This commit is contained in:
parent
95716bd0f6
commit
cede571350
3 changed files with 179 additions and 17 deletions
lib
pages_desktop_specific
utilities
widgets/custom_buttons
|
@ -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
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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 = () {
|
||||
|
|
Loading…
Reference in a new issue