142 lines
3.8 KiB
TypeScript
142 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
/*
|
|
* File: EmailScreen.tsx
|
|
* Description: Email input screen for onboarding flow with gradient background.
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import type React from "react"
|
|
import { useState } from "react"
|
|
import { View, Text, StyleSheet, TextInput } from "react-native"
|
|
import { Button } from "../../../../shared/src/components/Button"
|
|
import OnboardingContainer from "./OnboardingContainer"
|
|
import IconContainer from "./IconContainer"
|
|
import { Colors, Spacing, Typography } from "../../../../shared/src/theme"
|
|
import { showError } from "../../../../shared/src/utils/helpers/Toast"
|
|
import { validateEmail } from "../../../../shared/src/utils/validation/validators"
|
|
import Icon from "react-native-vector-icons/Feather"
|
|
import { EmailIconSVG } from "../../../../shared/src/components/Icons/SvgIcons"
|
|
|
|
interface SignUpDataInterface {
|
|
email: string
|
|
password: string
|
|
first_name: string
|
|
last_name: string
|
|
username:string
|
|
id_photo_url: {}
|
|
hospital_id: string
|
|
}
|
|
interface EmailScreenProps {
|
|
onContinue: (email: string) => void
|
|
onBack: () => void
|
|
Data:SignUpDataInterface
|
|
}
|
|
|
|
|
|
const EmailScreen: React.FC<EmailScreenProps> = ({ onContinue, onBack, Data }) => {
|
|
console.log('signupData',Data)
|
|
const [email, setEmail] = useState(Data.email)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const handleContinue = () => {
|
|
if (!email.trim()) {
|
|
showError("Validation Error", "Email address is required.")
|
|
return
|
|
}
|
|
if (!validateEmail(email)) {
|
|
showError("Validation Error", "Please enter a valid email address.")
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
setTimeout(() => {
|
|
setLoading(false)
|
|
|
|
}, 2000)
|
|
onContinue(email)
|
|
}
|
|
|
|
return (
|
|
<OnboardingContainer onBack={onBack}>
|
|
<IconContainer Icon={()=><EmailIconSVG/>} />
|
|
|
|
<Text style={styles.title}>What's your email?</Text>
|
|
<Text style={styles.subtitle}>Please enter your email address.</Text>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Icon name="mail" size={20} color={Colors.textSecondary} style={styles.inputIcon} />
|
|
<TextInput
|
|
placeholder="Email address"
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
style={styles.inputField}
|
|
autoCapitalize="none"
|
|
keyboardType="email-address"
|
|
placeholderTextColor={Colors.textMuted}
|
|
/>
|
|
</View>
|
|
|
|
<Button title="Continue" onPress={handleContinue} style={styles.button} loading={loading} />
|
|
</OnboardingContainer>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
title: {
|
|
fontFamily: Typography.fontFamily.bold,
|
|
fontSize: Typography.fontSize.title,
|
|
color: Colors.textPrimary,
|
|
textAlign: "center",
|
|
marginBottom: Spacing.sm,
|
|
},
|
|
subtitle: {
|
|
fontFamily: Typography.fontFamily.regular,
|
|
fontSize: Typography.fontSize.md,
|
|
color: Colors.textSecondary,
|
|
textAlign: "center",
|
|
marginBottom: Spacing.xl,
|
|
},
|
|
inputContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: Colors.inputBackground,
|
|
borderColor: Colors.border,
|
|
borderWidth:1,
|
|
borderRadius: 12,
|
|
marginBottom: Spacing.xl,
|
|
paddingHorizontal: Spacing.md,
|
|
paddingVertical: 2,
|
|
shadowColor: Colors.backButtonShadow,
|
|
// shadowOffset: {
|
|
// width: 0,
|
|
// height: 1,
|
|
// },
|
|
// shadowOpacity: 0.05,
|
|
// shadowRadius: 2,
|
|
// elevation: 1,
|
|
},
|
|
inputIcon: {
|
|
marginRight: Spacing.sm,
|
|
},
|
|
inputField: {
|
|
flex: 1,
|
|
paddingVertical: Spacing.md,
|
|
fontSize: Typography.fontSize.md,
|
|
color: Colors.textPrimary,
|
|
},
|
|
button: {
|
|
marginTop: Spacing.md,
|
|
paddingVertical:Spacing.lg,
|
|
},
|
|
})
|
|
|
|
export default EmailScreen
|
|
|
|
/*
|
|
* End of File: EmailScreen.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|