├── src ├── @types │ ├── png.d.ts │ └── svg.d.ts ├── assets │ ├── header.png │ └── illustration.svg ├── styles │ └── theme.ts ├── components │ ├── Avatar │ │ ├── index.tsx │ │ └── styles.ts │ ├── Button │ │ ├── styles.ts │ │ └── index.tsx │ ├── ProfileHeader │ │ ├── index.tsx │ │ └── styles.ts │ └── SignInContent │ │ ├── styles.ts │ │ └── index.tsx ├── screens │ ├── SignIn │ │ ├── styles.ts │ │ └── index.tsx │ └── Profile │ │ ├── styles.ts │ │ └── index.tsx └── routes │ └── index.tsx ├── assets ├── icon.png ├── favicon.png ├── splash.png └── adaptive-icon.png ├── tsconfig.json ├── babel.config.js ├── .gitignore ├── .expo-shared └── assets.json ├── metro.config.js ├── app.json ├── App.tsx └── package.json /src/@types/png.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.png"; 2 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orodrigogo/oauth2app/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orodrigogo/oauth2app/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orodrigogo/oauth2app/HEAD/assets/splash.png -------------------------------------------------------------------------------- /src/assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orodrigogo/oauth2app/HEAD/src/assets/header.png -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/orodrigogo/oauth2app/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /src/@types/svg.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" { 2 | import React from 'react'; 3 | import { SvgProps } from 'react-native-svg' 4 | const content: React.FC; 5 | export default content; 6 | } -------------------------------------------------------------------------------- /src/styles/theme.ts: -------------------------------------------------------------------------------- 1 | export const theme = { 2 | colors: { 3 | background: '#1C1D26', 4 | primary: '#7350F2', 5 | secondary: '#F24182', 6 | text: '#FFFFFF', 7 | shape: '#252836', 8 | note: '#4E4E5D' 9 | }, 10 | 11 | fonts: { 12 | regular: 'Inter_400Regular', 13 | medium: 'Inter_500Medium', 14 | bold: 'Inter_700Bold' 15 | } 16 | } -------------------------------------------------------------------------------- /src/components/Avatar/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Image, ImageProps } from 'react-native'; 3 | 4 | import { styles } from './styles'; 5 | 6 | export function Avatar({ ...rest }: ImageProps) { 7 | return ( 8 | 9 | 14 | 15 | ); 16 | } -------------------------------------------------------------------------------- /src/screens/SignIn/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { theme } from '../../styles/theme'; 3 | import { getBottomSpace } from 'react-native-iphone-x-helper'; 4 | 5 | export const styles = StyleSheet.create({ 6 | container: { 7 | flex: 1, 8 | justifyContent: 'space-around', 9 | alignItems: 'center', 10 | backgroundColor: theme.colors.background, 11 | paddingHorizontal: 24, 12 | paddingVertical: getBottomSpace() + 20 13 | } 14 | }); -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | const { getDefaultConfig } = require("expo/metro-config"); 2 | 3 | module.exports = (async () => { 4 | const { 5 | resolver: { sourceExts, assetExts } 6 | } = await getDefaultConfig(__dirname); 7 | return { 8 | transformer: { 9 | babelTransformerPath: require.resolve("react-native-svg-transformer") 10 | }, 11 | resolver: { 12 | assetExts: assetExts.filter(ext => ext !== "svg"), 13 | sourceExts: [...sourceExts, "svg"] 14 | } 15 | }; 16 | })(); -------------------------------------------------------------------------------- /src/components/Avatar/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { theme } from '../../styles/theme'; 3 | 4 | export const styles = StyleSheet.create({ 5 | container: { 6 | width: 150, 7 | height: 150, 8 | backgroundColor: theme.colors.shape, 9 | borderRadius: 30, 10 | justifyContent: 'center', 11 | alignItems: 'center' 12 | }, 13 | image: { 14 | width: 130, 15 | height: 130, 16 | borderRadius: 25, 17 | borderWidth: 7, 18 | borderColor: theme.colors.secondary 19 | }, 20 | }); -------------------------------------------------------------------------------- /src/components/Button/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { theme } from '../../styles/theme'; 3 | 4 | export const styles = StyleSheet.create({ 5 | container: { 6 | width: '100%', 7 | flexDirection: 'row', 8 | alignItems: 'center', 9 | justifyContent: 'center', 10 | backgroundColor: theme.colors.shape, 11 | paddingVertical: 16, 12 | borderRadius: 10, 13 | }, 14 | text: { 15 | color: theme.colors.secondary, 16 | fontSize: 18, 17 | marginLeft: 12, 18 | fontFamily: theme.fonts.bold 19 | } 20 | }); -------------------------------------------------------------------------------- /src/components/ProfileHeader/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, Image } from 'react-native'; 3 | 4 | import { styles } from './styles'; 5 | import headerImg from '../../assets/header.png'; 6 | 7 | export function ProfileHeader() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | Perfil 15 | dados da sua conta Google 16 | 17 | 18 | 19 | ); 20 | } -------------------------------------------------------------------------------- /src/components/SignInContent/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { theme } from '../../styles/theme'; 3 | 4 | export const styles = StyleSheet.create({ 5 | container: { 6 | width: '100%', 7 | alignItems: 'center' 8 | }, 9 | content: { 10 | width: '100%', 11 | marginTop: 24 12 | }, 13 | title: { 14 | color: theme.colors.secondary, 15 | fontFamily: theme.fonts.bold, 16 | fontSize: 32, 17 | }, 18 | subtitle: { 19 | fontFamily: theme.fonts.regular, 20 | color: theme.colors.text, 21 | fontSize: 15, 22 | }, 23 | description: { 24 | fontFamily: theme.fonts.regular, 25 | color: theme.colors.note, 26 | textAlign: 'justify', 27 | marginTop: 24, 28 | } 29 | }); -------------------------------------------------------------------------------- /src/routes/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createStackNavigator } from '@react-navigation/stack'; 3 | import { NavigationContainer } from '@react-navigation/native'; 4 | 5 | import { Profile } from '../screens/Profile'; 6 | import { SignIn } from '../screens/SignIn'; 7 | import { theme } from '../styles/theme'; 8 | 9 | const { Navigator, Screen } = createStackNavigator(); 10 | 11 | export function Routes() { 12 | return ( 13 | 14 | 15 | 19 | 23 | 24 | 25 | ) 26 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "oauth2app", 4 | "slug": "oauth2app", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, TouchableOpacity, TouchableOpacityProps } from 'react-native'; 3 | import { SimpleLineIcons } from '@expo/vector-icons'; 4 | 5 | import { styles } from './styles'; 6 | import { theme } from '../../styles/theme'; 7 | 8 | type Props = TouchableOpacityProps & { 9 | title: string; 10 | icon: React.ComponentProps['name']; 11 | } 12 | 13 | export function Button({ title, icon, ...rest }: Props) { 14 | return ( 15 | 16 | 21 | 22 | 23 | {title} 24 | 25 | 26 | ); 27 | } -------------------------------------------------------------------------------- /src/screens/SignIn/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-native'; 3 | import { useNavigation } from '@react-navigation/native'; 4 | 5 | import { Button } from '../../components/Button'; 6 | import { SignInContent } from '../../components/SignInContent'; 7 | 8 | import { styles } from './styles'; 9 | 10 | type AuthResponse = { 11 | type: string; 12 | params: { 13 | access_token: string; 14 | } 15 | } 16 | 17 | export function SignIn() { 18 | const navigation = useNavigation(); 19 | 20 | async function handleSignIn() { 21 | navigation.navigate('Profile'); 22 | } 23 | 24 | return ( 25 | 26 | 27 | 28 |