fixed login form height

This commit is contained in:
Leon Bösche
2026-01-09 19:36:43 +01:00
parent 7489c7b1e7
commit 2ab0786e30
3 changed files with 249 additions and 212 deletions

View File

@@ -29,6 +29,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
late String _selectedTab = 'Drive'; late String _selectedTab = 'Drive';
late AnimationController _animationController; late AnimationController _animationController;
bool _isSignupMode = false; bool _isSignupMode = false;
bool _usePasswordMode = false;
@override @override
void initState() { void initState() {
@@ -55,6 +56,10 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
} }
} }
void _setPasswordMode(bool usePassword) {
setState(() => _usePasswordMode = usePassword);
}
void _showCreateOrgDialog(BuildContext context) { void _showCreateOrgDialog(BuildContext context) {
final controller = TextEditingController(); final controller = TextEditingController();
showDialog( showDialog(
@@ -289,7 +294,9 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
: 340, : 340,
height: isLoggedIn height: isLoggedIn
? MediaQuery.of(context).size.height * 0.9 ? MediaQuery.of(context).size.height * 0.9
: (_isSignupMode ? 400 : 280), : (_isSignupMode
? 400
: (_usePasswordMode ? 350 : 280)),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
child: BackdropFilter( child: BackdropFilter(
@@ -336,7 +343,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
} }
return Column( return Column(
children: [ children: [
const SizedBox(height: 8), const SizedBox(height: 80),
_buildOrgRow(context), _buildOrgRow(context),
Expanded( Expanded(
child: _buildDrive( child: _buildDrive(
@@ -351,6 +358,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
) )
: LoginForm( : LoginForm(
onSignupModeChanged: _setSignupMode, onSignupModeChanged: _setSignupMode,
onPasswordModeChanged: _setPasswordMode,
), ),
), ),
// Top-left radial glow - primary accent light // Top-left radial glow - primary accent light

View File

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'dart:math'; import 'dart:math';
import 'dart:convert';
import '../blocs/auth/auth_bloc.dart'; import '../blocs/auth/auth_bloc.dart';
import '../blocs/auth/auth_event.dart'; import '../blocs/auth/auth_event.dart';
import '../blocs/auth/auth_state.dart'; import '../blocs/auth/auth_state.dart';
@@ -12,8 +13,13 @@ import '../theme/modern_glass_button.dart';
class LoginForm extends StatefulWidget { class LoginForm extends StatefulWidget {
final ValueChanged<bool>? onSignupModeChanged; final ValueChanged<bool>? onSignupModeChanged;
final ValueChanged<bool>? onPasswordModeChanged;
const LoginForm({super.key, this.onSignupModeChanged}); const LoginForm({
super.key,
this.onSignupModeChanged,
this.onPasswordModeChanged,
});
@override @override
State<LoginForm> createState() => _LoginFormState(); State<LoginForm> createState() => _LoginFormState();
@@ -40,6 +46,12 @@ class _LoginFormState extends State<LoginForm> {
return values.map((v) => v.toRadixString(16).padLeft(2, '0')).join(); return values.map((v) => v.toRadixString(16).padLeft(2, '0')).join();
} }
String _generateRandomBase64(int bytes) {
final random = Random();
final values = List<int>.generate(bytes, (i) => random.nextInt(256));
return base64.encode(values);
}
Future<void> _handleAuthentication( Future<void> _handleAuthentication(
BuildContext context, BuildContext context,
AuthenticationChallengeReceived state, AuthenticationChallengeReceived state,
@@ -47,7 +59,7 @@ class _LoginFormState extends State<LoginForm> {
try { try {
final credentialId = state.credentialIds.isNotEmpty final credentialId = state.credentialIds.isNotEmpty
? state.credentialIds.first ? state.credentialIds.first
: _generateRandomHex(64); : _generateRandomBase64(64);
if (context.mounted) { if (context.mounted) {
context.read<AuthBloc>().add( context.read<AuthBloc>().add(
@@ -55,10 +67,10 @@ class _LoginFormState extends State<LoginForm> {
username: _usernameController.text, username: _usernameController.text,
challenge: state.challenge, challenge: state.challenge,
credentialId: credentialId, credentialId: credentialId,
authenticatorData: _generateRandomHex(37), authenticatorData: _generateRandomBase64(37),
clientDataJSON: clientDataJSON:
'{"type":"webauthn.get","challenge":"${state.challenge}","origin":"https://b0esche.cloud"}', '{"type":"webauthn.get","challenge":"${state.challenge}","origin":"https://b0esche.cloud"}',
signature: _generateRandomHex(128), signature: _generateRandomBase64(128),
), ),
); );
} }
@@ -76,8 +88,8 @@ class _LoginFormState extends State<LoginForm> {
RegistrationChallengeReceived state, RegistrationChallengeReceived state,
) async { ) async {
try { try {
final credentialId = _generateRandomHex(64); final credentialId = _generateRandomBase64(64);
final publicKey = _generateRandomHex(91); final publicKey = _generateRandomBase64(91);
if (context.mounted) { if (context.mounted) {
context.read<AuthBloc>().add( context.read<AuthBloc>().add(
@@ -88,7 +100,7 @@ class _LoginFormState extends State<LoginForm> {
publicKey: publicKey, publicKey: publicKey,
clientDataJSON: clientDataJSON:
'{"type":"webauthn.create","challenge":"${state.challenge}","origin":"https://b0esche.cloud"}', '{"type":"webauthn.create","challenge":"${state.challenge}","origin":"https://b0esche.cloud"}',
attestationObject: _generateRandomHex(128), attestationObject: _generateRandomBase64(128),
), ),
); );
} }
@@ -133,13 +145,16 @@ class _LoginFormState extends State<LoginForm> {
child: Center( child: Center(
child: Padding( child: Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
child: AnimatedSize(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
child: AnimatedSwitcher( child: AnimatedSwitcher(
duration: const Duration(milliseconds: 400), duration: const Duration(milliseconds: 400),
transitionBuilder: (child, animation) { transitionBuilder: (child, animation) {
return FadeTransition(opacity: animation, child: child); return FadeTransition(opacity: animation, child: child);
}, },
child: SingleChildScrollView( child: SingleChildScrollView(
key: ValueKey<bool>(_isSignup), key: ValueKey('${_isSignup}_$_usePasskey'),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
@@ -154,7 +169,9 @@ class _LoginFormState extends State<LoginForm> {
const SizedBox(height: 24), const SizedBox(height: 24),
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.primaryBackground.withValues(alpha: 0.5), color: AppTheme.primaryBackground.withValues(
alpha: 0.5,
),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
border: Border.all( border: Border.all(
color: AppTheme.accentColor.withValues(alpha: 0.3), color: AppTheme.accentColor.withValues(alpha: 0.3),
@@ -347,8 +364,12 @@ class _LoginFormState extends State<LoginForm> {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
GestureDetector( GestureDetector(
onTap: () => onTap: () {
setState(() => _usePasskey = !_usePasskey), setState(() => _usePasskey = !_usePasskey);
widget.onPasswordModeChanged?.call(
!_usePasskey,
);
},
child: Text( child: Text(
_usePasskey ? 'use password' : 'use passkey', _usePasskey ? 'use password' : 'use passkey',
style: TextStyle( style: TextStyle(
@@ -392,6 +413,7 @@ class _LoginFormState extends State<LoginForm> {
), ),
), ),
), ),
),
); );
} }
} }

View File

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'dart:math'; import 'dart:math';
import 'dart:convert';
import '../blocs/auth/auth_bloc.dart'; import '../blocs/auth/auth_bloc.dart';
import '../blocs/auth/auth_event.dart'; import '../blocs/auth/auth_event.dart';
import '../blocs/auth/auth_state.dart'; import '../blocs/auth/auth_state.dart';
@@ -34,6 +35,12 @@ class _SignupFormState extends State<SignupForm> {
return values.map((v) => v.toRadixString(16).padLeft(2, '0')).join(); return values.map((v) => v.toRadixString(16).padLeft(2, '0')).join();
} }
String _generateRandomBase64(int bytes) {
final random = Random();
final values = List<int>.generate(bytes, (i) => random.nextInt(256));
return base64.encode(values);
}
Future<void> _handleRegistration( Future<void> _handleRegistration(
BuildContext context, BuildContext context,
RegistrationChallengeReceived state, RegistrationChallengeReceived state,
@@ -41,8 +48,8 @@ class _SignupFormState extends State<SignupForm> {
try { try {
// Simulate WebAuthn registration by generating fake credential data // Simulate WebAuthn registration by generating fake credential data
// In a real implementation, this would call native WebAuthn APIs // In a real implementation, this would call native WebAuthn APIs
final credentialId = _generateRandomHex(64); final credentialId = _generateRandomBase64(64);
final publicKey = _generateRandomHex(91); // EC2 public key size final publicKey = _generateRandomBase64(91); // EC2 public key size
if (context.mounted) { if (context.mounted) {
context.read<AuthBloc>().add( context.read<AuthBloc>().add(
@@ -53,7 +60,7 @@ class _SignupFormState extends State<SignupForm> {
publicKey: publicKey, publicKey: publicKey,
clientDataJSON: clientDataJSON:
'{"type":"webauthn.create","challenge":"${state.challenge}","origin":"https://b0esche.cloud"}', '{"type":"webauthn.create","challenge":"${state.challenge}","origin":"https://b0esche.cloud"}',
attestationObject: _generateRandomHex(128), attestationObject: _generateRandomBase64(128),
), ),
); );
} }