sBubshait/wesal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: main loading page while Flutter JS loads

Browse Source
This commit is contained in:
sBubshait 2025-08-03 10:54:36 +03:00
parent d6a0e78031
commit 121395481e
2 changed files with 219 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

331
frontend/lib/main.dart
View File

@ -459,195 +459,196 @@ class _SignInPageState extends State<SignInPage> {
],
),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(height: 20),
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(height: 20),
// Logo
Center(
child: Text(
'وصال',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w200,
fontFamily: 'Blaka',
color: Color(0xFF6A4C93),
),
),
),
SizedBox(height: 40),
// Welcome text
Text(
'Welcome Back!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
textAlign: TextAlign.center,
),
SizedBox(height: 8),
Text(
'Sign in to socialize with your colleagues\nand transform your social life!',
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
textAlign: TextAlign.center,
),
SizedBox(height: 40),
// Email field
TextFormField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
prefixIcon: Icon(Icons.email_outlined),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Color(0xFF6A4C93),
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
}
if (!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
),
SizedBox(height: 20),
// Password field
TextFormField(
controller: _passwordController,
obscureText: !_isPasswordVisible,
decoration: InputDecoration(
labelText: 'Password',
prefixIcon: Icon(Icons.lock_outline),
suffixIcon: IconButton(
icon: Icon(
_isPasswordVisible
? Icons.visibility_off
: Icons.visibility,
),
onPressed: () {
setState(() {
_isPasswordVisible = !_isPasswordVisible;
});
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Color(0xFF6A4C93),
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
if (value.length < 6) {
return 'Password must be at least 6 characters';
}
return null;
},
),
SizedBox(height: 12),
// Forgot password
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: _showHelpBottomSheet,
// Logo
Center(
child: Text(
'Forgot Password?',
'وصال',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w200,
fontFamily: 'Blaka',
color: Color(0xFF6A4C93),
fontWeight: FontWeight.w600,
),
),
),
),
SizedBox(height: 30),
SizedBox(height: 40),
// Sign in button
Container(
height: 56,
child: ElevatedButton(
onPressed: _isLoading ? null : _handleSignIn,
style: ElevatedButton.styleFrom(
backgroundColor: Color(0xFF6A4C93),
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
// Welcome text
Text(
'Welcome Back!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
textAlign: TextAlign.center,
),
SizedBox(height: 8),
Text(
'Sign in to socialize with your colleagues\nand transform your social life!',
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
textAlign: TextAlign.center,
),
SizedBox(height: 40),
// Email field
TextFormField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
prefixIcon: Icon(Icons.email_outlined),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
elevation: 2,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Color(0xFF6A4C93),
),
),
),
child: _isLoading
? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Colors.white,
),
)
: Text(
'Sign In',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
}
if (!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
),
),
SizedBox(height: 20),
SizedBox(height: 20),
// Contact link for new accounts
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don't have an account? ",
style: TextStyle(color: Colors.grey[600]),
// Password field
TextFormField(
controller: _passwordController,
obscureText: !_isPasswordVisible,
decoration: InputDecoration(
labelText: 'Password',
prefixIcon: Icon(Icons.lock_outline),
suffixIcon: IconButton(
icon: Icon(
_isPasswordVisible
? Icons.visibility_off
: Icons.visibility,
),
onPressed: () {
setState(() {
_isPasswordVisible = !_isPasswordVisible;
});
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Color(0xFF6A4C93),
),
),
),
GestureDetector(
onTap: _showHelpBottomSheet,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
if (value.length < 6) {
return 'Password must be at least 6 characters';
}
return null;
},
),
SizedBox(height: 12),
// Forgot password
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: _showHelpBottomSheet,
child: Text(
'Contact Support',
'Forgot Password?',
style: TextStyle(
color: Color(0xFF6A4C93),
fontWeight: FontWeight.w600,
),
),
),
],
),
),
SizedBox(height: 40),
],
),
SizedBox(height: 30),
// Sign in button
Container(
height: 56,
child: ElevatedButton(
onPressed: _isLoading ? null : _handleSignIn,
style: ElevatedButton.styleFrom(
backgroundColor: Color(0xFF6A4C93),
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
elevation: 2,
),
child: _isLoading
? CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(
Colors.white,
),
)
: Text(
'Sign In',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
),
),
SizedBox(height: 20),
// Contact link for new accounts
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don't have an account? ",
style: TextStyle(color: Colors.grey[600]),
),
GestureDetector(
onTap: _showHelpBottomSheet,
child: Text(
'Contact Support',
style: TextStyle(
color: Color(0xFF6A4C93),
fontWeight: FontWeight.w600,
),
),
),
],
),
SizedBox(height: 40),
],
),
),
),
),

53
frontend/web/index.html
View File

@ -45,13 +45,66 @@
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* Loading screen styles */
#loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #32B0A5 0%, #4600B9 50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Loading spinner */
.spinner {
width: 80px;
height: 80px;
border: 6px solid rgba(255, 255, 255, 0.3);
border-top: 6px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Hide loading screen when Flutter loads */
.flutter-loaded #loading {
display: none;
}
</style>
</head>
<body>
<!-- Loading screen -->
<div id="loading">
<div class="spinner"></div>
</div>
<script src="flutter_bootstrap.js" async></script>
<!-- Hide loading screen when Flutter loads -->
<script>
window.addEventListener('flutter-first-frame', function () {
document.body.classList.add('flutter-loaded');
});
// Fallback: hide after 10 seconds if Flutter doesn't load
setTimeout(function() {
document.body.classList.add('flutter-loaded');
}, 10000);
</script>
<!-- Firebase Messaging Service Worker -->
<script>
if ('serviceWorker' in navigator) {