kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

로그인 승인 페이지 UI/UX 수정

Browse Source
This commit is contained in:
김용연
2026-05-22 13:49:01 +09:00
parent 4c56c28481
commit cb8c7d78c3
6 changed files with 237 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

428
userfront/lib/features/auth/presentation/login_screen.dart
View File

@@ -79,14 +79,10 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
bool _verificationApproved = false;
bool _dismissedOverlays = false;
bool _localNavigationCompleted = false;
String _verificationMessage = '';
String _verificationTitle = tr('ui.userfront.login.verification.title');
String _verificationPageTitle = tr(
'ui.userfront.login.verification.page_title',
);
String _verificationActionLabel = tr(
'ui.userfront.login.verification.action_label',
);
String? _verificationMessageKey;
String _verificationTitleKey = 'ui.userfront.login.verification.title';
String _verificationPageTitleKey =
'ui.userfront.login.verification.page_title';
Timer? _verificationRedirectTimer;
bool _noticeHandled = false;
bool _drySendEnabled = false;
@@ -144,12 +140,9 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
if (widget.verificationCompleteOnly) {
_markVerificationApproved(
tr('msg.userfront.login.verification.approved_remote'),
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
'msg.userfront.login.verification.approved_remote',
titleKey: 'ui.userfront.login.verification.title_remote',
onAction: _closeVerificationWindowIfPossible,
);
return;
}
@@ -810,30 +803,25 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
}
void _markVerificationApproved(
String message, {
String? title,
String? pageTitle,
String? actionLabel,
String messageKey, {
String? titleKey,
String? pageTitleKey,
String actionPath = '/',
bool autoRedirect = false,
Duration redirectDelay = const Duration(seconds: 2),
VoidCallback? onAction,
}) {
if (!mounted) return;
final resolvedTitle = title ?? tr('ui.userfront.login.verification.title');
final resolvedPageTitle =
pageTitle ?? tr('ui.userfront.login.verification.page_title');
final resolvedActionLabel =
actionLabel ?? tr('ui.userfront.login.verification.action_label');
if (_moveVerificationOnlyResultToCleanRoute()) {
return;
}
setState(() {
_verificationApproved = true;
_verificationMessage = message;
_verificationTitle = resolvedTitle;
_verificationPageTitle = resolvedPageTitle;
_verificationActionLabel = resolvedActionLabel;
_verificationMessageKey = messageKey;
_verificationTitleKey =
titleKey ?? 'ui.userfront.login.verification.title';
_verificationPageTitleKey =
pageTitleKey ?? 'ui.userfront.login.verification.page_title';
_onVerificationAction = onAction;
});
_verificationRedirectTimer?.cancel();
@@ -861,89 +849,195 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
}
}
void _moveToSigninOrCloseVerificationWindow() {
if (webWindow.hasOpener()) {
webWindow.close();
void _handleVerificationResultPrimaryAction() {
if (_onVerificationAction != null) {
_runVerificationExitAction();
return;
}
context.go(buildLocalizedSigninPath(Uri.base));
if (_verificationOnly) {
_closeVerificationWindowIfPossible();
return;
}
final hasLocalSession =
(AuthTokenStore.getToken()?.isNotEmpty ?? false) ||
AuthTokenStore.usesCookie();
final target = hasLocalSession
? buildLocalizedHomePath(Uri.base)
: buildLocalizedSigninPath(Uri.base);
if (mounted) {
setState(() {
_verificationOnly = false;
_verificationApproved = false;
});
}
context.go(target);
}
void _markRemoteVerificationApproved() {
_markVerificationApproved(
'msg.userfront.login.verification.approved_remote',
titleKey: 'ui.userfront.login.verification.title_remote',
onAction: _closeVerificationWindowIfPossible,
);
}
Widget _buildVerificationResultView() {
final colorScheme = Theme.of(context).colorScheme;
return Center(
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final accentColor = colorScheme.brightness == Brightness.dark
? const Color(0xFF93C5FD)
: const Color(0xFF1E3A8A);
final message = tr(
_verificationMessageKey ?? 'msg.userfront.login.verification.success',
);
final verificationTitle = tr(_verificationTitleKey);
final closeHint = tr('msg.userfront.login.verification.close_hint');
final showCloseHint = _onVerificationAction != null || _verificationOnly;
final actionLabelKey = showCloseHint
? 'ui.userfront.login.verification.action_label_close'
: 'ui.userfront.login.verification.action_label';
final actionIcon = showCloseHint
? Icons.close_rounded
: Icons.arrow_forward_rounded;
return SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24.0),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Material(
color: colorScheme.surface,
elevation: 12,
shadowColor: Colors.black.withValues(alpha: 0.18),
borderRadius: BorderRadius.circular(24),
child: Padding(
padding: const EdgeInsets.fromLTRB(24, 28, 24, 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.check_circle_outline,
color: colorScheme.primary,
size: 72,
),
const SizedBox(height: 16),
Text(
_verificationTitle,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
const SizedBox(height: 12),
Text(
_verificationMessage.isEmpty
? tr('msg.userfront.login.verification.success')
: _verificationMessage,
textAlign: TextAlign.center,
style: TextStyle(color: colorScheme.onSurfaceVariant),
),
const SizedBox(height: 24),
SizedBox(
width: double.infinity,
child: FilledButton(
onPressed: () {
if (_onVerificationAction != null) {
_runVerificationExitAction();
return;
}
if (_verificationOnly) {
_closeVerificationWindowIfPossible();
return;
}
final hasLocalSession =
(AuthTokenStore.getToken()?.isNotEmpty ?? false) ||
AuthTokenStore.usesCookie();
final target = hasLocalSession
? buildLocalizedHomePath(Uri.base)
: buildLocalizedSigninPath(Uri.base);
if (mounted) {
setState(() {
_verificationOnly = false;
_verificationApproved = false;
});
}
context.go(target);
},
child: Text(
_verificationActionLabel,
textAlign: TextAlign.center,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 468),
child: LayoutBuilder(
builder: (context, constraints) {
final isCompact = constraints.maxWidth < 360;
final iconBoxSize = isCompact ? 76.0 : 88.0;
final iconSize = isCompact ? 48.0 : 56.0;
final verticalGap = isCompact ? 16.0 : 20.0;
final controlsOffset = isCompact ? 150.0 : 170.0;
final cardRadius = isCompact ? 24.0 : 28.0;
final cardPadding = isCompact
? const EdgeInsets.fromLTRB(20, 24, 20, 22)
: const EdgeInsets.fromLTRB(30, 34, 30, 28);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: controlsOffset),
DecoratedBox(
decoration: BoxDecoration(
color: colorScheme.surface,
borderRadius: BorderRadius.circular(cardRadius),
border: Border.all(
color: colorScheme.outlineVariant.withValues(
alpha: 0.7,
),
),
boxShadow: [
BoxShadow(
color: colorScheme.shadow.withValues(alpha: 0.08),
blurRadius: 28,
offset: const Offset(0, 16),
),
],
),
child: Padding(
padding: cardPadding,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: iconBoxSize,
height: iconBoxSize,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
colorScheme.primary.withValues(alpha: 0.18),
colorScheme.tertiary.withValues(
alpha: 0.14,
),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
alignment: Alignment.center,
child: Icon(
Icons.person,
size: iconSize,
color: colorScheme.primary,
),
),
SizedBox(height: verticalGap),
Text(
verificationTitle,
textAlign: TextAlign.center,
softWrap: true,
style: TextStyle(
fontSize: isCompact ? 22 : 26,
fontWeight: FontWeight.w800,
color: accentColor,
letterSpacing: -0.4,
height: 1.25,
),
),
const SizedBox(height: 12),
Text(
message,
textAlign: TextAlign.center,
softWrap: true,
style:
(isCompact
? theme.textTheme.bodyMedium
: theme.textTheme.bodyLarge)
?.copyWith(
height: 1.6,
color: colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 24),
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 180,
maxWidth: 320,
),
child: SizedBox(
width: double.infinity,
child: FilledButton.icon(
onPressed:
_handleVerificationResultPrimaryAction,
icon: Icon(actionIcon),
label: Text(tr(actionLabelKey)),
),
),
),
),
if (showCloseHint) ...[
const SizedBox(height: 10),
Text(
closeHint,
textAlign: TextAlign.center,
softWrap: true,
style: theme.textTheme.bodyMedium?.copyWith(
height: 1.5,
color: colorScheme.onSurfaceVariant,
),
),
],
],
),
),
),
),
],
),
const SizedBox(height: 18),
Wrap(
alignment: WrapAlignment.center,
spacing: 10,
runSpacing: 10,
children: [ThemeToggleButton(), LanguageSelector()],
),
],
);
},
),
),
),
@@ -985,7 +1079,13 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(_verificationPageTitle),
title: Text(tr(_verificationPageTitleKey)),
leading: _verificationApproved && _onVerificationAction != null
? IconButton(
icon: const Icon(Icons.close),
onPressed: _runVerificationExitAction,
)
: null,
actions: const [ThemeToggleButton(compact: true)],
),
body: _verificationApproved
@@ -996,13 +1096,6 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
Future<void> _verifyToken(String token) async {
debugPrint("[Auth] Starting verification for token: $token");
final approvedMessage = tr('msg.userfront.login.verification.approved');
final remoteApprovedMessage = tr(
'msg.userfront.login.verification.approved_remote',
);
final localSessionMessage = tr(
'msg.userfront.login.verification.approved_local',
);
try {
// Use Backend to verify the token (Backend-Driven Flow)
final res = await AuthProxyService.verifyMagicLink(
@@ -1019,14 +1112,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
if (status == 'approved' || (jwt == null && _verificationOnly)) {
if (mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
return;
}
@@ -1034,7 +1120,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
if (jwt is String && jwt.isNotEmpty) {
if (hasLocalSession) {
_markVerificationApproved(
localSessionMessage,
'msg.userfront.login.verification.approved_local',
actionPath: actionPath,
);
return;
@@ -1044,7 +1130,10 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
}
if (mounted) {
_markVerificationApproved(approvedMessage, actionPath: actionPath);
_markVerificationApproved(
'msg.userfront.login.verification.approved',
actionPath: actionPath,
);
}
} catch (e) {
debugPrint("[Auth] Verification FAILED for token: $token. Error: $e");
@@ -1055,14 +1144,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
errorStr.contains('already_verified') ||
errorStr.contains('session_active')) {
if (mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
return;
}
@@ -1087,12 +1169,6 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
debugPrint(
"[Auth] Starting code verification for loginId: $sanitizedLoginId",
);
final remoteApprovedMessage = tr(
'msg.userfront.login.verification.approved_remote',
);
final localSessionMessage = tr(
'msg.userfront.login.verification.approved_local',
);
try {
final res = await AuthProxyService.verifyLoginCode(
sanitizedLoginId,
@@ -1112,14 +1188,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
if (jwt == null && status == 'approved') {
if (mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
return;
}
@@ -1127,20 +1196,13 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
if (jwt is String && jwt.isNotEmpty) {
if (hasLocalSession) {
_markVerificationApproved(
localSessionMessage,
'msg.userfront.login.verification.approved_local',
actionPath: actionPath,
);
return;
}
if (_verificationOnly) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
return;
}
_onLoginSuccess(jwt, provider: res['provider'] as String?);
@@ -1148,14 +1210,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
}
if (_verificationOnly && mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
} catch (e) {
debugPrint(
@@ -1168,14 +1223,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
errorStr.contains('already_verified') ||
errorStr.contains('session_active')) {
if (mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
return;
}
@@ -1195,12 +1243,6 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
final sanitized = shortCode.trim().toUpperCase();
if (sanitized.isEmpty) return;
debugPrint("[Auth] Starting short code verification for code: $sanitized");
final remoteApprovedMessage = tr(
'msg.userfront.login.verification.approved_remote',
);
final localSessionMessage = tr(
'msg.userfront.login.verification.approved_local',
);
try {
final res = await AuthProxyService.verifyLoginShortCode(
sanitized,
@@ -1216,14 +1258,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
if (jwt == null && status == 'approved') {
if (mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
return;
}
@@ -1231,20 +1266,13 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
if (jwt is String && jwt.isNotEmpty) {
if (hasLocalSession) {
_markVerificationApproved(
localSessionMessage,
'msg.userfront.login.verification.approved_local',
actionPath: actionPath,
);
return;
}
if (_verificationOnly) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
return;
}
_onLoginSuccess(jwt, provider: res['provider'] as String?);
@@ -1252,14 +1280,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
}
if (_verificationOnly && mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
} catch (e) {
debugPrint("[Auth] Short code verification FAILED. Error: $e");
@@ -1270,14 +1291,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
errorStr.contains('already_verified') ||
errorStr.contains('session_active')) {
if (mounted) {
_markVerificationApproved(
remoteApprovedMessage,
title: tr('ui.userfront.login.verification.title_remote'),
actionLabel: tr(
'ui.userfront.login.verification.action_label_remote',
),
onAction: _moveToSigninOrCloseVerificationWindow,
);
_markRemoteVerificationApproved();
}
return;
}
@@ -2355,7 +2369,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
],
),
const SizedBox(height: 12),
const Wrap(
Wrap(
alignment: WrapAlignment.center,
spacing: 10,
runSpacing: 10,