From d44be3cd473a44f04656781cd97e55237b144db7 Mon Sep 17 00:00:00 2001 From: StarAppeal Date: Sat, 7 Dec 2024 04:58:59 +0100 Subject: [PATCH] add simple buttons for settings --- App.tsx | 5 +- app/(tabs)/_layout.tsx | 4 +- app/(tabs)/settings.tsx | 24 ++++++- package-lock.json | 24 +++++++ package.json | 1 + src/components/ChangePasswordModal.tsx | 88 ++++++++++++++++++++++++++ src/components/SpotifyAuthButton.tsx | 5 +- src/hooks/useSpotifyAuth.ts | 5 +- 8 files changed, 145 insertions(+), 11 deletions(-) create mode 100644 src/components/ChangePasswordModal.tsx diff --git a/App.tsx b/App.tsx index 3b02530..533b345 100644 --- a/App.tsx +++ b/App.tsx @@ -1,8 +1,7 @@ import React from "react"; -import { Slot } from "expo-router"; - +import {Slot} from "expo-router"; export default function App() { - return ; + return ; } diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index ad2a869..359a235 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -85,7 +85,5 @@ export default function TabLayout() { /> - - ) - ; + ); } diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx index 33afb43..32b7535 100644 --- a/app/(tabs)/settings.tsx +++ b/app/(tabs)/settings.tsx @@ -1,13 +1,35 @@ import ThemedHeader from "@/src/components/themed/ThemedHeader"; -import React from "react"; +import React, {useState} from "react"; import ThemedBackground from "@/src/components/themed/ThemedBackground"; +import ChangePasswordModal from "@/src/components/ChangePasswordModal"; +import ThemeToggleButton from "@/src/components/ThemeToggleButton"; +import SpotifyAuthButton from "@/src/components/SpotifyAuthButton"; +import {Token} from "@/src/services/RestService"; +import {Text} from 'react-native-paper'; + +import * as WebBrowser from "expo-web-browser"; +import {useAuth} from "@/src/context/AuthProvider"; + +WebBrowser.maybeCompleteAuthSession(); export default function SettingsScreen() { + const {token: jwtToken} = useAuth(); + const [token, setToken] = useState(null); + + const handleAuthSuccess = (token: Token) => { + setToken(token); + console.log('Erhaltener Authentifizierungscode:', token); + }; + return ( Settings + + + + {token && Erhaltener Code: {token.access_token}} ); } diff --git a/package-lock.json b/package-lock.json index fd02e15..2e603f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "react-dom": "18.3.1", "react-native": "0.76.3", "react-native-gesture-handler": "~2.21.2", + "react-native-modal": "^13.0.1", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.16.3", "react-native-status-bar-height": "^2.6.0", @@ -15320,6 +15321,15 @@ } } }, + "node_modules/react-native-animatable": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz", + "integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + } + }, "node_modules/react-native-gesture-handler": { "version": "2.21.2", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.21.2.tgz", @@ -15360,6 +15370,20 @@ "react-native": ">=0.73.0" } }, + "node_modules/react-native-modal": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-13.0.1.tgz", + "integrity": "sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.6.2", + "react-native-animatable": "1.3.3" + }, + "peerDependencies": { + "react": "*", + "react-native": ">=0.65.0" + } + }, "node_modules/react-native-paper": { "version": "5.12.5", "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.5.tgz", diff --git a/package.json b/package.json index 39dd6ed..f6879af 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "react-dom": "18.3.1", "react-native": "0.76.3", "react-native-gesture-handler": "~2.21.2", + "react-native-modal": "^13.0.1", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.16.3", "react-native-status-bar-height": "^2.6.0", diff --git a/src/components/ChangePasswordModal.tsx b/src/components/ChangePasswordModal.tsx new file mode 100644 index 0000000..a7e8a8f --- /dev/null +++ b/src/components/ChangePasswordModal.tsx @@ -0,0 +1,88 @@ +import React, {useState} from "react"; +import {Paragraph, Button} from "react-native-paper"; +import ThemedTextInput from "@/src/components/themed/ThemedTextInput"; +import {useTheme} from "@/src/context/ThemeProvider"; +import Modal from "react-native-modal"; +import {View, StyleSheet} from "react-native"; + +export default function ChangePasswordModal() { + const {theme} = useTheme(); + const [isVisible, setIsVisible] = useState(false); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [error, setError] = useState<{ message: string } | null>(null); + + const handleConfirm = () => { + if (password !== confirmPassword) { + setError({message: "Passwörter stimmen nicht überein!"}); + return; + } + console.log("Passwort erfolgreich geändert!"); + + }; + const resetModal = () => { + setIsVisible(false); + setError(null); + setPassword(""); + setConfirmPassword(""); + } + + return ( + <> + + + + Passwort ändern + {error && ( + + {error.message} + + )} + + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + modalContent: { + padding: 16, + borderRadius: 8, + }, + errorBox: { + marginBottom: 8, + marginTop: 8, + padding: 8, + }, + buttonGroup: { + flexDirection: "row", + justifyContent: "space-between", + marginTop: 16, + }, +}); diff --git a/src/components/SpotifyAuthButton.tsx b/src/components/SpotifyAuthButton.tsx index d09c209..5bf7488 100644 --- a/src/components/SpotifyAuthButton.tsx +++ b/src/components/SpotifyAuthButton.tsx @@ -5,10 +5,11 @@ import ThemedButton from "@/src/components/themed/ThemedButton"; interface SpotifyAuthButtonProps { onAuthSuccess: (token: Token) => void; + jwtToken: string; } -const SpotifyAuthButton = ({onAuthSuccess}: SpotifyAuthButtonProps) => { - const {promptAuth, isReady, error} = useSpotifyAuth(onAuthSuccess); +const SpotifyAuthButton = ({onAuthSuccess, jwtToken}: SpotifyAuthButtonProps) => { + const {promptAuth, isReady, error} = useSpotifyAuth(onAuthSuccess, jwtToken); if (error) { console.error('Spotify Auth Error:', error); diff --git a/src/hooks/useSpotifyAuth.ts b/src/hooks/useSpotifyAuth.ts index d0a7a5e..3109938 100644 --- a/src/hooks/useSpotifyAuth.ts +++ b/src/hooks/useSpotifyAuth.ts @@ -14,7 +14,8 @@ interface UseSpotifyAuthResult { } export const useSpotifyAuth = ( - onAuthSuccess: (token: Token) => void + onAuthSuccess: (token: Token) => void, + jwtToken: string, ): UseSpotifyAuthResult => { const [request, response, promptAsync] = useAuthRequest( { @@ -34,7 +35,7 @@ export const useSpotifyAuth = ( if (response?.type === 'success') { try { const {code} = response.params; - const token = (await RestService.exchangeSpotifyCodeForToken(code,"TODO")).token; + const token = (await RestService.exchangeSpotifyCodeForToken(code,jwtToken)).token; console.log('Token:', token); onAuthSuccess(token); } catch (error) {