eletrotupi / tcc/ frontend/app/auth/activate.tsx4afa6690e7fdf56346236182ffc75bb984eb9441
4.1 KB | 165 lines Raw
1
import React, { useState } from 'react';
2
import {
3
  View,
4
  Text,
5
  StyleSheet,
6
  ScrollView,
7
  KeyboardAvoidingView,
8
  Platform,
9
  Alert,
10
} from 'react-native';
11
import { Link, useLocalSearchParams, router } from 'expo-router';
12
import { SafeAreaView } from 'react-native-safe-area-context';
13
import { useThemeColor } from '@/hooks/use-theme-color';
14
import { Button, Input } from '@/components/ui';
15
import { Colors } from '@/constants/theme'
16
import { useAuth } from '@/context/AuthContext';
17
18
export default function ActivateScreen() {
19
  const { userId } = useLocalSearchParams();
20
  const [code, setCode] = useState('');
21
  const [errors, setErrors] = useState<{
22
    code?: string;
23
  }>({});
24
25
  const { activate, requestActivateCode } = useAuth();
26
  const [loading, setLoading] = useState(false);
27
  const textColor = useThemeColor({}, 'text');
28
  const backgroundColor = useThemeColor({}, 'background');
29
  const tintColor = useThemeColor({}, 'tint');
30
31
  const validateForm = () => {
32
    const newErrors: typeof errors = {};
33
34
    if (!code) {
35
      newErrors.code = 'O código é obrigatório';
36
    } else if (code.length < 6) {
37
      newErrors.code = 'O código deve conter pelo menos 6 caracteres';
38
    }
39
40
    setErrors(newErrors);
41
42
    return Object.keys(newErrors).length === 0;
43
  };
44
45
  const handleActivate = async () => {
46
    if (!validateForm()) return;
47
48
    setLoading(true);
49
    try {
50
      await activate(Number(code.replaceAll(' ', '')));
51
52
      Alert.alert('Sucesso!', 'Conta ativada com sucesso', [
53
        {
54
          text: 'OK',
55
          onPress: () => router.replace('/'),
56
        },
57
      ]);
58
    } catch (error: any) {
59
      Alert.alert('Erro: ', error.message || 'Falha em ativar a conta');
60
    } finally {
61
      setLoading(false);
62
    }
63
  };
64
65
  const resendCode = async () => {
66
    await requestActivateCode()
67
68
    Alert.alert(
69
      "Novo código",
70
      "Enviado novo código, verifique sua caixa de entrada"
71
    );
72
  }
73
74
  return (
75
    <SafeAreaView style={[styles.container, { backgroundColor }]}>
76
      <KeyboardAvoidingView
77
        behavior='height'
78
        style={styles.keyboardView}
79
      >
80
        <ScrollView
81
          contentContainerStyle={styles.scrollContainer}
82
          showsVerticalScrollIndicator={false}
83
        >
84
          <View style={styles.header}>
85
            <Text style={[styles.title, { color: textColor }]}>Ativar a conta</Text>
86
            <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
87
              Digite o código de ativação enviado para seu email
88
            </Text>
89
          </View>
90
91
          <View style={styles.form}>
92
            <Input
93
              label="Código"
94
              type="text"
95
              value={code}
96
              onChangeText={setCode}
97
              keyboardType="number-pad"
98
              placeholder="Digite o código enviado para sua conta"
99
              error={errors.code}
100
            />
101
102
            <Button
103
              title="Ativar conta"
104
              onPress={handleActivate}
105
              loading={loading}
106
              style={styles.resetButton}
107
            />
108
          </View>
109
110
          <View style={styles.footer}>
111
            <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
112
              Não recebeu?{' '}
113
            </Text>
114
115
            <Button variant="outline" title="Reenviar um novo código" onPress={resendCode} />
116
          </View>
117
        </ScrollView>
118
      </KeyboardAvoidingView>
119
    </SafeAreaView>
120
  );
121
}
122
123
const styles = StyleSheet.create({
124
  container: {
125
    flex: 1,
126
  },
127
  keyboardView: {
128
    flex: 1,
129
  },
130
  scrollContainer: {
131
    flexGrow: 1,
132
    paddingHorizontal: 24,
133
    justifyContent: 'center',
134
    minHeight: '100%',
135
  },
136
  header: {
137
    alignItems: 'center',
138
    marginBottom: 40,
139
  },
140
  title: {
141
    fontSize: 28,
142
    fontWeight: 'bold',
143
    marginBottom: 8,
144
  },
145
  subtitle: {
146
    fontSize: 16,
147
    textAlign: 'center',
148
  },
149
  form: {
150
    marginBottom: 32,
151
  },
152
  resetButton: {
153
    marginTop: 8,
154
  },
155
  footer: {
156
    marginTop: 20,
157
    borderTopColor: Colors.light.accentBlue,
158
    borderTopWidth: 1,
159
    paddingTop: 20
160
  },
161
  footerText: {
162
    textAlign: 'center',
163
    marginBottom: 10
164
  }
165
});