Skip to content

Commit 91d157a

Browse files
hiteshchoudharyhiteshchoudhary
committed
formik work done
1 parent 13724e9 commit 91d157a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+17358
-0
lines changed

‎.DS_Store‎

2 KB
Binary file not shown.

‎passwordGenerator03/.bundle/config‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎passwordGenerator03/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

‎passwordGenerator03/.gitignore‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
ios/.xcode.env.local
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
*.hprof
33+
.cxx/
34+
*.keystore
35+
!debug.keystore
36+
37+
# node.js
38+
#
39+
node_modules/
40+
npm-debug.log
41+
yarn-error.log
42+
43+
# fastlane
44+
#
45+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
46+
# screenshots whenever they are needed.
47+
# For more information about the recommended setup visit:
48+
# https://docs.fastlane.tools/best-practices/source-control/
49+
50+
**/fastlane/report.xml
51+
**/fastlane/Preview.html
52+
**/fastlane/screenshots
53+
**/fastlane/test_output
54+
55+
# Bundle artifact
56+
*.jsbundle
57+
58+
# Ruby / CocoaPods
59+
/ios/Pods/
60+
/vendor/bundle/
61+
62+
# Temporary files created by Metro to check the health of the file watcher
63+
.metro-health-check*

‎passwordGenerator03/.node-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18

‎passwordGenerator03/.prettierrc.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
arrowParens: 'avoid',
3+
bracketSameLine: true,
4+
bracketSpacing: false,
5+
singleQuote: true,
6+
trailingComma: 'all',
7+
};

‎passwordGenerator03/.ruby-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
2.7.6

‎passwordGenerator03/.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎passwordGenerator03/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎passwordGenerator03/App.tsx‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
import { SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
2+
import React, { useState } from 'react'
3+
import BouncyCheckbox from "react-native-bouncy-checkbox";
4+
5+
6+
// Form validation
7+
import * as Yup from 'yup'
8+
import { Formik } from 'formik';
9+
// YOUTUBE:
10+
const PasswordSchema = Yup.object().shape({
11+
passwordLength: Yup.number()
12+
.min(4, 'Should be min of 4 characters')
13+
.max(16, 'Should be max of 16 characters')
14+
.required('Length is required')
15+
16+
})
17+
export default function App() {
18+
19+
const [password, setPassword] = useState('')
20+
const [isPassGenerated, setIsPassGenerated] = useState(false)
21+
22+
const [lowerCase, setLowerCase] = useState(true)
23+
const [upperCase, setupperCase] = useState(false)
24+
const [numbers, setNumbers] = useState(false)
25+
const [symbols, setSymbols] = useState(false)
26+
27+
const generatePasswordString = (passwordLength: number) => {
28+
let characterList = '';
29+
30+
const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
31+
const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';
32+
const digitChars = '0123456789';
33+
const specialChars = '!@#$%^&*()_+';
34+
35+
if (upperCase) {
36+
characterList += upperCaseChars
37+
}
38+
if (lowerCase) {
39+
characterList += lowerCaseChars
40+
}
41+
if (numbers) {
42+
characterList += digitChars
43+
}
44+
if (symbols) {
45+
characterList += specialChars
46+
}
47+
48+
const passwordResult = createPassword(characterList, passwordLength )
49+
50+
setPassword(passwordResult)
51+
setIsPassGenerated(true)
52+
53+
}
54+
55+
const createPassword = (characters: string, passwordLength: number) => {
56+
let result = ''
57+
for (let i = 0; i < passwordLength; i++) {
58+
const characterIndex = Math.round(Math.random() * characters.length)
59+
result += characters.charAt(characterIndex)
60+
}
61+
return result
62+
console.log("hitesh");
63+
64+
}
65+
66+
const resetPasswordState = () => {
67+
setPassword('')
68+
setIsPassGenerated(false)
69+
setLowerCase(true)
70+
setupperCase(false)
71+
setNumbers(false)
72+
setSymbols(false)
73+
74+
75+
}
76+
77+
return (
78+
<ScrollView>
79+
<SafeAreaView style={styles.appContainer}>
80+
<View style={styles.formContainer}>
81+
<Text style={styles.title}>Password Generator</Text>
82+
<Formik
83+
initialValues={{ passwordLength: '' }}
84+
validationSchema={PasswordSchema}
85+
onSubmit={values => {
86+
//console.log(values);
87+
88+
generatePasswordString(+values.passwordLength)
89+
}}
90+
>
91+
{({
92+
values,
93+
errors,
94+
touched,
95+
isValid,
96+
handleChange,
97+
handleSubmit,
98+
handleReset,
99+
/* and other goodies */
100+
}) => (
101+
<>
102+
<View style={styles.inputWrapper}>
103+
<View style={styles.inputColumn}>
104+
<Text style={styles.heading}>Password Length</Text>
105+
{touched.passwordLength && errors.passwordLength && (
106+
<Text style={styles.errorText}>
107+
{errors.passwordLength}
108+
</Text>
109+
)}
110+
</View>
111+
<TextInput
112+
style={styles.inputStyle}
113+
value={values.passwordLength}
114+
onChangeText={handleChange('passwordLength')}
115+
placeholder="EX. 8"
116+
keyboardType='numeric'
117+
/>
118+
</View>
119+
<View style={styles.inputWrapper}>
120+
<Text style={styles.heading}>Include lowerCase</Text>
121+
<BouncyCheckbox
122+
disableBuiltInState
123+
isChecked={lowerCase}
124+
onPress={() => setLowerCase(!lowerCase) }
125+
fillColor="#29AB87"
126+
/>
127+
</View>
128+
<View style={styles.inputWrapper}>
129+
<Text style={styles.heading}>Include Uppercase letters</Text>
130+
<BouncyCheckbox
131+
disableBuiltInState
132+
isChecked={upperCase}
133+
onPress={() => setupperCase(!upperCase)}
134+
fillColor="#FED85D"
135+
/>
136+
</View>
137+
<View style={styles.inputWrapper}>
138+
<Text style={styles.heading}>Include Numbers</Text>
139+
<BouncyCheckbox
140+
disableBuiltInState
141+
isChecked={numbers}
142+
onPress={() => setNumbers(!numbers)}
143+
fillColor="#C9A0DC"
144+
/>
145+
</View>
146+
<View style={styles.inputWrapper}>
147+
<Text style={styles.heading}>Include Symbols</Text>
148+
<BouncyCheckbox
149+
disableBuiltInState
150+
isChecked={symbols}
151+
onPress={() => setSymbols(!symbols)}
152+
fillColor="#FC80A5"
153+
/>
154+
</View>
155+
156+
<View style={styles.formActions}>
157+
<TouchableOpacity
158+
disabled={!isValid}
159+
style={styles.primaryBtn}
160+
onPress={handleSubmit}
161+
>
162+
<Text style={styles.primaryBtnTxt}>Generate</Text>
163+
</TouchableOpacity>
164+
<TouchableOpacity
165+
166+
style={styles.secondaryBtn}
167+
onPress={() => {
168+
handleReset()
169+
resetPasswordState()
170+
}}>
171+
<Text style={styles.secondaryBtnTxt}>Reset</Text>
172+
173+
</TouchableOpacity>
174+
</View>
175+
</>
176+
)}
177+
</Formik>
178+
</View>
179+
180+
{isPassGenerated ? (
181+
<View style={[styles.card, styles.cardElevated]}>
182+
<Text style={styles.description}>Result</Text>
183+
<Text selectable={true} style={styles.generatedPassword}>{password}</Text>
184+
</View>
185+
): null}
186+
</SafeAreaView>
187+
</ScrollView>
188+
)
189+
}
190+
191+
const styles = StyleSheet.create({
192+
appContainer: {
193+
flex: 1,
194+
},
195+
formContainer: {
196+
margin: 8,
197+
padding: 8,
198+
},
199+
title: {
200+
fontSize: 32,
201+
fontWeight: '600',
202+
marginBottom: 15,
203+
},
204+
subTitle: {
205+
fontSize: 26,
206+
fontWeight: '600',
207+
marginBottom: 2,
208+
},
209+
description: {
210+
color: '#758283',
211+
marginBottom: 8,
212+
},
213+
heading: {
214+
fontSize: 15,
215+
},
216+
inputWrapper: {
217+
marginBottom: 15,
218+
alignItems: 'center',
219+
justifyContent: 'space-between',
220+
flexDirection: 'row',
221+
},
222+
inputColumn: {
223+
flexDirection: 'column',
224+
},
225+
inputStyle: {
226+
padding: 8,
227+
width: '30%',
228+
borderWidth: 1,
229+
borderRadius: 4,
230+
borderColor: '#16213e',
231+
},
232+
errorText: {
233+
fontSize: 12,
234+
color: '#ff0d10',
235+
},
236+
formActions: {
237+
flexDirection: 'row',
238+
justifyContent: 'center',
239+
},
240+
primaryBtn: {
241+
width: 120,
242+
padding: 10,
243+
borderRadius: 8,
244+
marginHorizontal: 8,
245+
backgroundColor: '#5DA3FA',
246+
},
247+
primaryBtnTxt: {
248+
color: '#fff',
249+
textAlign: 'center',
250+
fontWeight: '700',
251+
},
252+
secondaryBtn: {
253+
width: 120,
254+
padding: 10,
255+
borderRadius: 8,
256+
marginHorizontal: 8,
257+
backgroundColor: '#CAD5E2',
258+
},
259+
secondaryBtnTxt: {
260+
textAlign: 'center',
261+
},
262+
card: {
263+
padding: 12,
264+
borderRadius: 6,
265+
marginHorizontal: 12,
266+
},
267+
cardElevated: {
268+
backgroundColor: '#ffffff',
269+
elevation: 1,
270+
shadowOffset: {
271+
width: 1,
272+
height: 1,
273+
},
274+
shadowColor: '#333',
275+
shadowOpacity: 0.2,
276+
shadowRadius: 2,
277+
},
278+
generatedPassword: {
279+
fontSize: 22,
280+
textAlign: 'center',
281+
marginBottom: 12,
282+
color:'#000'
283+
},
284+
});

0 commit comments

Comments
 (0)