Skip to content

Commit

Permalink
[auth] style password complexity on sign in (#39)
Browse files Browse the repository at this point in the history
* [auth] style password complexity on sign in

* updated colors for password complexity on sign in

* fixed stylesheet issue, styling password complexity on sign in

* changed icon/grey in password complexity styling

* delete commented out view

---------

Co-authored-by: Akshay Thakur <akshaythakur@berkeley.edu>
Co-authored-by: Akshay Thakur <78326649+akshaynthakur@users.noreply.github.com>
  • Loading branch information
3 people authored Nov 26, 2023
1 parent 63a41f6 commit 72a750d
Showing 10 changed files with 260 additions and 8 deletions.
5 changes: 5 additions & 0 deletions assets/Frame 88.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/bx_x.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions assets/formkit_hidden.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 92 additions & 2 deletions assets/icons.tsx
Original file line number Diff line number Diff line change
@@ -6,8 +6,12 @@ export type IconType =
| 'home_outline'
| 'document_outline'
| 'search_outline'
| 'settings_gear'
| 'close_modal_button';
| 'close_modal_button'
| 'red_x'
| 'green_check'
| 'hide_password'
| 'grey_dot'
| 'settings_gear';

const IconSvgs: Record<IconType, React.ReactElement> = {
home_outline: <Ionicons name="home-outline" size={23} />,
@@ -33,6 +37,92 @@ const IconSvgs: Record<IconType, React.ReactElement> = {
</svg>`}
/>
),
red_x: (
<SvgXml
xml={`<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="bx:x">
<path
id="Vector"
d="M12.144 4.75806L8.96173 7.93956L5.78023 4.75806L4.71973 5.81856L7.90123 9.00006L4.71973 12.1816L5.78023 13.2421L8.96173 10.0606L12.144 13.2421L13.2045 12.1816L10.023 9.00006L13.2045 5.81856L12.144 4.75806Z"
fill="#EB563B"
/>
</g>
</svg>`}
/>
),
green_check: (
<SvgXml
xml={`<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="material-symbols:check">
<path
id="Vector"
d="M7.16245 13.5L2.88745 9.22495L3.9562 8.1562L7.16245 11.3625L14.0437 4.4812L15.1125 5.54995L7.16245 13.5Z"
fill="#5A7906"
/>
</g>
</svg>`}
/>
),
hide_password: (
<SvgXml
xml={`<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="formkit:hidden">
<path
id="Vector"
d="M8 11.5C6.35 11.5 5 10.15 5 8.5C5 6.85 6.35 5.5 8 5.5C9.65 5.5 11 6.85 11 8.5C11 10.15 9.65 11.5 8 11.5ZM8 6.5C6.9 6.5 6 7.4 6 8.5C6 9.6 6.9 10.5 8 10.5C9.1 10.5 10 9.6 10 8.5C10 7.4 9.1 6.5 8 6.5Z"
fill="#2D2D2D"
/>
<path
id="Vector_2"
d="M8 13.5C4.81 13.5 2.01 11.56 1.03 8.66C0.990031 8.55708 0.990031 8.44292 1.03 8.34C2.01 5.45 4.82 3.5 8 3.5C11.18 3.5 13.99 5.44 14.97 8.34C15.01 8.44 15.01 8.56 14.97 8.66C13.99 11.55 11.18 13.5 8 13.5ZM2.03 8.5C2.92 10.9 5.3 12.5 8 12.5C10.7 12.5 13.07 10.9 13.97 8.5C13.08 6.1 10.7 4.5 8 4.5C5.3 4.5 2.93 6.1 2.03 8.5Z"
fill="#2D2D2D"
/>
<path
id="Vector_3"
d="M14 15C13.9344 15.0008 13.8694 14.9879 13.8091 14.962C13.7489 14.9362 13.6946 14.898 13.65 14.85L1.65 2.84999C1.45 2.64999 1.45 2.33999 1.65 2.13999C1.85 1.93999 2.16 1.93999 2.36 2.13999L14.35 14.15C14.55 14.35 14.55 14.66 14.35 14.86C14.25 14.96 14.12 15.01 14 15.01V15Z"
fill="#2D2D2D"
/>
</g>
</svg>`}
/>
),
grey_dot: (
<SvgXml
xml={`<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Frame 88">
<path
id="Vector"
d="M6.99992 10.9998C7.27421 10.9998 7.53288 10.9478 7.77593 10.8436C8.01897 10.7394 8.23077 10.5971 8.41132 10.4165C8.59187 10.236 8.73596 10.0224 8.84359 9.77593C8.95123 9.52941 9.00331 9.27074 8.99984 8.99992C8.99984 8.72215 8.94776 8.46348 8.84359 8.22391C8.73943 7.98433 8.59708 7.77254 8.41653 7.58852C8.23598 7.4045 8.02245 7.26041 7.77593 7.15624C7.52941 7.05208 7.27074 7 6.99992 7C6.72215 7 6.46348 7.05208 6.22391 7.15624C5.98433 7.26041 5.77254 7.40276 5.58852 7.58331C5.4045 7.76386 5.26041 7.97565 5.15624 8.2187C5.05208 8.46175 5 8.72215 5 8.99992C5 9.27421 5.05208 9.53288 5.15624 9.77593C5.26041 10.019 5.40276 10.2308 5.58331 10.4113C5.76386 10.5919 5.97565 10.736 6.2187 10.8436C6.46175 10.9512 6.72215 11.0033 6.99992 10.9998Z"
fill="#797979"
/>
</g>
</svg>`}
/>
),
};
type Props = {
className?: string;
5 changes: 5 additions & 0 deletions assets/material-symbols_check.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -44,6 +44,7 @@
"react-native-gesture-handler": "~2.12.0",
"react-native-htmlview": "^0.16.0",
"react-native-ionicons": "^4.6.5",
"react-native-otp-textinput": "^1.1.3",
"react-native-paper": "^5.10.6",
"react-native-render-html": "^6.3.4",
"react-native-root-siblings": "^4.1.1",
125 changes: 120 additions & 5 deletions src/app/auth/signup.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { Redirect, Link, router } from 'expo-router';
import React, { useState } from 'react';
import { Alert, View } from 'react-native';
import React, { useEffect, useState } from 'react';
import { Alert, View, Text, StyleSheet } from 'react-native';
import { Button, Input } from 'react-native-elements';

import Icon from '../../../assets/icons';
import colors from '../../styles/colors';
import globalStyles from '../../styles/globalStyles';
import { useSession } from '../../utils/AuthContext';

@@ -12,11 +14,51 @@ function SignUpScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [passwordComplexity, setPasswordComplexity] = useState(false);

const [hasUppercase, setHasUppercase] = useState(false);
const [hasLowercase, setHasLowercase] = useState(false);
const [hasNumber, setHasNumber] = useState(false);
const [hasLength, setHasLength] = useState(false);

useEffect(() => {
if (hasUppercase && hasLowercase && hasNumber && hasLength) {
setPasswordComplexity(true);
} else {
setPasswordComplexity(false);
}
}, [hasUppercase, hasLowercase, hasNumber, hasLength]);

if (session) {
return <Redirect href="/home" />;
}

const checkPassword = (text: string) => {
setPassword(text);
if (text !== '') {
if (text !== text.toLowerCase()) {
setHasUppercase(true);
} else {
setHasUppercase(false);
}
if (text !== text.toUpperCase()) {
setHasLowercase(true);
} else {
setHasLowercase(false);
}
if (/[0-9]/.test(text)) {
setHasNumber(true);
} else {
setHasNumber(false);
}
if (text.length >= 8) {
setHasLength(true);
} else {
setHasLength(false);
}
}
};

const signUpWithEmail = async () => {
setLoading(true);
const { error } = await signUp(email, password);
@@ -44,18 +86,79 @@ function SignUpScreen() {
<Input
label="Password"
leftIcon={{ type: 'font-awesome', name: 'lock' }}
onChangeText={text => setPassword(text)}
onChangeText={text => checkPassword(text)}
value={password}
secureTextEntry
placeholder="Password"
autoCapitalize="none"
/>

</View>
{password !== '' && (
<View style={styles.passwordComplexity}>
<Icon type={hasUppercase ? 'green_check' : 'grey_dot'} />
<Text
style={[
styles.errorText,
hasUppercase
? { color: colors.textGreen }
: { color: colors.textGrey },
]}
>
At least 1 uppercase letter
</Text>
</View>
)}
{password !== '' && (
<View style={styles.passwordComplexity}>
<Icon type={hasLowercase ? 'green_check' : 'grey_dot'} />
<Text
style={[
styles.errorText,
hasLowercase
? { color: colors.textGreen }
: { color: colors.textGrey },
]}
>
At least 1 lowercase letter
</Text>
</View>
)}
{password !== '' && (
<View style={styles.passwordComplexity}>
<Icon type={hasNumber ? 'green_check' : 'grey_dot'} />
<Text
style={[
styles.errorText,
hasNumber
? { color: colors.textGreen }
: { color: colors.textGrey },
]}
>
At least 1 number
</Text>
</View>
)}
{password !== '' && (
<View style={styles.passwordComplexity}>
<Icon type={hasLength ? 'green_check' : 'grey_dot'} />
<Text
style={[
styles.errorText,
hasLength
? { color: colors.textGreen }
: { color: colors.textGrey },
]}
>
At least 8 characters
</Text>
</View>
)}
<View>
<Link href="/auth/login">Already have an account? Log In</Link>
<View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
<Button
title="Sign Up"
disabled={loading}
disabled={!passwordComplexity || loading}
onPress={signUpWithEmail}
/>
</View>
@@ -65,3 +168,15 @@ function SignUpScreen() {
}

export default SignUpScreen;

const styles = StyleSheet.create({
passwordComplexity: {
display: 'flex',
flexDirection: 'row',
paddingBottom: 8,
},
errorText: {
fontSize: 12,
marginLeft: 8,
},
});
12 changes: 11 additions & 1 deletion src/app/auth/verify.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { router } from 'expo-router';
import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
import { Alert, TextInput, View, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';

@@ -11,6 +11,16 @@ function VerificationScreen() {
const [loading, setLoading] = useState(false);
const [verificationCode, setCode] = useState<string>('');

// let otpInput = useRef(null);

// const clearText = () => {
// otpInput.current.clear();
// }

// const setText = () => {
// otpInput.current.setValue("1234");
// }

const verifyAccount = async () => {
setLoading(true);

2 changes: 2 additions & 0 deletions src/styles/colors.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,8 @@ const colors = {
textPrimary: '#000000', // black
textSecondary: '#484848', // gray for subtitles
textWhite: '#FFFFFF', // white
textGreen: '#5A7906', //for sign in
textGrey: '#797979', // for sign in

// Surface colors -- used for backgrounds
darkGrey: '#D9D9D9',

0 comments on commit 72a750d

Please sign in to comment.