Feature/otp screen

composeApp/src/commonMain/composeResources/values-ar/string.xml

@@ -8,7 +8,7 @@
 
     <string name="welcome_title">مرحبًا بك في صنعة 👋</string>
     <string name="enter_phone">أدخل رقم هاتفك للمتابعة</string>
-    <string name="phone_hint">+٢٠  ٠٠٠ - ٠٠٠ - ٠٠٠٠</string>
+    <string name="phone_hint"> ٠٠٠ - ٠٠٠ - ٠٠٠٠</string>
     <string name="terms_and_conditions">الشروط والأحكام</string>
     <string name="privacy_policy">سياسة الخصوصية</string>
     <string name="privacy_agreement">بالمتابعة فإنك توافق على </string>
@@ -24,4 +24,23 @@
     <string name="next">التالى</string>
     <string name="skip">تخطى</string>
 
+    <!-- OTP Screen -->
+    <string name="enter_verification_code">أدخل رمز التحقق</string>
+    <string name="sent_message_to_phone">لقد أرسلنا رمزًا مكوّنًا من 6 أرقام إلى رقم هاتفك</string>
+    <string name="verify">تحقق</string>
+    <string name="do_not_receive_code">لم تستلم الرمز؟</string>
+    <string name="resent_after">إعادة إرسال الرمز بعد</string>
+    <string name="resent_code">إعادة إرسال الرمز</string>
+
+
+
+
+    <!-- OTP Screen -->
+    <string name="enter_verification_code">أدخل رمز التحقق</string>
+    <string name="sent_message_to_phone">لقد أرسلنا رمزًا مكوّنًا من 4 أرقام إلى رقم هاتفك</string>
+    <string name="verify">تحقق</string>
+    <string name="do_not_receive_code">لم تستلم الرمز؟</string>
+    <string name="resent_after">إعادة إرسال الرمز بعد</string>
+    <string name="resent_code">إعادة إرسال الرمز</string>
+
 </resources>

composeApp/src/commonMain/composeResources/values/string.xml

@@ -9,7 +9,7 @@
     <!--  RegisterScreen -->
     <string name="welcome_title">Welcome to San3a 👋</string>
     <string name="enter_phone">Enter your phone number to\n continue</string>
-    <string name="phone_hint">+20  000 - 000 - 0000</string>
+    <string name="phone_hint"> 000 - 000 - 0000</string>
     <string name="terms_and_conditions">Terms and Conditions</string>
     <string name="privacy_policy">Privacy Policy</string>
     <string name="privacy_agreement">By continuing, you agree on our </string>
@@ -20,17 +20,33 @@
     <string name="logo_icon">logo icon</string>
     <string name="egypt_flag">egypt flag</string>
 
+    <!-- OTP Screen -->
+    <string name="enter_verification-code">Enter Verification Code</string>
+    <string name="sent_message_to_phone">We sent 6-digit code to your phone number </string>
+    <string name="verify">Verify</string>
+    <string name="do_not_receive_code">Didn't receive code?</string>
+    <string name="resent_after">Resend Code after </string>
+    <string name="resent_code">Resend Code</string>
+
 
     <!-- OnBoarding Screen -->
     <string name="get_started">Get Started</string>
     <string name="next">Next</string>
     <string name="skip">Skip</string>
 
+    <!-- OTP Screen -->
+    <string name="enter_verification-code">Enter Verification Code</string>
+    <string name="sent_message_to_phone">We sent 4-digit code to your phone number </string>
+    <string name="verify">Verify</string>
+    <string name="do_not_receive_code">Didn't receive code?</string>
+    <string name="resent_after">Resend Code after </string>
+    <string name="resent_code">Resend Code</string>
 
     <!-- Account Setup Category Screen -->
     <string name="account_setup_customer_category_title">What do you usually need help with?</string>
     <string name="account_setup_customer_category_description">This helps us personalize your experience. You can change it anytime.</string>
     <string name="account_setup_craftsman_category_title">What services do you offer?</string>
     <string name="account_setup_craftsman_category_description">Choose your specialties to get relevant job requests. You can change this later.</string>
 
+
 </resources>

composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/BackButton.kt

@@ -0,0 +1,48 @@
+package org.example.project.presentation.designsystem.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import crafto.composeapp.generated.resources.Res
+import crafto.composeapp.generated.resources.arrow_left
+import org.example.project.presentation.designsystem.textstyle.AppTheme
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.ui.tooling.preview.Preview
+
+@Composable
+fun BackButton(
+    onClick : () -> Unit,
+    modifier: Modifier = Modifier,
+){
+    Box(
+        modifier = modifier
+    ){
+        Icon(
+            painter = painterResource(Res.drawable.arrow_left),
+            contentDescription = "arrow left icon",
+            modifier = Modifier.align(Alignment.Center).clickable(onClick = onClick)
+                .padding(12.dp)
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun BackButtonPreview(){
+    AppTheme(isDarkTheme = false) {
+        BackButton(
+            modifier = Modifier.background(
+                color = AppTheme.craftoColors.background.card,
+                shape = RoundedCornerShape(AppTheme.craftoRadius.full)
+            ),
+            onClick = {}
+        )
+    }
+}

composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/TextField.kt

@@ -3,6 +3,7 @@ package org.example.project.presentation.designsystem.components
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -14,8 +15,16 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -35,12 +44,10 @@ import org.example.project.presentation.designsystem.textstyle.AppTheme
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
-private const val s = "Forgot Password?"
-
 @Composable
 fun TextField(
     labelText: String? = null,
-    showDividerLine : Boolean = false,
+    showDividerLine: Boolean = false,
     hint: String? = null,
     text: String,
     onTextChange: (String) -> Unit,
@@ -59,6 +66,7 @@ fun TextField(
     allowSingleLine: Boolean = true,
     textAppearance: TextStyle? = null,
     textTint: Color? = null,
+    showPhoneCode: Boolean = false,
     inputKeyboard: KeyboardOptions = KeyboardOptions.Default.copy(imeAction = androidx.compose.ui.text.input.ImeAction.Done),
     inputActions: KeyboardActions = KeyboardActions.Default,
     forgotAction: (() -> Unit)? = null,
@@ -98,7 +106,7 @@ fun TextField(
                 .background(
                     AppTheme.craftoColors.background.card,
                     RoundedCornerShape(AppTheme.craftoRadius.lg)
-                ),
+                ).focusable(),
             textStyle = textAppearance ?: AppTheme.textStyle.body.medium,
             placeholder = hint?.let {
                 {
@@ -117,9 +125,20 @@ fun TextField(
             isError = errorState,
             enabled = enabledState,
             leadingIcon = {
-                Row(verticalAlignment = Alignment.CenterVertically) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(4.dp)
+                ) {
                     startIcon?.invoke()
-                    if(showDividerLine) VerticalDivider()
+                    if (showDividerLine) VerticalDivider()
+
+                    if (showPhoneCode) {
+                        Text(
+                            text = "+20",
+                            style = AppTheme.textStyle.body.medium,
+                            color = AppTheme.craftoColors.shade.primary
+                        )
+                    }
                 }
             },
             trailingIcon = {