DysonNetwork/App
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimized the auth experience

Browse Source
This commit is contained in:
LittleSheep 2025-06-07 12:14:57 +08:00
parent dff8532229
commit d832729278
6 changed files with 275 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/i18n/en-US.json
View File

@ -336,5 +336,7 @@
"authFactorNoQrCode": "No QR code available for this authentication factor", "authFactorNoQrCode": "No QR code available for this authentication factor",
"cancel": "Cancel", "cancel": "Cancel",
"confirm": "Confirm", "confirm": "Confirm",
"authFactorAdditional": "One more step" "authFactorAdditional": "One more step",
"authFactorHint": "Contact method hint",
"authFactorHintHelper": "You need provide a part of your contact method and we will send the verification code to that contact method if it matched our records"
} }

112
lib/screens/account/me/settings.dart
View File

@ -106,13 +106,44 @@ class AccountSettingsScreen extends HookConsumerWidget {
ListTile( ListTile(
minLeadingWidth: 48, minLeadingWidth: 48,
contentPadding: const EdgeInsets.only( contentPadding: const EdgeInsets.only(
left: 24, left: 16,
right: 17, right: 17,
top: 2,
bottom: 4,
), ),
title: Text(kFactorTypes[factor.type]!.$1).tr(), title:
subtitle: Text(kFactorTypes[factor.type]!.$2).tr(), Text(
leading: Icon(kFactorTypes[factor.type]!.$3), kFactorTypes[factor.type]!.$1,
style:
factor.enabledAt == null
? TextStyle(
decoration: TextDecoration.lineThrough,
)
: null,
).tr(),
subtitle:
Text(
kFactorTypes[factor.type]!.$2,
style:
factor.enabledAt == null
? TextStyle(
decoration: TextDecoration.lineThrough,
)
: null,
).tr(),
leading: CircleAvatar(
backgroundColor:
factor.enabledAt == null
? Theme.of(
context,
).colorScheme.secondaryContainer
: Theme.of(
context,
).colorScheme.primaryContainer,
child: Icon(kFactorTypes[factor.type]!.$3),
).padding(top: 4),
trailing: const Icon(Symbols.chevron_right), trailing: const Icon(Symbols.chevron_right),
isThreeLine: true,
onTap: () { onTap: () {
if (factor.type == 0) { if (factor.type == 0) {
requestResetPassword(); requestResetPassword();
@ -341,44 +372,47 @@ class _AuthFactorSheet extends HookConsumerWidget {
Future<void> enableFactor() async { Future<void> enableFactor() async {
String? password; String? password;
final confirmed = await showDialog<bool>( if ([3].contains(factor.type)) {
context: context, final confirmed = await showDialog<bool>(
builder: context: context,
(context) => AlertDialog( builder:
title: Text('authFactorEnable').tr(), (context) => AlertDialog(
content: Column( title: Text('authFactorEnable').tr(),
mainAxisSize: MainAxisSize.min, content: Column(
children: [ mainAxisSize: MainAxisSize.min,
Text('authFactorEnableHint').tr(), children: [
const SizedBox(height: 16), Text('authFactorEnableHint').tr(),
OtpTextField( const SizedBox(height: 16),
numberOfFields: 6, OtpTextField(
obscureText: false, showCursor: false,
showFieldAsBox: true, numberOfFields: 6,
focusedBorderColor: Theme.of(context).colorScheme.primary, obscureText: false,
onSubmit: (String verificationCode) { showFieldAsBox: true,
password = verificationCode; focusedBorderColor: Theme.of(context).colorScheme.primary,
}, onSubmit: (String verificationCode) {
textStyle: Theme.of(context).textTheme.titleLarge!, password = verificationCode;
},
textStyle: Theme.of(context).textTheme.titleLarge!,
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: Text('cancel').tr(),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: Text('confirm').tr(),
), ),
], ],
), ),
actions: [ );
TextButton( if (confirmed == false ||
onPressed: () => Navigator.of(context).pop(false), (password?.isEmpty ?? true) ||
child: Text('cancel').tr(), !context.mounted) {
), return;
TextButton( }
onPressed: () => Navigator.of(context).pop(true),
child: Text('confirm').tr(),
),
],
),
);
if (confirmed == false ||
(password?.isEmpty ?? true) ||
!context.mounted) {
return;
} }
try { try {
final client = ref.read(apiClientProvider); final client = ref.read(apiClientProvider);

260
lib/screens/auth/login.dart
View File

@ -1,9 +1,13 @@
import 'dart:convert';
import 'dart:math' as math;
import 'package:animations/animations.dart'; import 'package:animations/animations.dart';
import 'package:auto_route/auto_route.dart'; import 'package:auto_route/auto_route.dart';
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:gap/gap.dart'; import 'package:gap/gap.dart';
import 'package:island/models/auth.dart'; import 'package:island/models/auth.dart';
@ -38,10 +42,13 @@ class LoginScreen extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final isBusy = useState(false);
final period = useState(0); final period = useState(0);
final currentTicket = useState<SnAuthChallenge?>(null); final currentTicket = useState<SnAuthChallenge?>(null);
final factors = useState<List<SnAuthFactor>>([]); final factors = useState<List<SnAuthFactor>>([]);
final factorPicked = useState<SnAuthFactor?>(null); final factorPicked = useState<SnAuthFactor?>(null);
return AppScaffold( return AppScaffold(
noBackground: false, noBackground: false,
appBar: AppBar( appBar: AppBar(
@ -50,54 +57,83 @@ class LoginScreen extends HookConsumerWidget {
), ),
body: Theme( body: Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent), data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: child: Column(
SingleChildScrollView( children: [
child: PageTransitionSwitcher( if (isBusy.value)
transitionBuilder: ( LinearProgressIndicator(
Widget child, minHeight: 4,
Animation<double> primaryAnimation, borderRadius: BorderRadius.zero,
Animation<double> secondaryAnimation, )
) { else
return SharedAxisTransition( const Gap(4),
animation: primaryAnimation, Expanded(
secondaryAnimation: secondaryAnimation, child:
transitionType: SharedAxisTransitionType.horizontal, SingleChildScrollView(
child: Container( child: PageTransitionSwitcher(
constraints: BoxConstraints(maxWidth: 380), transitionBuilder: (
child: child, Widget child,
), Animation<double> primaryAnimation,
); Animation<double> secondaryAnimation,
}, ) {
child: switch (period.value % 3) { return SharedAxisTransition(
1 => _LoginPickerScreen( animation: primaryAnimation,
key: const ValueKey(1), secondaryAnimation: secondaryAnimation,
ticket: currentTicket.value, transitionType: SharedAxisTransitionType.horizontal,
factors: factors.value, child: Container(
onChallenge: constraints: BoxConstraints(maxWidth: 380),
(SnAuthChallenge? p0) => currentTicket.value = p0, child: child,
onPickFactor: (SnAuthFactor p0) => factorPicked.value = p0, ),
onNext: () => period.value++, );
), },
2 => _LoginCheckScreen( child: switch (period.value % 3) {
key: const ValueKey(2), 1 => _LoginPickerScreen(
challenge: currentTicket.value, key: const ValueKey(1),
factor: factorPicked.value, ticket: currentTicket.value,
onChallenge: factors: factors.value,
(SnAuthChallenge? p0) => currentTicket.value = p0, onChallenge:
onNext: () => period.value++, (SnAuthChallenge? p0) => currentTicket.value = p0,
), onPickFactor:
_ => _LoginLookupScreen( (SnAuthFactor p0) => factorPicked.value = p0,
key: const ValueKey(0), onNext: () => period.value++,
ticket: currentTicket.value, onBusy: (value) => isBusy.value = value,
onChallenge: ),
(SnAuthChallenge? p0) => currentTicket.value = p0, 2 => _LoginCheckScreen(
onFactor: key: const ValueKey(2),
(List<SnAuthFactor>? p0) => factors.value = p0 ?? [], challenge: currentTicket.value,
onNext: () => period.value++, factor: factorPicked.value,
), onChallenge:
}, (SnAuthChallenge? p0) => currentTicket.value = p0,
).padding(all: 24), onNext: () => period.value = 1,
).center(), onBusy: (value) => isBusy.value = value,
),
_ => _LoginLookupScreen(
key: const ValueKey(0),
ticket: currentTicket.value,
onChallenge:
(SnAuthChallenge? p0) => currentTicket.value = p0,
onFactor:
(List<SnAuthFactor>? p0) =>
factors.value = p0 ?? [],
onNext: () => period.value++,
onBusy: (value) => isBusy.value = value,
),
},
).padding(all: 24),
).center(),
),
if (currentTicket.value != null)
LinearProgressIndicator(
minHeight: 4,
borderRadius: BorderRadius.zero,
value:
1 -
(currentTicket.value!.stepRemain /
currentTicket.value!.stepTotal),
)
else
const Gap(4),
],
),
), ),
); );
} }
@ -107,7 +143,8 @@ class _LoginCheckScreen extends HookConsumerWidget {
final SnAuthChallenge? challenge; final SnAuthChallenge? challenge;
final SnAuthFactor? factor; final SnAuthFactor? factor;
final Function(SnAuthChallenge?) onChallenge; final Function(SnAuthChallenge?) onChallenge;
final Function onNext; final VoidCallback onNext;
final Function(bool) onBusy;
const _LoginCheckScreen({ const _LoginCheckScreen({
super.key, super.key,
@ -115,6 +152,7 @@ class _LoginCheckScreen extends HookConsumerWidget {
required this.factor, required this.factor,
required this.onChallenge, required this.onChallenge,
required this.onNext, required this.onNext,
required this.onBusy,
}); });
@override @override
@ -122,6 +160,11 @@ class _LoginCheckScreen extends HookConsumerWidget {
final isBusy = useState(false); final isBusy = useState(false);
final passwordController = useTextEditingController(); final passwordController = useTextEditingController();
useEffect(() {
onBusy.call(isBusy.value);
return null;
}, [isBusy]);
Future<void> performCheckTicket() async { Future<void> performCheckTicket() async {
final pwd = passwordController.value.text; final pwd = passwordController.value.text;
if (pwd.isEmpty) return; if (pwd.isEmpty) return;
@ -162,6 +205,8 @@ class _LoginCheckScreen extends HookConsumerWidget {
} }
} }
final width = math.min(380, MediaQuery.of(context).size.width);
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -176,24 +221,49 @@ class _LoginCheckScreen extends HookConsumerWidget {
'loginEnterPassword'.tr(), 'loginEnterPassword'.tr(),
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900), style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900),
).padding(left: 4, bottom: 16), ).padding(left: 4, bottom: 16),
TextField( if ([0].contains(factor!.type))
autocorrect: false, TextField(
enableSuggestions: false, autocorrect: false,
controller: passwordController, enableSuggestions: false,
obscureText: true, controller: passwordController,
autofillHints: [ obscureText: true,
factor!.type == 0 autofillHints: [
? AutofillHints.password factor!.type == 0
: AutofillHints.oneTimeCode, ? AutofillHints.password
], : AutofillHints.oneTimeCode,
decoration: InputDecoration( ],
isDense: true, decoration: InputDecoration(
border: const UnderlineInputBorder(), isDense: true,
labelText: 'password'.tr(), border: const OutlineInputBorder(),
labelText: 'password'.tr(),
),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: isBusy.value ? null : (_) => performCheckTicket(),
).padding(horizontal: 7)
else
OtpTextField(
showCursor: false,
numberOfFields: 6,
obscureText: false,
showFieldAsBox: true,
focusedBorderColor: Theme.of(context).colorScheme.primary,
fieldWidth: (width / 6) - 10,
onSubmit: (value) {
passwordController.text = value;
performCheckTicket();
},
textStyle: Theme.of(context).textTheme.titleLarge!,
), ),
onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(), const Gap(12),
onSubmitted: isBusy.value ? null : (_) => performCheckTicket(), Card(
).padding(horizontal: 7), child: ListTile(
leading: Icon(
kFactorTypes[factor!.type]?.$3 ?? Symbols.question_mark,
),
title: Text(kFactorTypes[factor!.type]?.$1 ?? 'unknown').tr(),
subtitle: Text(kFactorTypes[factor!.type]?.$2 ?? 'unknown').tr(),
),
),
const Gap(12), const Gap(12),
Row( Row(
mainAxisAlignment: MainAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end,
@ -220,7 +290,8 @@ class _LoginPickerScreen extends HookConsumerWidget {
final List<SnAuthFactor>? factors; final List<SnAuthFactor>? factors;
final Function(SnAuthChallenge?) onChallenge; final Function(SnAuthChallenge?) onChallenge;
final Function(SnAuthFactor) onPickFactor; final Function(SnAuthFactor) onPickFactor;
final Function onNext; final VoidCallback onNext;
final Function(bool) onBusy;
const _LoginPickerScreen({ const _LoginPickerScreen({
super.key, super.key,
@ -229,17 +300,25 @@ class _LoginPickerScreen extends HookConsumerWidget {
required this.onChallenge, required this.onChallenge,
required this.onPickFactor, required this.onPickFactor,
required this.onNext, required this.onNext,
required this.onBusy,
}); });
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final isBusy = useState(false); final isBusy = useState(false);
final factorPicked = useState<String?>(null); final factorPicked = useState<SnAuthFactor?>(null);
useEffect(() {
onBusy.call(isBusy.value);
return null;
}, [isBusy]);
final unfocusColor = Theme.of( final unfocusColor = Theme.of(
context, context,
).colorScheme.onSurface.withAlpha((255 * 0.75).round()); ).colorScheme.onSurface.withAlpha((255 * 0.75).round());
final hintController = useTextEditingController();
void performGetFactorCode() async { void performGetFactorCode() async {
if (factorPicked.value == null) return; if (factorPicked.value == null) return;
@ -247,11 +326,14 @@ class _LoginPickerScreen extends HookConsumerWidget {
final client = ref.watch(apiClientProvider); final client = ref.watch(apiClientProvider);
try { try {
// Request one-time-password code
await client.post( await client.post(
'/auth/challenge/${ticket!.id}/factors/${factorPicked.value}', '/auth/challenge/${ticket!.id}/factors/${factorPicked.value!.id}',
data:
hintController.text.isNotEmpty
? jsonEncode(hintController.text)
: null,
); );
onPickFactor(factors!.where((x) => x.id == factorPicked.value).first); onPickFactor(factors!.where((x) => x == factorPicked.value).first);
onNext(); onNext();
} catch (err) { } catch (err) {
showErrorAlert(err); showErrorAlert(err);
@ -261,6 +343,20 @@ class _LoginPickerScreen extends HookConsumerWidget {
} }
} }
useEffect(() {
if (ticket == null || (factors?.isEmpty ?? true)) return;
if (ticket!.blacklistFactors.isEmpty) {
Future(() {
var password = factors!.where((x) => x.type == 0).firstOrNull;
if (password != null) {
factorPicked.value = password;
performGetFactorCode();
}
});
}
return null;
}, [ticket, factors]);
return Column( return Column(
key: const ValueKey<int>(1), key: const ValueKey<int>(1),
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -292,10 +388,10 @@ class _LoginPickerScreen extends HookConsumerWidget {
), ),
title: Text(kFactorTypes[x.type]?.$1 ?? 'unknown').tr(), title: Text(kFactorTypes[x.type]?.$1 ?? 'unknown').tr(),
enabled: !ticket!.blacklistFactors.contains(x.id), enabled: !ticket!.blacklistFactors.contains(x.id),
value: factorPicked.value == x.id, value: factorPicked.value == x,
onChanged: (value) { onChanged: (value) {
if (value == true) { if (value == true) {
factorPicked.value = x.id; factorPicked.value = x;
} }
}, },
), ),
@ -304,6 +400,15 @@ class _LoginPickerScreen extends HookConsumerWidget {
List.empty(), List.empty(),
), ),
), ),
if ([1].contains(factorPicked.value?.type))
TextField(
controller: hintController,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'authFactorHint'.tr(),
helperText: 'authFactorHintHelper'.tr(),
),
).padding(top: 12, bottom: 4, horizontal: 4),
const Gap(8), const Gap(8),
Text( Text(
'loginMultiFactor'.plural(ticket!.stepRemain), 'loginMultiFactor'.plural(ticket!.stepRemain),
@ -334,7 +439,8 @@ class _LoginLookupScreen extends HookConsumerWidget {
final SnAuthChallenge? ticket; final SnAuthChallenge? ticket;
final Function(SnAuthChallenge?) onChallenge; final Function(SnAuthChallenge?) onChallenge;
final Function(List<SnAuthFactor>?) onFactor; final Function(List<SnAuthFactor>?) onFactor;
final Function onNext; final VoidCallback onNext;
final Function(bool) onBusy;
const _LoginLookupScreen({ const _LoginLookupScreen({
super.key, super.key,
@ -342,6 +448,7 @@ class _LoginLookupScreen extends HookConsumerWidget {
required this.onChallenge, required this.onChallenge,
required this.onFactor, required this.onFactor,
required this.onNext, required this.onNext,
required this.onBusy,
}); });
@override @override
@ -349,6 +456,11 @@ class _LoginLookupScreen extends HookConsumerWidget {
final isBusy = useState(false); final isBusy = useState(false);
final usernameController = useTextEditingController(); final usernameController = useTextEditingController();
useEffect(() {
onBusy.call(isBusy.value);
return null;
}, [isBusy]);
Future<void> requestResetPassword() async { Future<void> requestResetPassword() async {
final uname = usernameController.value.text; final uname = usernameController.value.text;
if (uname.isEmpty) { if (uname.isEmpty) {

6
lib/screens/chat/chat.dart
View File

@ -347,7 +347,11 @@ class ChatListScreen extends HookConsumerWidget {
builder: (context, ref, _) { builder: (context, ref, _) {
final summaryState = ref.watch(chatSummaryProvider); final summaryState = ref.watch(chatSummaryProvider);
return summaryState.maybeWhen( return summaryState.maybeWhen(
loading: () => const LinearProgressIndicator(), loading:
() => const LinearProgressIndicator(
minHeight: 2,
borderRadius: BorderRadius.zero,
),
orElse: () => const SizedBox.shrink(), orElse: () => const SizedBox.shrink(),
); );
}, },

19
lib/screens/settings.dart
View File

@ -147,6 +147,7 @@ class SettingsScreen extends HookConsumerWidget {
title: Text('settingsColorScheme').tr(), title: Text('settingsColorScheme').tr(),
content: SingleChildScrollView( content: SingleChildScrollView(
child: ColorPicker( child: ColorPicker(
paletteType: PaletteType.rgbWithBlue,
enableAlpha: false, enableAlpha: false,
pickerColor: selectedColor, pickerColor: selectedColor,
onColorChanged: (color) { onColorChanged: (color) {
@ -174,8 +175,9 @@ class SettingsScreen extends HookConsumerWidget {
); );
}, },
child: Container( child: Container(
width: 40, width: 24,
height: 40, height: 24,
margin: EdgeInsets.symmetric(horizontal: 2, vertical: 8),
decoration: BoxDecoration( decoration: BoxDecoration(
color: color:
settings.appColorScheme != null settings.appColorScheme != null
@ -198,18 +200,7 @@ class SettingsScreen extends HookConsumerWidget {
title: Text('settingsBackgroundImage').tr(), title: Text('settingsBackgroundImage').tr(),
contentPadding: const EdgeInsets.only(left: 24, right: 17), contentPadding: const EdgeInsets.only(left: 24, right: 17),
leading: const Icon(Symbols.image), leading: const Icon(Symbols.image),
trailing: Row( trailing: const Icon(Symbols.chevron_right),
mainAxisSize: MainAxisSize.min,
children: [
if (isDesktop)
Tooltip(
message: 'settingsBackgroundImageTooltip'.tr(),
padding: EdgeInsets.only(left: 8),
child: const Icon(Symbols.info, size: 18),
),
const Icon(Symbols.chevron_right),
],
),
onTap: () async { onTap: () async {
final imagePicker = ref.read(imagePickerProvider); final imagePicker = ref.read(imagePickerProvider);
final image = await imagePicker.pickImage( final image = await imagePicker.pickImage(

4
lib/widgets/app_scaffold.dart
View File

@ -290,7 +290,9 @@ class _WebSocketIndicator extends HookConsumerWidget {
return AnimatedPositioned( return AnimatedPositioned(
duration: Duration(milliseconds: 1850), duration: Duration(milliseconds: 1850),
top: top:
!user.hasValue || websocketState == WebSocketState.connected() !user.hasValue ||
user.value == null ||
websocketState == WebSocketState.connected()
? -indicatorHeight ? -indicatorHeight
: 0, : 0,
curve: Curves.fastLinearToSlowEaseIn, curve: Curves.fastLinearToSlowEaseIn,