add otp component

lib/application/component/button/button_view.dart

@@ -76,7 +76,7 @@ class ButtonView extends StatelessWidget {
               side: isOutlined
                   ? BorderSide(
                       color: disabled
-                          ? color.surface
+                          ? ColorPalette.greyBorder
                           : isSecondaryColor
                               ? ColorPalette.greyBorder
                               : ColorPalette.primary,

lib/application/component/otp/otp_view.dart

@@ -0,0 +1,123 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/otp/otp_viewmodel.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/registration_password_view.dart';
+import 'package:flutter/material.dart';
+import 'package:pinput/pinput.dart';
+import 'package:provider/provider.dart';
+
+class OtpView extends StatelessWidget {
+  final String title;
+  final String? contentTitle, contentSubtitle;
+  const OtpView({
+    Key? key,
+    required this.title,
+    this.contentTitle,
+    this.contentSubtitle,
+  }) : super(key: key);
+
+  Widget _otpContent(BuildContext context, OtpViewModel provider) {
+    return Form(
+        key: provider.formKey,
+        child: Column(
+          children: [
+            Pinput(
+              length: 4,
+              controller: provider.ctrlPin,
+              focusNode: provider.focusNode,
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              validator: (value) {
+                if (value!.isEmpty) {
+                  return 'Pin must be complete';
+                }
+                return null;
+              },
+              defaultPinTheme: PinTheme(
+                textStyle: const TextStyle(
+                  color: ColorPalette.slate800,
+                  fontSize: 24,
+                  fontWeight: FontWeight.bold,
+                ),
+                width: SizeConfig.width * .19,
+                height: SizeConfig.height * .08,
+                decoration: BoxDecoration(
+                  border: Border.all(color: const Color(0xFFE2E8F0)),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+              ),
+              errorPinTheme: PinTheme(
+                textStyle: const TextStyle(
+                  color: ColorPalette.slate800,
+                  fontSize: 24,
+                  fontWeight: FontWeight.bold,
+                ),
+                width: SizeConfig.width * .19,
+                height: SizeConfig.height * .08,
+                decoration: BoxDecoration(
+                  border: Border.all(color: Colors.redAccent),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+              ),
+            ),
+            ButtonView(
+              name: 'Verify',
+              // disabled: !provider.buttonIsActive,
+              // backgroundColor: ColorPalette.grey,
+              onPressed: () {
+                if (provider.formKey.currentState!.validate()) {
+                  final pin = provider.ctrlPin.text;
+                  provider.validateOtp(pin).then((value) {
+                    if (value) {
+                      routePush(context,
+                          page: const RegistrationPasswordView(),
+                          routeType: RouteType.pushReplace);
+                    } else {
+                      provider.ctrlPin.clear();
+                    }
+                  });
+                }
+              },
+            ),
+          ],
+        ));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+        create: (context) => OtpViewModel(),
+        builder: (context, child) {
+          return Scaffold(
+            appBar: AppBar(
+              title: Text(title),
+            ),
+            body: Container(
+              padding: const EdgeInsets.all(16.0),
+              child:
+                  Consumer<OtpViewModel>(builder: (context, provider, child) {
+                return Column(
+                  children: [
+                    TextCaption(
+                      title: contentTitle ?? '',
+                      subtitle: contentSubtitle ?? '',
+                    ),
+                    _otpContent(context, provider),
+                    TextButton(
+                        onPressed: () {},
+                        child: const Text(
+                          'Resend Code',
+                          style: TextStyle(
+                            fontWeight: FontWeight.w700,
+                          ),
+                        ))
+                  ],
+                );
+              }),
+            ),
+          );
+        });
+  }
+}

lib/application/component/otp/otp_viewmodel.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class OtpViewModel extends ChangeNotifier {
+  var formKey = GlobalKey<FormState>();
+  var focusNode = FocusNode();
+  bool buttonIsActive = false;
+
+  TextEditingController ctrlPin = TextEditingController();
+
+  Future<bool> validateOtp(String pin) async {
+    final pinLength = pin.length;
+    if (pinLength == 4) {
+      return true;
+    }
+    return false;
+  }
+}

lib/application/component/text_caption/text_caption.dart

@@ -38,7 +38,7 @@ class TextCaption extends StatelessWidget {
                     style: const TextStyle(
                       fontSize: 16,
                       fontWeight: FontWeight.w500,
-                      color: ColorPalette.slate800,
+                      color: ColorPalette.slate500,
                     ),
                   ),
                 )