yorickr/plezy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: two column auth screen

Browse Source
This commit is contained in:
edde746
2025-11-12 17:54:25 +01:00
parent 0cbb5d6e8b
commit 12192c96c7
1 changed files with 110 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/auth_screen.dart
+110 -39
View File
@@ -227,23 +227,23 @@ class _AuthScreenState extends State<AuthScreen> {
@override
Widget build(BuildContext context) {
// Use two-column layout when showing QR code, single column otherwise
final showTwoColumns = _isAuthenticating && _useQrFlow && _qrAuthUrl != null;
// Use two-column layout on desktop, single column on mobile
final isDesktop = MediaQuery.of(context).size.width > 700;
return Scaffold(
body: Center(
child: Container(
constraints: BoxConstraints(maxWidth: showTwoColumns ? 800 : 400),
constraints: BoxConstraints(maxWidth: isDesktop ? 800 : 400),
padding: const EdgeInsets.all(24),
child: showTwoColumns
child: isDesktop
? Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// First column - Auth instructions
// First column - Logo and title (always visible)
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset('assets/plezy.png', width: 120, height: 120),
const SizedBox(height: 24),
@@ -254,48 +254,119 @@ class _AuthScreenState extends State<AuthScreen> {
),
textAlign: TextAlign.center,
),
const SizedBox(height: 48),
const Center(child: CircularProgressIndicator()),
const SizedBox(height: 16),
Text(
t.auth.scanQRCodeInstruction,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.grey),
),
const SizedBox(height: 24),
OutlinedButton(
onPressed: _retryAuthentication,
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 24,
),
),
child: Text(t.auth.retry),
),
],
),
),
const SizedBox(width: 48),
// Second column - QR code
// Second column - All authentication content
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Center(
child: QrImageView(
data: _qrAuthUrl!,
size: 300,
version: QrVersions.auto,
backgroundColor: Colors.white,
if (_isAuthenticating) ...[
if (_useQrFlow && _qrAuthUrl != null) ...[
// QR code flow - hint text above QR code
Text(
t.auth.scanQRCodeInstruction,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.grey),
),
const SizedBox(height: 24),
Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: QrImageView(
data: _qrAuthUrl!,
size: 300,
version: QrVersions.auto,
backgroundColor: Colors.white,
),
),
),
const SizedBox(height: 24),
OutlinedButton(
onPressed: _retryAuthentication,
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 24,
),
),
child: Text(t.auth.retry),
),
] else ...[
// Browser auth flow - show spinner and waiting message
const Center(child: CircularProgressIndicator()),
const SizedBox(height: 16),
Text(
t.auth.waitingForAuth,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.grey),
),
const SizedBox(height: 24),
OutlinedButton(
onPressed: _retryAuthentication,
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 24,
),
),
child: Text(t.auth.retry),
),
],
] else ...[
// Initial state buttons
ElevatedButton(
onPressed: _startAuthentication,
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
),
child: Text(t.auth.signInWithPlex),
),
),
const SizedBox(height: 16),
SelectableText(
_qrAuthUrl!,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 10, color: Colors.grey),
),
const SizedBox(height: 12),
OutlinedButton(
onPressed: () {
setState(() {
_useQrFlow = true;
});
_startAuthentication();
},
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
),
child: Text(t.auth.showQRCode),
),
if (kDebugMode) ...[
const SizedBox(height: 12),
OutlinedButton(
onPressed: _handleDebugTap,
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 12),
side: BorderSide(
color: Theme.of(
context,
).colorScheme.outline.withValues(alpha: 0.5),
),
),
child: Text(
t.auth.debugEnterToken,
style: TextStyle(fontSize: 12),
),
),
],
if (_errorMessage != null) ...[
const SizedBox(height: 16),
Text(
_errorMessage!,
style: TextStyle(
color: Theme.of(context).colorScheme.error,
),
textAlign: TextAlign.center,
),
],
],
],
),
),