diff --git a/src/assets/UI/goodVibe.png b/src/assets/UI/goodVibe.png new file mode 100644 index 0000000..112dd5d Binary files /dev/null and b/src/assets/UI/goodVibe.png differ diff --git a/src/assets/UI/homeBG.png b/src/assets/UI/homeBG.png index e4f0dd5..d2ba50c 100644 Binary files a/src/assets/UI/homeBG.png and b/src/assets/UI/homeBG.png differ diff --git a/src/assets/index.js b/src/assets/index.js index 82383e8..ee58f0f 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -233,6 +233,7 @@ import placeholder2 from "./UI/placeholder2.jpg"; import placeholder3 from "./UI/placeholder3.png"; import placeholder4 from "./UI/placeholder4.jpg"; import profile from "./UI/profile.jpg"; +import goodVibe from './UI/goodVibe.png' export const img = { placeholder, @@ -240,4 +241,5 @@ export const img = { placeholder3, placeholder4, profile, + goodVibe, }; diff --git a/src/components/AppActionSheet.js b/src/components/AppActionSheet.js index e7d3bca..499a6cb 100644 --- a/src/components/AppActionSheet.js +++ b/src/components/AppActionSheet.js @@ -1,4 +1,4 @@ -import { View, Text } from "react-native"; +import { View, Text, Platform } from "react-native"; import React from "react"; import ActionSheet from "react-native-actions-sheet"; import { gutters, Palette } from "../styles"; @@ -27,6 +27,9 @@ const AppActionSheet = ({ children, props }) => { borderTopRightRadius: 20, overflow: "hidden", }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > {children} diff --git a/src/components/BlurItemButton.js b/src/components/BlurItemButton.js index 8c17a34..3253b9b 100644 --- a/src/components/BlurItemButton.js +++ b/src/components/BlurItemButton.js @@ -1,4 +1,11 @@ -import { View, Text, Pressable, StyleSheet, Image } from "react-native"; +import { + View, + Text, + Pressable, + StyleSheet, + Image, + Platform, +} from "react-native"; import React from "react"; import { BlurView } from "expo-blur"; import { Palette, Style } from "../styles"; @@ -9,7 +16,13 @@ import { size } from "../styles/Style"; const BlurItemButton = ({ onPress, title = "" }) => { return ( - + {title} {icon && } { const [isFocused, setIsFocused] = useState(false); const [showPassword, setShowPassword] = useState(false); @@ -63,51 +66,66 @@ const Input = ({ minChars: 2, }); + const ContainerView = isBlur ? BlurView : View; + return ( <> {label?.length > 0 && ( - {label} + + {label} + )} - @@ -155,7 +173,7 @@ const Input = ({ setShowPassword(!showPassword)} - style={{ position: "absolute", right: 0 }} - > + setShowPassword(!showPassword)}> ) : null} - + {type === "autoCompleteAddress" && places?.[0]?.description && diff --git a/src/components/ItemContainer/ItemContainer.js b/src/components/ItemContainer/ItemContainer.js index e68151b..367c9e7 100644 --- a/src/components/ItemContainer/ItemContainer.js +++ b/src/components/ItemContainer/ItemContainer.js @@ -1,4 +1,4 @@ -import { View, Text, StyleSheet } from "react-native"; +import { View, Text, StyleSheet, Platform } from "react-native"; import React from "react"; import BorderGradient from "../BorderGradient/BorderGradient"; import { BlurView } from "expo-blur"; @@ -25,7 +25,14 @@ const ItemContainer = ({ }} > - + {children} diff --git a/src/components/ItemContainer/ItemContainer.web.js b/src/components/ItemContainer/ItemContainer.web.js index 86b46cf..6cbfd68 100644 --- a/src/components/ItemContainer/ItemContainer.web.js +++ b/src/components/ItemContainer/ItemContainer.web.js @@ -1,4 +1,4 @@ -import { View, Text, StyleSheet } from "react-native"; +import { View, Text, StyleSheet, Platform } from "react-native"; import React, { useState } from "react"; import BorderGradient from "../BorderGradient/BorderGradient"; import { responsiveHeight } from "react-native-responsive-dimensions"; @@ -55,6 +55,9 @@ const ItemContainer = ({ alignSelf: "center", height: "99.2%", }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > {children} diff --git a/src/components/Overlay.js b/src/components/Overlay.js index 3f274da..2f8e7fc 100644 --- a/src/components/Overlay.js +++ b/src/components/Overlay.js @@ -1,5 +1,5 @@ import React from "react"; -import { Pressable, StyleSheet } from "react-native"; +import { Platform, Pressable, StyleSheet } from "react-native"; import { AnimatePresence, Motion } from "@legendapp/motion"; import { BlurView } from "expo-blur"; import { Portal } from "@gorhom/portal"; @@ -55,6 +55,9 @@ const Overlay = ({ ...StyleSheet.absoluteFillObject, ...contentContainerStyle, }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > { return ( }> + ); } diff --git a/src/navigation/MainStack.js b/src/navigation/MainStack.js index f525ef7..fe78288 100644 --- a/src/navigation/MainStack.js +++ b/src/navigation/MainStack.js @@ -57,6 +57,9 @@ import ChangeEmailAddress from "../screens/Profile/ChangeEmailAddress"; import ChangePassword from "../screens/Profile/ChangePassword"; import Language from "../screens/Profile/Language"; import Reels from "../screens/Profile/Reels"; +import Register from "../screens/Register"; +import CreatePassword from "../screens/CreatePassword"; +import CreateName from "../screens/CreateName"; const screenOptions = { headerShown: false, @@ -267,6 +270,18 @@ const screens = [ name: Routes.Reels, component: Reels, }, + { + name: Routes.Register, + component: Register, + }, + { + name: Routes.CreatePassword, + component: CreatePassword, + }, + { + name: Routes.CreateName, + component: CreateName, + }, ]; export default function Main() { diff --git a/src/navigation/Routes.js b/src/navigation/Routes.js index 09d18f2..889f69b 100644 --- a/src/navigation/Routes.js +++ b/src/navigation/Routes.js @@ -3,6 +3,9 @@ export const Routes = { Onboarding: "Onboarding", Login: "Login", ForgotPassword: "ForgotPassword", + Register: "Register", + CreatePassword: "CreatePassword", + CreateName: "CreateName", BottomTab: "BottomTab", Welcome: "Welcome", diff --git a/src/screens/CreateName.js b/src/screens/CreateName.js new file mode 100644 index 0000000..dd6c003 --- /dev/null +++ b/src/screens/CreateName.js @@ -0,0 +1,62 @@ +import { View, Text } from "react-native"; +import React from "react"; +import Page from "../layouts/Page"; +import { background } from "../assets"; +import ItemContainer from "../components/ItemContainer/ItemContainer"; +import { Palette } from "../styles"; +import { FONT_FAMILY } from "../styles/Fonts"; +import { Input } from "../components/Input"; +import GradientButton from "../components/GradientButton"; +import { navigate } from "../navigation/NavigationService"; +import { Routes } from "../navigation"; + +const CreateName = () => { + return ( + + + + + + + + Comment t’appelles-tu? + + + Invisible pour les autres, sauf si tu l’utilises comme nom + d’artiste. + + + + + navigate(Routes.Login)} + /> + + + + + ); +}; + +export default CreateName; diff --git a/src/screens/CreatePassword.js b/src/screens/CreatePassword.js new file mode 100644 index 0000000..346a3d6 --- /dev/null +++ b/src/screens/CreatePassword.js @@ -0,0 +1,66 @@ +import { View, Text, Pressable } from "react-native"; +import React from "react"; +import Page from "../layouts/Page"; +import { background } from "../assets"; +import ItemContainer from "../components/ItemContainer/ItemContainer"; +import { Palette } from "../styles"; +import { FONT_FAMILY } from "../styles/Fonts"; +import { Input } from "../components/Input"; +import GradientButton from "../components/GradientButton"; +import { navigate } from "../navigation/NavigationService"; +import { Routes } from "../navigation"; + +const CreatePassword = () => { + return ( + + + + + + + + Choisis un mot de passe{"\n"}sécurisé + + + Utilise au moins 8 caractères pour sécuriser ton compte. + + + + + navigate(Routes.CreateName)} + /> + + + + + ); +}; + +export default CreatePassword; diff --git a/src/screens/CreateSongs.js b/src/screens/CreateSongs.js new file mode 100644 index 0000000..068220d --- /dev/null +++ b/src/screens/CreateSongs.js @@ -0,0 +1,193 @@ +import { View, Text, Image, Pressable, Platform } from "react-native"; +import React, { useState } from "react"; +import Page from "../layouts/Page"; +import { ai, background, icons } from "../assets"; +import { Palette, Style } from "../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import BorderGradient from "../components/BorderGradient/BorderGradient"; +import { BlurView } from "expo-blur"; +import { FONT_FAMILY } from "../styles/Fonts"; +import { size } from "../styles/Style"; +import GradientButton from "../components/GradientButton"; +import { goBack } from "../navigation/NavigationService"; + +const CreateSongs = () => { + const [selectedIndex, setSelectedIndex] = useState(null); + + return ( + + + + + + + + + + + + Atelier écriture + + + C'est ici que je vais t'aider à écrire ta chanson. + + + + {Array.from({ length: 3 }).map((item, index) => ( + { + console.log("Pressed"); + if (selectedIndex === index) { + setSelectedIndex(null); + } else { + setSelectedIndex(index); + } + }} + style={{ zIndex: 1 }} + > + + + + Chanson sans titre + + + Modifié le 23/04 + + + + + + + + ))} + + + + + + + + ); +}; + +export default CreateSongs; diff --git a/src/screens/HitParade/components/PlaybacksCard.js b/src/screens/HitParade/components/PlaybacksCard.js index e9fb3b7..89c1874 100644 --- a/src/screens/HitParade/components/PlaybacksCard.js +++ b/src/screens/HitParade/components/PlaybacksCard.js @@ -1,4 +1,4 @@ -import { View, Text, Image } from "react-native"; +import { View, Text, Image, Platform } from "react-native"; import React from "react"; import { BlurView } from "expo-blur"; import { img } from "../../../assets"; @@ -19,6 +19,9 @@ const PlaybacksCard = () => { backgroundColor: Palette.glass, overflow: "hidden", }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > { ...Style.containerRow, }} tint="dark" + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > { - const { setIsLoading, setTooltip } = useMinuit(); - - const documentID = "TEST_DOCUMENT_ID"; - - const [billingDetails, setBillingDetails] = useState({ - type: "INDIVIDUAL", - name: "", - address: "", - city: "", - zipCode: "", - countryCode: "", - vatNumber: "", - companyIdentifier: "", - files: [], - }); - - const { - type = "INDIVIDUAL", - name = "", - address = "", - city = "", - zipCode = "", - countryCode = "FR", - vatNumber = "", - companyIdentifier = "", - files = [], - } = billingDetails || {}; - - const updateBillingDetails = (key, value) => { - setBillingDetails({ - ...billingDetails, - [key]: value, - }); - }; - - const fieldList = [ - { - key: "name", - label: type === "COMPANY" ? "Raison sociale" : "Nom", - value: name, - inputProps: { - autoCapitalize: type === "COMPANY" ? "none" : "words", - }, - }, - { - key: "address", - label: "Adresse", - value: address, - inputProps: { - type: "autoCompleteAddress", - }, - }, - { - key: "city", - label: "Ville", - value: city, - }, - { - key: "zipCode", - label: "Code postal", - value: zipCode, - inputProps: { - isNumeric: true, - }, - }, - { - key: "countryCode", - label: "Pays", - value: countryCode, - type: "countryPicker", - }, - { - key: "vatNumber", - label: "Numéro de TVA intracommunautaire (facultatif)", - value: vatNumber, - condition: type === "COMPANY", - required: false, - }, - { - key: "companyIdentifier", - label: "Numéro SIRET", - value: companyIdentifier, - condition: type === "COMPANY", - }, - ].filter(({ condition = true }) => condition); - - const onSubmit = async () => { - try { - setIsLoading(true); - - let cleanObject = {}; - - fieldList.forEach(({ key, value, label, required = true }) => { - if (value) { - cleanObject[key] = value; - } else if (required) { - throw new Error(`Le champ ${label.toLowerCase()} est obligatoire`); - } - }); - - await documentsRef.doc(documentID).set( - { - ...cleanObject, - }, - { - merge: true, - } - ); - - setTooltip({ - type: "sucess", - text: "Document publié!", - }); - } catch (error) { - setTooltip({ - type: "error", - text: error.message, - }); - } finally { - setIsLoading(false); - } - }; + { + img: ai.bena, + bg: background.productionBG, + label: "Bena", + desc: "Come back when you want\nto publish the song!", + type: "Producer", + }, + { + img: ai.john, + bg: background.playbackBG, + label: "John", + desc: "Come back when your\naudio is ready!", + type: "Director", + }, +]; +const Home = () => { return ( - + + + + + + {CREATE_DATA.map((item, index) => ( + + navigate(Routes.Create, { + action: item.type, + }) + } + > + + + {item.label}, {item.type} + + + {item.desc} + + + + + + ))} + + + ); }; + +export default Home; diff --git a/src/screens/Library/AllMyLikedMusic.js b/src/screens/Library/AllMyLikedMusic.js index b7b6a90..2c69f56 100644 --- a/src/screens/Library/AllMyLikedMusic.js +++ b/src/screens/Library/AllMyLikedMusic.js @@ -1,4 +1,4 @@ -import { View, Text, Pressable } from "react-native"; +import { View, Text, Pressable, Platform } from "react-native"; import React, { useState } from "react"; import Page from "../../layouts/Page"; import { background } from "../../assets"; @@ -68,6 +68,9 @@ const AllMyLikedMusic = () => { borderRadius: 12, overflow: "hidden", }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > { height: 59, paddingHorizontal: 10, }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > { ...Style.containerSpaceBetween, paddingHorizontal: 8, }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > Alors on danse diff --git a/src/screens/Library/components/MyPlaylist.js b/src/screens/Library/components/MyPlaylist.js index e2e73ee..c1bc8df 100644 --- a/src/screens/Library/components/MyPlaylist.js +++ b/src/screens/Library/components/MyPlaylist.js @@ -1,4 +1,4 @@ -import { View, Text, Pressable, Image } from "react-native"; +import { View, Text, Pressable, Image, Platform } from "react-native"; import React from "react"; import CardContainer from "./CardContainer"; import { BlurView } from "expo-blur"; @@ -25,6 +25,9 @@ const MyPlaylist = () => { height: 59, paddingHorizontal: 10, }} + experimentalBlurMethod={ + Platform.OS !== "ios" ? "dimezisBlurView" : "none" + } > { style={styles.borderGradient} /> - + {item} diff --git a/src/screens/Login.js b/src/screens/Login.js index d0343a4..c760260 100644 --- a/src/screens/Login.js +++ b/src/screens/Login.js @@ -1,345 +1,121 @@ -import React, { useState, useRef, useEffect, useGlobal } from "reactn"; -import { - Text, - View, - KeyboardAvoidingView, - Image, - Pressable, -} from "react-native"; -import AsyncStorage from "@react-native-async-storage/async-storage"; +/* eslint-disable react/display-name */ +import React from "reactn"; +import { Pressable, Text, View } from "react-native"; -import { - responsiveHeight, - responsiveWidth, -} from "../actions/responsiveSizes.js"; - -import firebase from "../config/firebase"; - -import Button from "../components/Button"; -import { Input } from "../components/Input"; - -import { Fonts, gutters, Palette, Style } from "../styles"; -import { Routes } from "../navigation"; -import { art, mockups } from "../assets"; -import { - checkIfEmailIsValid, - checkIfPasswordIsStrongEnough, - handleFirebaseError, -} from "../actions/signupActions"; - -import useLayoutType from "../hooks/useLayoutType.js"; -import { capitalize } from "../helpers/index.js"; +import Page from "../layouts/Page.js"; +import { background } from "../assets/index.js"; +import { Input } from "../components/Input.js"; +import GradientButton from "../components/GradientButton.js"; +import Palette from "../styles/Palette.js"; +import { FONT_FAMILY } from "../styles/Fonts.js"; import { navigate } from "../navigation/NavigationService.js"; +import { Routes } from "../navigation/Routes.js"; +import ItemContainer from "../components/ItemContainer/ItemContainer.js"; export default ({ navigation }) => { - console.log("LOGINSCREEN"); - const [, setTooltip] = useGlobal("_tooltip"); - const [, setIsLoading] = useGlobal("_isLoading"); - - const [mode, setMode] = useState("LOGIN"); - - const [emailIsStatic, setEmailIsStatic] = useState(false); - - const [email, setEmail] = useState("login@minuit.com"); - const [password, setPassword] = useState("password"); - - const [firstName, setFirstName] = useState(""); - const [lastName, setLastName] = useState(""); - - const passwordInputRef = useRef(); - - const { isDesktop } = useLayoutType(); - - useEffect(() => { - const checkIfUserIsLoggedIn = async () => { - const userEmail = await AsyncStorage.getItem("userEmail"); - - if (userEmail) { - setEmail(userEmail); - setEmailIsStatic(true); - } - }; - - checkIfUserIsLoggedIn(); - }, []); - - const onLogin = async () => { - try { - setIsLoading(true); - - let trimmedEmail = email.trim(); - - await firebase.auth().signInWithEmailAndPassword(trimmedEmail, password); - await AsyncStorage.setItem("userEmail", trimmedEmail); - - onAuthSuccess(); - } catch (error) { - console.log(error); - setTooltip({ - text: handleFirebaseError(error.code), - type: "error", - }); - } finally { - setIsLoading(false); - } - }; - - const onSignup = async () => { - try { - setIsLoading(true); - - if (!checkIfPasswordIsStrongEnough({ password })) { - throw new Error( - "Votre mot de passe doit contenir au moins 6 caractères, une majuscule et un chiffre." - ); - } - - if (!checkIfEmailIsValid({ email })) { - throw new Error("Veuillez renseigner une adresse email valide."); - } - - const { user = null } = await firebase - .auth() - .createUserWithEmailAndPassword(email, password); - - if (!user) { - throw new Error("Erreur lors de la création du compte"); - } - - let userObject = { - firstName: capitalize(firstName.trim()), - lastName: capitalize(lastName.trim()), - }; - - // push user data to firestore - - onAuthSuccess(); - - setTooltip({ - text: "Votre compte a été créé avec succès!", - type: "success", - }); - } catch (error) { - console.log(error); - setTooltip({ - text: error?.code?.startsWith("auth/") - ? handleFirebaseError(error.code) - : error.message, - type: "error", - }); - } finally { - setIsLoading(false); - } - }; - - const onAuthSuccess = async () => { - navigation.reset({ - index: 0, - routes: [{ name: Routes.Splash }], - }); - }; - return ( - - - - - - - minuit.starter - - - {emailIsStatic && mode === "LOGIN" ? ( - <> + + + + - {`Vous êtes connecté(e) avec l'adresse ${email},`} + Bonjour, pseudo! - - { - await AsyncStorage.removeItem("userEmail"); - - setEmailIsStatic(false); + + Nous sommes heureux de te revoir parmi nous. Prêt·e à reprendre + le rythme ? + + + + + + + + + Mot de passe oublié? + + + + + navigate(Routes.BottomTab)} + /> + + + En t’inscrivant, tu acceptes nos conditions générales{"\n"} + d’utilisation et notre politique de confidentialité. + + navigate(Routes.Register)}> - Modifier + Tu as déjà un compte?{" "} + + Se connecter + - - ) : ( - passwordInputRef.current.focus(), - }} - /> - )} - - - - {mode === "LOGIN" ? ( - navigation.navigate("ForgotPassword")} - style={{ marginBottom: gutters }} - > - - Mot de passe oublié? - - - ) : ( - <> - - - - - )} - -