@xouteiro/auth_npm 1.0.13 → 1.0.15

package/src/components/LogoutButton.jsx

@@ -1,64 +1,78 @@
 import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { logout } from '../logout';
 
-const boxStyle = {
-  maxWidth: 350,
-  margin: '24px auto',
-  padding: 20,
-  borderRadius: 10,
-  boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
-  background: '#fff',
-  fontFamily: 'sans-serif',
-  textAlign: 'center',
-};
-
-const buttonStyle = {
-  padding: '10px 28px',
-  borderRadius: 6,
-  border: 'none',
-  background: '#0070f3',
-  color: '#fff',
-  fontWeight: 600,
-  fontSize: 16,
-  cursor: 'pointer',
-};
-
-const messageStyle = (success) => ({
-  margin: '12px 0',
-  color: success ? '#0a0' : '#d32f2f',
-  background: success ? '#eafbe7' : '#fdeaea',
-  padding: 8,
-  borderRadius: 6,
-  textAlign: 'center',
-  fontSize: 15,
-});
-
 export default function LogoutButton({ onLogout }) {
-    const [message, setMessage] = useState(null);
-    const [success, setSuccess] = useState(false);
-  
-    const handleLogout = async () => {
-      setMessage(null);
+  const [message, setMessage] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleLogout = async () => {
+    setMessage(null);
+    setSuccess(false);
+    const { error } = await logout();
+    if (error) {
+      setMessage(error.message || 'Logout failed');
       setSuccess(false);
-      const { error } = await logout();
-      if (error) {
-        setMessage(error.message || 'Logout failed');
+    } else {
+      setMessage('Logout successful!');
+      setSuccess(true);
+      setTimeout(() => {
+        setMessage(null);
         setSuccess(false);
-      } else {
-        setMessage('Logout successful!');
-        setSuccess(true);
-        setTimeout(() => {
-          setMessage(null);
-          setSuccess(false);
-          if (onLogout) onLogout(); // Call the callback after logout
-        }, 1500);
-      }
-    };
-  
-    return (
-      <div style={boxStyle}>
-        <button style={buttonStyle} onClick={handleLogout}>Logout</button>
-        {message && <div style={messageStyle(success)}>{message}</div>}
-      </div>
-    );
-  }
+        if (onLogout) onLogout();
+      }, 1500);
+    }
+  };
+
+  return (
+    <View style={styles.box}>
+      <TouchableOpacity style={styles.button} onPress={handleLogout}>
+        <Text style={styles.buttonText}>Logout</Text>
+      </TouchableOpacity>
+      {message && (
+        <View style={[styles.message, success ? styles.success : styles.error]}>
+          <Text style={styles.messageText}>{message}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    maxWidth: 350,
+    marginVertical: 24,
+    padding: 20,
+    borderRadius: 10,
+    backgroundColor: '#fff',
+    alignSelf: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 28,
+    borderRadius: 6,
+    backgroundColor: '#0070f3',
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  message: {
+    marginTop: 12,
+    padding: 8,
+    borderRadius: 6,
+  },
+  success: {
+    backgroundColor: '#eafbe7',
+  },
+  error: {
+    backgroundColor: '#fdeaea',
+  },
+  messageText: {
+    fontSize: 15,
+    textAlign: 'center',
+    color: '#333',
+  },
+});