b0esche/b0esche_cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed login form height

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
b0esche_cloud/lib/pages/home_page.dart
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

436
b0esche_cloud/lib/pages/login_form.dart
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,56 +145,28 @@ 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: AnimatedSwitcher( child: AnimatedSize(
duration: const Duration(milliseconds: 400), duration: const Duration(milliseconds: 300),
transitionBuilder: (child, animation) { curve: Curves.easeInOut,
return FadeTransition(opacity: animation, child: child); child: AnimatedSwitcher(
}, duration: const Duration(milliseconds: 400),
child: SingleChildScrollView( transitionBuilder: (child, animation) {
key: ValueKey<bool>(_isSignup), return FadeTransition(opacity: animation, child: child);
child: Column( },
mainAxisSize: MainAxisSize.min, child: SingleChildScrollView(
crossAxisAlignment: CrossAxisAlignment.center, key: ValueKey('${_isSignup}_$_usePasskey'),
children: [ child: Column(
Text( mainAxisSize: MainAxisSize.min,
_isSignup ? 'create account' : 'sign in', crossAxisAlignment: CrossAxisAlignment.center,
style: const TextStyle( children: [
fontSize: 24, Text(
color: AppTheme.primaryText, _isSignup ? 'create account' : 'sign in',
), style: const TextStyle(
), fontSize: 24,
const SizedBox(height: 24), color: AppTheme.primaryText,
Container(
decoration: BoxDecoration(
color: AppTheme.primaryBackground.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppTheme.accentColor.withValues(alpha: 0.3),
), ),
), ),
child: TextField( const SizedBox(height: 24),
controller: _usernameController,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.text,
cursorColor: AppTheme.accentColor,
decoration: InputDecoration(
hintText: 'username',
hintStyle: TextStyle(color: AppTheme.secondaryText),
contentPadding: const EdgeInsets.all(12),
border: InputBorder.none,
prefixIcon: Icon(
Icons.person_outline,
color: AppTheme.primaryText,
size: 20,
),
),
style: const TextStyle(color: AppTheme.primaryText),
),
),
const SizedBox(height: 16),
if (!_isSignup && _usePasskey)
const SizedBox.shrink()
else
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.primaryBackground.withValues( color: AppTheme.primaryBackground.withValues(
@@ -194,105 +178,114 @@ class _LoginFormState extends State<LoginForm> {
), ),
), ),
child: TextField( child: TextField(
controller: _passwordController, controller: _usernameController,
textInputAction: TextInputAction.next, textInputAction: TextInputAction.next,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
cursorColor: AppTheme.accentColor,
decoration: InputDecoration(
hintText: 'password',
hintStyle: TextStyle(color: AppTheme.secondaryText),
contentPadding: const EdgeInsets.all(12),
border: InputBorder.none,
prefixIcon: Icon(
Icons.lock_outline,
color: AppTheme.primaryText,
size: 20,
),
),
style: const TextStyle(color: AppTheme.primaryText),
),
),
if (!_isSignup && _usePasskey)
const SizedBox.shrink()
else
const SizedBox(height: 16),
if (_isSignup)
Container(
decoration: BoxDecoration(
color: AppTheme.primaryBackground.withValues(
alpha: 0.5,
),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppTheme.accentColor.withValues(alpha: 0.3),
),
),
child: TextField(
controller: _displayNameController,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.text, keyboardType: TextInputType.text,
cursorColor: AppTheme.accentColor, cursorColor: AppTheme.accentColor,
decoration: InputDecoration( decoration: InputDecoration(
hintText: 'display name (optional)', hintText: 'username',
hintStyle: TextStyle(color: AppTheme.secondaryText), hintStyle: TextStyle(color: AppTheme.secondaryText),
contentPadding: const EdgeInsets.all(12), contentPadding: const EdgeInsets.all(12),
border: InputBorder.none, border: InputBorder.none,
prefixIcon: Icon( prefixIcon: Icon(
Icons.badge_outlined, Icons.person_outline,
color: AppTheme.primaryText, color: AppTheme.primaryText,
size: 20, size: 20,
), ),
), ),
style: const TextStyle(color: AppTheme.primaryText), style: const TextStyle(color: AppTheme.primaryText),
), ),
) ),
else const SizedBox(height: 16),
const SizedBox.shrink(), if (!_isSignup && _usePasskey)
if (_isSignup) const SizedBox.shrink()
const SizedBox(height: 16) else
else Container(
const SizedBox.shrink(), decoration: BoxDecoration(
SizedBox( color: AppTheme.primaryBackground.withValues(
width: 150, alpha: 0.5,
child: BlocBuilder<AuthBloc, AuthState>( ),
builder: (context, state) { borderRadius: BorderRadius.circular(16),
return ModernGlassButton( border: Border.all(
isLoading: state is AuthLoading, color: AppTheme.accentColor.withValues(alpha: 0.3),
onPressed: () { ),
if (_usernameController.text.isEmpty) { ),
ScaffoldMessenger.of(context).showSnackBar( child: TextField(
const SnackBar( controller: _passwordController,
content: Text('Username is required'), textInputAction: TextInputAction.next,
), keyboardType: TextInputType.visiblePassword,
); obscureText: true,
return; cursorColor: AppTheme.accentColor,
} decoration: InputDecoration(
if (_isSignup) { hintText: 'password',
if (_passwordController.text.isEmpty) { hintStyle: TextStyle(color: AppTheme.secondaryText),
contentPadding: const EdgeInsets.all(12),
border: InputBorder.none,
prefixIcon: Icon(
Icons.lock_outline,
color: AppTheme.primaryText,
size: 20,
),
),
style: const TextStyle(color: AppTheme.primaryText),
),
),
if (!_isSignup && _usePasskey)
const SizedBox.shrink()
else
const SizedBox(height: 16),
if (_isSignup)
Container(
decoration: BoxDecoration(
color: AppTheme.primaryBackground.withValues(
alpha: 0.5,
),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppTheme.accentColor.withValues(alpha: 0.3),
),
),
child: TextField(
controller: _displayNameController,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.text,
cursorColor: AppTheme.accentColor,
decoration: InputDecoration(
hintText: 'display name (optional)',
hintStyle: TextStyle(color: AppTheme.secondaryText),
contentPadding: const EdgeInsets.all(12),
border: InputBorder.none,
prefixIcon: Icon(
Icons.badge_outlined,
color: AppTheme.primaryText,
size: 20,
),
),
style: const TextStyle(color: AppTheme.primaryText),
),
)
else
const SizedBox.shrink(),
if (_isSignup)
const SizedBox(height: 16)
else
const SizedBox.shrink(),
SizedBox(
width: 150,
child: BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
return ModernGlassButton(
isLoading: state is AuthLoading,
onPressed: () {
if (_usernameController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
const SnackBar( const SnackBar(
content: Text('Password is required'), content: Text('Username is required'),
), ),
); );
return; return;
} }
context.read<AuthBloc>().add( if (_isSignup) {
SignupStarted(
username: _usernameController.text,
email: _usernameController.text,
displayName: _displayNameController.text,
password: _passwordController.text,
),
);
} else {
if (_usePasskey) {
context.read<AuthBloc>().add(
LoginRequested(
username: _usernameController.text,
),
);
} else {
if (_passwordController.text.isEmpty) { if (_passwordController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
const SnackBar( const SnackBar(
@@ -302,91 +295,120 @@ class _LoginFormState extends State<LoginForm> {
return; return;
} }
context.read<AuthBloc>().add( context.read<AuthBloc>().add(
PasswordLoginRequested( SignupStarted(
username: _usernameController.text, username: _usernameController.text,
email: _usernameController.text,
displayName: _displayNameController.text,
password: _passwordController.text, password: _passwordController.text,
), ),
); );
} else {
if (_usePasskey) {
context.read<AuthBloc>().add(
LoginRequested(
username: _usernameController.text,
),
);
} else {
if (_passwordController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Password is required'),
),
);
return;
}
context.read<AuthBloc>().add(
PasswordLoginRequested(
username: _usernameController.text,
password: _passwordController.text,
),
);
}
} }
} },
}, child: Text(_isSignup ? 'create' : 'sign in'),
child: Text(_isSignup ? 'create' : 'sign in'), );
); },
}, ),
), ),
), const SizedBox(height: 16),
const SizedBox(height: 16), if (_isSignup)
if (_isSignup) Row(
Row( mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, children: [
children: [ Text(
Text( 'already have an account?',
'already have an account?', style: TextStyle(color: AppTheme.secondaryText),
style: TextStyle(color: AppTheme.secondaryText), ),
), const SizedBox(width: 8),
const SizedBox(width: 8), GestureDetector(
GestureDetector( onTap: () {
onTap: () { _resetForm();
_resetForm(); _setSignupMode(false);
_setSignupMode(false); },
}, child: Text(
child: Text( 'sign in',
'sign in', style: TextStyle(
style: TextStyle( color: AppTheme.accentColor,
color: AppTheme.accentColor, decoration: TextDecoration.underline,
decoration: TextDecoration.underline, ),
), ),
), ),
), ],
], )
) else
else Column(
Column( children: [
children: [ Row(
Row( mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, children: [
children: [ GestureDetector(
GestureDetector( onTap: () {
onTap: () => setState(() => _usePasskey = !_usePasskey);
setState(() => _usePasskey = !_usePasskey), widget.onPasswordModeChanged?.call(
child: Text( !_usePasskey,
_usePasskey ? 'use password' : 'use passkey', );
style: TextStyle( },
color: AppTheme.accentColor, child: Text(
decoration: TextDecoration.underline, _usePasskey ? 'use password' : 'use passkey',
fontSize: 12, style: TextStyle(
color: AppTheme.accentColor,
decoration: TextDecoration.underline,
fontSize: 12,
),
), ),
), ),
), ],
], ),
), const SizedBox(height: 16),
const SizedBox(height: 16), Row(
Row( mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, children: [
children: [ Text(
Text( 'don\'t have an account?',
'don\'t have an account?', style: TextStyle(color: AppTheme.secondaryText),
style: TextStyle(color: AppTheme.secondaryText), ),
), const SizedBox(width: 8),
const SizedBox(width: 8), GestureDetector(
GestureDetector( onTap: () {
onTap: () { _resetForm();
_resetForm(); _setSignupMode(true);
_setSignupMode(true); },
}, child: Text(
child: Text( 'create one',
'create one', style: TextStyle(
style: TextStyle( color: AppTheme.accentColor,
color: AppTheme.accentColor, decoration: TextDecoration.underline,
decoration: TextDecoration.underline, ),
), ),
), ),
), ],
], ),
), ],
], ),
), ],
], ),
), ),
), ),
), ),

13
b0esche_cloud/lib/pages/signup_form.dart
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),
), ),
); );
} }