266 lines
8.7 KiB
Dart
266 lines
8.7 KiB
Dart
import 'package:monitoring_amoniak/auth/auth_service.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
|
|
class Signup extends StatefulWidget {
|
|
const Signup({super.key});
|
|
|
|
@override
|
|
_SignupState createState() => _SignupState();
|
|
}
|
|
|
|
class _SignupState extends State<Signup> {
|
|
final TextEditingController _emailController = TextEditingController();
|
|
final TextEditingController _passwordController = TextEditingController();
|
|
final TextEditingController _confirmPasswordController =
|
|
TextEditingController();
|
|
|
|
bool _isPasswordVisible = false;
|
|
bool _isConfirmPasswordVisible = false;
|
|
|
|
final _formKey = GlobalKey<FormState>();
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
|
|
resizeToAvoidBottomInset: true,
|
|
body: Container(
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [Color(0xFF2196F3), Color.fromARGB(255, 255, 255, 255)],
|
|
),
|
|
),
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
|
|
child: Form(
|
|
key: _formKey,
|
|
child: Column(
|
|
children: [
|
|
Center(
|
|
child: FittedBox(
|
|
child: Image.asset(
|
|
"lib/assets/nemo.png",
|
|
height: 250,
|
|
width: 250,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 5),
|
|
|
|
Text(
|
|
'Create Account',
|
|
style: GoogleFonts.raleway(
|
|
textStyle: const TextStyle(
|
|
color: Colors.black,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 35,
|
|
),
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 40),
|
|
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.1),
|
|
blurRadius: 10,
|
|
spreadRadius: 2,
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
|
|
|
|
_buildTextField(
|
|
label: 'Email Address',
|
|
hint: '******@gmail.com',
|
|
controller: _emailController,
|
|
validator: (value) {
|
|
if (value == null || value.isEmpty) {
|
|
return 'Email cannot be empty';
|
|
} else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+')
|
|
.hasMatch(value)) {
|
|
return 'Invalid email format';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
const SizedBox(height: 20),
|
|
_buildPasswordField(
|
|
label: 'Password',
|
|
hint: '********',
|
|
controller: _passwordController,
|
|
isPasswordVisible: _isPasswordVisible,
|
|
onVisibilityChanged: () {
|
|
setState(() {
|
|
_isPasswordVisible = !_isPasswordVisible;
|
|
});
|
|
},
|
|
),
|
|
const SizedBox(height: 16),
|
|
_buildPasswordField(
|
|
label: 'Confirm Password',
|
|
hint: '********',
|
|
controller: _confirmPasswordController,
|
|
isPasswordVisible: _isConfirmPasswordVisible,
|
|
onVisibilityChanged: () {
|
|
setState(() {
|
|
_isConfirmPasswordVisible = !_isConfirmPasswordVisible;
|
|
});
|
|
},
|
|
validator: (value) {
|
|
if (value == null || value.isEmpty) {
|
|
return 'Please confirm your password';
|
|
} else if (value != _passwordController.text) {
|
|
return 'Passwords do not match';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
const SizedBox(height: 30),
|
|
Center(
|
|
child: ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: const Color.fromARGB(255, 49, 186, 54),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 50, vertical: 15),
|
|
),
|
|
onPressed: () async {
|
|
if (_formKey.currentState!.validate()) {
|
|
await AuthService().signup(
|
|
email: _emailController.text.trim(),
|
|
password: _passwordController.text.trim(),
|
|
context: context,
|
|
);
|
|
}
|
|
},
|
|
child: const Text(
|
|
'Daftar',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontStyle: FontStyle.normal,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTextField({
|
|
required String label,
|
|
required String hint,
|
|
required TextEditingController controller,
|
|
String? Function(String?)? validator,
|
|
}) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
label,
|
|
style: GoogleFonts.raleway(
|
|
textStyle: const TextStyle(
|
|
color: Colors.black,
|
|
fontWeight: FontWeight.normal,
|
|
fontSize: 16,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
TextFormField(
|
|
controller: controller,
|
|
validator: validator,
|
|
decoration: InputDecoration(
|
|
filled: true,
|
|
hintText: hint,
|
|
hintStyle: const TextStyle(
|
|
color: Color(0xff6A6A6A),
|
|
fontWeight: FontWeight.normal,
|
|
fontSize: 14,
|
|
),
|
|
fillColor: const Color(0xffF7F7F9),
|
|
border: OutlineInputBorder(
|
|
borderSide: BorderSide.none,
|
|
borderRadius: BorderRadius.circular(14),
|
|
),
|
|
prefixIcon: const Icon(Icons.account_circle_outlined)),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildPasswordField({
|
|
required String label,
|
|
required String hint,
|
|
required TextEditingController controller,
|
|
required bool isPasswordVisible,
|
|
required VoidCallback onVisibilityChanged,
|
|
String? Function(String?)? validator,
|
|
}) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
label,
|
|
style: GoogleFonts.raleway(
|
|
textStyle: const TextStyle(
|
|
color: Colors.black,
|
|
fontWeight: FontWeight.normal,
|
|
fontSize: 16,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
TextFormField(
|
|
controller: controller,
|
|
obscureText: !isPasswordVisible,
|
|
validator: validator,
|
|
decoration: InputDecoration(
|
|
filled: true,
|
|
hintText: hint,
|
|
hintStyle: const TextStyle(
|
|
color: Colors.grey,
|
|
fontWeight: FontWeight.normal,
|
|
fontSize: 14,
|
|
),
|
|
fillColor: const Color(0xffF7F7F9),
|
|
border: OutlineInputBorder(
|
|
borderSide: BorderSide.none,
|
|
borderRadius: BorderRadius.circular(14),
|
|
),
|
|
suffixIcon: IconButton(
|
|
onPressed: onVisibilityChanged,
|
|
icon: Icon(
|
|
isPasswordVisible ? Icons.visibility : Icons.visibility_off,
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
prefixIcon: const Icon(Icons.lock_outline)),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|