644 lines
22 KiB
Dart
644 lines
22 KiB
Dart
import 'package:flutter/foundation.dart' show kIsWeb;
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:image_picker/image_picker.dart';
|
|
|
|
import '../../models/office.dart';
|
|
import '../../providers/auth_provider.dart' show sessionProvider;
|
|
import '../../providers/profile_provider.dart';
|
|
import '../../providers/tickets_provider.dart';
|
|
import '../../providers/user_offices_provider.dart';
|
|
import '../../services/face_verification.dart' as face;
|
|
import '../../widgets/face_verification_overlay.dart';
|
|
import '../../widgets/multi_select_picker.dart';
|
|
import '../../widgets/qr_verification_dialog.dart';
|
|
import '../../widgets/app_page_header.dart';
|
|
import '../../widgets/responsive_body.dart';
|
|
import '../../utils/snackbar.dart';
|
|
|
|
class ProfileScreen extends ConsumerStatefulWidget {
|
|
const ProfileScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<ProfileScreen> createState() => _ProfileScreenState();
|
|
}
|
|
|
|
class _ProfileScreenState extends ConsumerState<ProfileScreen> {
|
|
final _detailsKey = GlobalKey<FormState>();
|
|
final _passwordKey = GlobalKey<FormState>();
|
|
final _fullNameController = TextEditingController();
|
|
final _newPasswordController = TextEditingController();
|
|
final _confirmPasswordController = TextEditingController();
|
|
List<String> _selectedOfficeIds = [];
|
|
bool _savingDetails = false;
|
|
bool _changingPassword = false;
|
|
bool _savingOffices = false;
|
|
bool _uploadingAvatar = false;
|
|
bool _enrollingFace = false;
|
|
|
|
final _imagePicker = ImagePicker();
|
|
|
|
@override
|
|
void dispose() {
|
|
_fullNameController.dispose();
|
|
_newPasswordController.dispose();
|
|
_confirmPasswordController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final profileAsync = ref.watch(currentProfileProvider);
|
|
final officesAsync = ref.watch(officesProvider);
|
|
final userOfficesAsync = ref.watch(userOfficesProvider);
|
|
final userId = ref.watch(currentUserIdProvider);
|
|
final session = ref.watch(sessionProvider);
|
|
|
|
// Populate controllers from profile stream (if not editing)
|
|
profileAsync.whenData((p) {
|
|
final name = p?.fullName ?? '';
|
|
if (_fullNameController.text != name) {
|
|
_fullNameController.text = name;
|
|
}
|
|
});
|
|
|
|
// Populate selected offices from userOfficesProvider
|
|
final assignedOfficeIds =
|
|
userOfficesAsync.valueOrNull
|
|
?.where((u) => u.userId == userId)
|
|
.map((u) => u.officeId)
|
|
.toList() ??
|
|
[];
|
|
if (_selectedOfficeIds.isEmpty) {
|
|
_selectedOfficeIds = List<String>.from(assignedOfficeIds);
|
|
}
|
|
|
|
return ResponsiveBody(
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.only(bottom: 32),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
const AppPageHeader(
|
|
title: 'My Profile',
|
|
subtitle: 'Manage your account and preferences',
|
|
),
|
|
|
|
// ── Avatar Card ──
|
|
_buildAvatarCard(context, profileAsync),
|
|
const SizedBox(height: 12),
|
|
|
|
// ── Face & Biometric Enrollment Card ──
|
|
_buildFaceEnrollmentCard(context, profileAsync),
|
|
const SizedBox(height: 12),
|
|
|
|
// Details Card
|
|
Card(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Form(
|
|
key: _detailsKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Account details',
|
|
style: Theme.of(context).textTheme.titleMedium,
|
|
),
|
|
const SizedBox(height: 12),
|
|
// Email (read-only)
|
|
TextFormField(
|
|
initialValue: session?.user.email ?? '',
|
|
decoration: const InputDecoration(labelText: 'Email'),
|
|
readOnly: true,
|
|
),
|
|
const SizedBox(height: 12),
|
|
TextFormField(
|
|
controller: _fullNameController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Full name',
|
|
),
|
|
validator: (v) => (v ?? '').trim().isEmpty
|
|
? 'Full name is required'
|
|
: null,
|
|
),
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
children: [
|
|
FilledButton(
|
|
onPressed: _savingDetails ? null : _onSaveDetails,
|
|
child: Text(
|
|
_savingDetails ? 'Saving...' : 'Save details',
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 12),
|
|
|
|
// Change password Card
|
|
Card(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Form(
|
|
key: _passwordKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Password',
|
|
style: Theme.of(context).textTheme.titleMedium,
|
|
),
|
|
const SizedBox(height: 8),
|
|
const Text(
|
|
'Set or change your password. OAuth users (Google/Meta) can set a password here.',
|
|
),
|
|
const SizedBox(height: 12),
|
|
TextFormField(
|
|
controller: _newPasswordController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'New password',
|
|
),
|
|
obscureText: true,
|
|
validator: (v) {
|
|
if (v == null || v.isEmpty) {
|
|
return null; // allow empty to skip
|
|
}
|
|
if ((v).length < 8) {
|
|
return 'Password must be at least 8 characters';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
const SizedBox(height: 8),
|
|
TextFormField(
|
|
controller: _confirmPasswordController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Confirm password',
|
|
),
|
|
obscureText: true,
|
|
validator: (v) {
|
|
final pw = _newPasswordController.text;
|
|
if (pw.isEmpty) {
|
|
return null;
|
|
}
|
|
if (v != pw) {
|
|
return 'Passwords do not match';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
children: [
|
|
FilledButton(
|
|
onPressed: _changingPassword
|
|
? null
|
|
: _onChangePassword,
|
|
child: Text(
|
|
_changingPassword
|
|
? 'Updating...'
|
|
: 'Change password',
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 12),
|
|
|
|
// Offices Card
|
|
Card(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Offices',
|
|
style: Theme.of(context).textTheme.titleMedium,
|
|
),
|
|
const SizedBox(height: 12),
|
|
officesAsync.when(
|
|
data: (offices) {
|
|
return Column(
|
|
children: [
|
|
MultiSelectPicker<Office>(
|
|
label: 'Offices',
|
|
items: offices,
|
|
selectedIds: _selectedOfficeIds,
|
|
getId: (o) => o.id,
|
|
getLabel: (o) => o.name,
|
|
onChanged: (ids) =>
|
|
setState(() => _selectedOfficeIds = ids),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
children: [
|
|
FilledButton(
|
|
onPressed: _savingOffices
|
|
? null
|
|
: _onSaveOffices,
|
|
child: Text(
|
|
_savingOffices
|
|
? 'Saving...'
|
|
: 'Save offices',
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
},
|
|
loading: () =>
|
|
const Center(child: CircularProgressIndicator()),
|
|
error: (e, _) => Text('Failed to load offices: $e'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildAvatarCard(BuildContext context, AsyncValue profileAsync) {
|
|
final theme = Theme.of(context);
|
|
final colors = theme.colorScheme;
|
|
final profile = profileAsync.valueOrNull;
|
|
final avatarUrl = profile?.avatarUrl;
|
|
|
|
return Card(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text('Profile Photo', style: theme.textTheme.titleMedium),
|
|
const SizedBox(height: 16),
|
|
Center(
|
|
child: Stack(
|
|
children: [
|
|
Hero(
|
|
tag: 'profile-avatar',
|
|
child: CircleAvatar(
|
|
radius: 56,
|
|
backgroundColor: colors.surfaceContainerHighest,
|
|
backgroundImage: avatarUrl != null
|
|
? NetworkImage(avatarUrl)
|
|
: null,
|
|
child: avatarUrl == null
|
|
? Icon(
|
|
Icons.person,
|
|
size: 48,
|
|
color: colors.onSurfaceVariant,
|
|
)
|
|
: null,
|
|
),
|
|
),
|
|
if (_uploadingAvatar)
|
|
const Positioned.fill(
|
|
child: Center(child: CircularProgressIndicator()),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
FilledButton.tonalIcon(
|
|
onPressed: _uploadingAvatar
|
|
? null
|
|
: () => _pickAvatar(ImageSource.gallery),
|
|
icon: const Icon(Icons.photo_library),
|
|
label: const Text('Upload'),
|
|
),
|
|
if (!kIsWeb) ...[
|
|
const SizedBox(width: 12),
|
|
FilledButton.tonalIcon(
|
|
onPressed: _uploadingAvatar
|
|
? null
|
|
: () => _pickAvatar(ImageSource.camera),
|
|
icon: const Icon(Icons.camera_alt),
|
|
label: const Text('Camera'),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFaceEnrollmentCard(
|
|
BuildContext context,
|
|
AsyncValue profileAsync,
|
|
) {
|
|
final theme = Theme.of(context);
|
|
final colors = theme.colorScheme;
|
|
final profile = profileAsync.valueOrNull;
|
|
final hasFace = profile?.hasFaceEnrolled ?? false;
|
|
|
|
return Card(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text('Face Verification', style: theme.textTheme.titleMedium),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'Enroll your face for attendance verification. '
|
|
'A liveness check (blink detection) is required before enrollment.',
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// Face enrollment status
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
hasFace ? Icons.check_circle : Icons.cancel,
|
|
color: hasFace ? colors.tertiary : colors.error,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Text(
|
|
hasFace
|
|
? 'Face enrolled (${profile!.faceEnrolledAt != null ? _formatDate(profile.faceEnrolledAt!) : "unknown"})'
|
|
: 'Face not enrolled',
|
|
style: theme.textTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
FilledButton.icon(
|
|
onPressed: _enrollingFace ? null : _enrollFace,
|
|
icon: _enrollingFace
|
|
? const SizedBox(
|
|
width: 16,
|
|
height: 16,
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
)
|
|
: const Icon(Icons.face),
|
|
label: Text(hasFace ? 'Re-enroll Face' : 'Enroll Face'),
|
|
),
|
|
|
|
// Test Facial Recognition
|
|
const SizedBox(height: 16),
|
|
const Divider(),
|
|
const SizedBox(height: 12),
|
|
Text('Test Facial Recognition', style: theme.textTheme.titleSmall),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
hasFace
|
|
? 'Run a liveness check and compare with your enrolled face.'
|
|
: 'Enroll your face first to test facial recognition.',
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
OutlinedButton.icon(
|
|
onPressed: hasFace ? _testFacialRecognition : null,
|
|
icon: const Icon(Icons.face_retouching_natural),
|
|
label: const Text('Test Facial Recognition'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
String _formatDate(DateTime dt) {
|
|
return '${dt.year}-${dt.month.toString().padLeft(2, '0')}-${dt.day.toString().padLeft(2, '0')}';
|
|
}
|
|
|
|
Future<void> _pickAvatar(ImageSource source) async {
|
|
try {
|
|
final xFile = await _imagePicker.pickImage(
|
|
source: source,
|
|
maxWidth: 512,
|
|
maxHeight: 512,
|
|
imageQuality: 85,
|
|
);
|
|
if (xFile == null) return;
|
|
|
|
setState(() => _uploadingAvatar = true);
|
|
final bytes = await xFile.readAsBytes();
|
|
final ext = xFile.name.split('.').last;
|
|
final userId = ref.read(currentUserIdProvider);
|
|
if (userId == null) return;
|
|
await ref
|
|
.read(profileControllerProvider)
|
|
.uploadAvatar(userId: userId, bytes: bytes, fileName: 'avatar.$ext');
|
|
ref.invalidate(currentProfileProvider);
|
|
if (mounted) showSuccessSnackBar(context, 'Avatar updated.');
|
|
} catch (e) {
|
|
if (mounted) showErrorSnackBar(context, 'Failed to upload avatar: $e');
|
|
} finally {
|
|
if (mounted) setState(() => _uploadingAvatar = false);
|
|
}
|
|
}
|
|
|
|
/// Face enrollment via liveness detection (works on both mobile and web).
|
|
/// Mobile: uses flutter_liveness_check with blink detection.
|
|
/// Web: uses face-api.js with camera and blink detection.
|
|
/// Falls back to QR cross-device flow if web camera is unavailable.
|
|
Future<void> _enrollFace() async {
|
|
if (!mounted) return;
|
|
setState(() => _enrollingFace = true);
|
|
|
|
try {
|
|
final result = await face.runFaceLiveness(context);
|
|
|
|
if (result == null) {
|
|
// Cancelled or failed — on web, offer QR fallback
|
|
if (kIsWeb && mounted) {
|
|
final useQr = await showDialog<bool>(
|
|
context: context,
|
|
builder: (ctx) => AlertDialog(
|
|
title: const Text('Camera unavailable?'),
|
|
content: const Text(
|
|
'If your camera did not work, you can enroll via your mobile device instead.',
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.of(ctx).pop(false),
|
|
child: const Text('Cancel'),
|
|
),
|
|
FilledButton(
|
|
onPressed: () => Navigator.of(ctx).pop(true),
|
|
child: const Text('Use Mobile'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
if (useQr == true && mounted) {
|
|
final completed = await showQrVerificationDialog(
|
|
context: context,
|
|
ref: ref,
|
|
type: 'enrollment',
|
|
);
|
|
if (completed) ref.invalidate(currentProfileProvider);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Upload the captured face photo
|
|
final userId = ref.read(currentUserIdProvider);
|
|
if (userId == null) return;
|
|
await ref
|
|
.read(profileControllerProvider)
|
|
.uploadFacePhoto(
|
|
userId: userId,
|
|
bytes: result.imageBytes,
|
|
fileName: 'face.jpg',
|
|
);
|
|
ref.invalidate(currentProfileProvider);
|
|
if (mounted) showSuccessSnackBar(context, 'Face enrolled successfully.');
|
|
} catch (e) {
|
|
if (mounted) showErrorSnackBar(context, 'Face enrollment failed: $e');
|
|
} finally {
|
|
if (mounted) setState(() => _enrollingFace = false);
|
|
}
|
|
}
|
|
|
|
/// Test facial recognition: run liveness + compare with enrolled face.
|
|
Future<void> _testFacialRecognition() async {
|
|
final profile = ref.read(currentProfileProvider).valueOrNull;
|
|
if (profile == null || !profile.hasFaceEnrolled) {
|
|
if (mounted) {
|
|
showWarningSnackBar(context, 'Please enroll your face first.');
|
|
}
|
|
return;
|
|
}
|
|
|
|
try {
|
|
final result = await showFaceVerificationOverlay(
|
|
context: context,
|
|
ref: ref,
|
|
// Profile test mode: no attendance record should be uploaded/skipped.
|
|
attendanceLogId: null,
|
|
uploadAttendanceResult: false,
|
|
maxAttempts: 3,
|
|
);
|
|
|
|
if (!mounted || result == null) return;
|
|
|
|
final score = result.matchScore ?? 0.0;
|
|
if (result.verified) {
|
|
showSuccessSnackBar(
|
|
context,
|
|
'Face matched! Similarity: ${(score * 100).toStringAsFixed(1)}%',
|
|
);
|
|
} else {
|
|
showWarningSnackBar(
|
|
context,
|
|
'Face did not match. Similarity: ${(score * 100).toStringAsFixed(1)}%',
|
|
);
|
|
}
|
|
} catch (e) {
|
|
if (mounted) showErrorSnackBar(context, 'Recognition test failed: $e');
|
|
}
|
|
}
|
|
|
|
Future<void> _onSaveDetails() async {
|
|
if (!_detailsKey.currentState!.validate()) return;
|
|
final id = ref.read(currentUserIdProvider);
|
|
if (id == null) return;
|
|
setState(() => _savingDetails = true);
|
|
try {
|
|
await ref
|
|
.read(profileControllerProvider)
|
|
.updateFullName(
|
|
userId: id,
|
|
fullName: _fullNameController.text.trim(),
|
|
);
|
|
if (!mounted) return;
|
|
showSuccessSnackBar(context, 'Profile updated.');
|
|
// Refresh providers so other UI picks up the change immediately
|
|
ref.invalidate(currentProfileProvider);
|
|
ref.invalidate(profilesProvider);
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
showErrorSnackBar(context, 'Update failed: $e');
|
|
} finally {
|
|
if (mounted) setState(() => _savingDetails = false);
|
|
}
|
|
}
|
|
|
|
Future<void> _onChangePassword() async {
|
|
if (!_passwordKey.currentState!.validate()) return;
|
|
final pw = _newPasswordController.text;
|
|
if (pw.isEmpty) {
|
|
// nothing to do
|
|
return;
|
|
}
|
|
setState(() => _changingPassword = true);
|
|
try {
|
|
await ref.read(profileControllerProvider).updatePassword(pw);
|
|
_newPasswordController.clear();
|
|
_confirmPasswordController.clear();
|
|
if (!mounted) return;
|
|
showSuccessSnackBar(context, 'Password updated.');
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
showErrorSnackBar(context, 'Password update failed: $e');
|
|
} finally {
|
|
if (mounted) setState(() => _changingPassword = false);
|
|
}
|
|
}
|
|
|
|
Future<void> _onSaveOffices() async {
|
|
final id = ref.read(currentUserIdProvider);
|
|
if (id == null) return;
|
|
setState(() => _savingOffices = true);
|
|
try {
|
|
final assignments = ref.read(userOfficesProvider).valueOrNull ?? [];
|
|
final assigned = assignments
|
|
.where((a) => a.userId == id)
|
|
.map((a) => a.officeId)
|
|
.toSet();
|
|
final selected = _selectedOfficeIds.toSet();
|
|
|
|
final toAdd = selected.difference(assigned);
|
|
final toRemove = assigned.difference(selected);
|
|
|
|
final ctrl = ref.read(userOfficesControllerProvider);
|
|
for (final officeId in toAdd) {
|
|
await ctrl.assignUserOffice(userId: id, officeId: officeId);
|
|
}
|
|
for (final officeId in toRemove) {
|
|
await ctrl.removeUserOffice(userId: id, officeId: officeId);
|
|
}
|
|
|
|
if (!mounted) return;
|
|
showSuccessSnackBar(context, 'Offices updated.');
|
|
ref.invalidate(userOfficesProvider);
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
showErrorSnackBar(context, 'Failed to save offices: $e');
|
|
} finally {
|
|
if (mounted) setState(() => _savingOffices = false);
|
|
}
|
|
}
|
|
}
|