التاكد من قوة كلمة المرور في flutter بدون مكتبة

في هذا الدرس سوف نقدم لكم كيف تقوم باختبار كلمة المرور الخاصه بك والتي يقوم المستخدم بإدخالها لكي تتاكد ان كلمة المرور قوية وهذا الدرس قام احد العملاء بطلبه مني في مشروعه حيث طلب تصميم لقوة كلمة المرور في مشروعه لكي يرفع من نسبة الامان في التطبيق بشكل كبير , ولهذا احببت ان اقدم لكم المقاله لكي يستفاد منها باقي الاشخاص ولتنفيذها في مشاريعهم وتحسين من الui الخاص بالمشروع بشكل كبير لكي تجعل المستخدم يفضل استخدام تطبيقك .

يتطلب البرنامج الفعال عبر الأنظمة الأساسية ما لا يقل عن 250 ساعة من الجهد من شركة تطوير التطبيقات ذات السمعة الطيبة عبر الأنظمة الأساسية من أجل إنتاجه.

إنها لحظة رائعة لإنشاء تطبيقات الهاتف المحمول حيث يمر السوق حاليًا بتحول رقمي. أنصح باستخدام مطور تطبيقات Flutter لإنشاء تطبيقات لمحبي iOS و Android في وقت واحد بدلاً من توظيف مطوري iOS و Android في الولايات المتحدة الأمريكية ومختلف بلدان العالم .

لا شك أن Flutter عبر الأنظمة الأساسية هي رائدة في مجال البرمجيات وصناعات تكنولوجيا المعلومات ، وسنرى المزيد منها قريبًا أيضًا وبالمناسبه اول اعمل لي كان باستخدام تقنية Flutter لذلك ما الذي يجعلك متردد من البدء بتعلمها !

android sdk manager تحميل flutter developers applications create app android android studio mac

check power full password in flutter

في هذا الجزء نلاحظ انه يوجد لدينا مجموعه من المتغير الbool لكي نتاكد من قوة الكلمة وهناك methode باسم onPasswordChanged وهذه الوظيفة تقوم بعمل اختبار لكمة المرور وتحقيق الشروط الخاصه بالكلمه وايضا methode اخرى باسم isPasswordValid يتم فيها عمل اختبار لجميع المتغيرات والتاكد انها صحيحه , ويتم استخدام هذه الmethode في ال on change لكي نتاكد ان الشروط تم تحقيقها بشكل صحيح كما هو موضح وتم تصميم Widget validationRow وهذه تعبر عن التصميم الذي سوف يظهر عندما لا يتم تحقيق الشروط وايضا تم تصميم Visibility لكي نتاكد ان الشروط لم تتحقق وان النص غير فارغ .

ui.dart

class RegisterPage extends StatefulWidget {
  const RegisterPage({Key? key}) : super(key: key);

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  TextEditingController _passwordController = TextEditingController();

  bool _isPasswordEightCharacters = false;
  bool _isPasswordHasSpecialCharacter = false;
  bool _isPasswordHasUpperAndLower = false;


  onPasswordChanged(String password) {
    final upperLower = RegExp(r"(?=.*[a-z])(?=.*[A-Z])\w+");
    final specialCharacter = RegExp(r'[!@#$%^&*(),.?":{}|<>]');
    setState(() {
      _isPasswordEightCharacters = false;
      if (password.length >= 8) _isPasswordEightCharacters = true;

      _isPasswordHasUpperAndLower = false;
      if (upperLower.hasMatch(password)) _isPasswordHasUpperAndLower = true;

      _isPasswordHasSpecialCharacter = false;
      if (specialCharacter.hasMatch(password)) {
        _isPasswordHasSpecialCharacter = true;
      }
    });
  }

  bool isPasswordValid() {
    return _isPasswordEightCharacters &&
        _isPasswordHasSpecialCharacter &&
        _isPasswordHasUpperAndLower;
  }

  var formKey = GlobalKey<FormState>();


  @override
  void initState() {
    super.initState();
    cubit = context.read<MainBloc>();
    );
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<MainBloc, MainState>(
      listener: (context, state) {
        if (state is CreateUserSuccessState) {
          navigateAndFinish(context, PinPage(email: _emailController.text));
          showToast(
              message: 'Register is Success', toastStates: ToastStates.SUCCESS);
        } else if (state is Error) {
          showToast(message: state.error, toastStates: ToastStates.ERROR);
        } else if (state is SendOTPSuccessState) {
          showToast(
              message: 'Send OTP To Email', toastStates: ToastStates.SUCCESS);
        }
      },
      
      builder: (context, state) {
        return SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Form(
            key: formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                space20Vertical,
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: MyTextField(
                    text: 'Enter your Password',
                    controller: _passwordController,
                    onChanged: (val) {
                      print(val);
                      setState(() {
                        onPasswordChanged(val);
                        },
                      );
                    },
                    iconPrefix: CupertinoIcons.lock,
                    isPassword: true,
                    validate: (String? value) {
                      if (value!.isEmpty) {
                        return 'Password is required';
                      }
                    },
                  ),
                ),
                Visibility(
                  visible: _passwordController.text.isNotEmpty && !isPasswordValid(),
                  child: Container(
                    decoration: const BoxDecoration(
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(15),
                          bottomRight: Radius.circular(15)),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(
                              Radius.circular(10.0)
                          ),
                          color: Colors.blue[50],
                        ),
                        child: Column(
                          children: [
                            Container(
                              child: validationRow(
                                  condition: _isPasswordHasUpperAndLower,
                                  message: "Contains upper and lower case"),
                            ),
                            Container(
                              child: validationRow(
                                  condition: _isPasswordHasSpecialCharacter,
                                  message: "Contains one special character"),
                            ),
                            Container(
                              child: validationRow(
                                  condition: _isPasswordEightCharacters,
                                  message: "Contains at least 8 characters"),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget validationRow({required bool condition, required String message}) =>
   Padding(
    padding: EdgeInsets.all(10.0),
    child: Row(
      children: [
        Container(
          width: 40,
          height: 40,
          decoration: BoxDecoration(
            color: condition ? Colors.green[300] : Colors.red[300],
            shape: BoxShape.circle,
          ),
          child: Center(
            child: Icon(
              condition ? Icons.check : Icons.clear,
              color: Colors.white,
              size: 15,
            ),
          ),
        ),
        SizedBox(width: 10,),
        Text(message)
      ],
    ),
  );

}

فيديو الشرح

مزيد من المقالات

تعديل المقال

GeeCoders - جي كودرس

التاكد من قوة كلمة المرور في flutter بدون مكتبة