Feat/login screen

.env.dev

@@ -1,5 +1,6 @@
 APP_CONFIG=dev
 KANVAS_URL=https://graphapidev.kanvas.dev/graphql
-KANVAS_KEY=7d0488b2-632e-4045-9d2d-370d9161644a
+KANVAS_KEY=9f8a5dfe-be5d-4958-b654-28150f86172a
+KANVAS_ADMIN_KEY=flvVB5dsLy2t2dGDmiWyz9vxvKtYffoJ8uGYik8D6UVddkIQGzlmxGfLn3uz7srwq397XEiyeZP14xfQlPinWMBVybW5febG0ALQIX30faWbhdTrz9KpnlV3EOi4nweB
 GOOGLE_WEB_CLIENT_ID='815133161926-qr8dm7hovaa3su0j6l217cdka4otpla6.apps.googleusercontent.com'
 GOOGLE_IOS_CLIENT_ID='815133161926-be4gebpe0tg5674tru8ckqiom3uurdpe.apps.googleusercontent.com'

src/assets/icons/lock-icon.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+
+
+const LockIcon = (props: SvgProps) => {
+
+  const {
+    fill = '#424242',
+    width = 24,
+    height = 25,
+  } = props;
+
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      {...props}
+    >
+      <Path
+        fill={fill}
+        d="M12 2.75c-2.757 0-5 2.243-5 5v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8c0-1.103-.897-2-2-2h-1v-3c0-2.757-2.243-5-5-5Zm6 10 .002 8H6v-8h12Zm-9-2v-3c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9Z"
+      />
+    </Svg>
+  );
+};
+
+export default LockIcon;

src/assets/icons/user-icon.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Svg, { SvgProps, Path } from 'react-native-svg';
+
+const UserIcon = (props: SvgProps) => {
+
+  const {
+    fill = '#424242',
+    width = 24,
+    height = 25,
+  } = props;
+
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      {...props}
+    >
+      <Path
+        fill={fill}
+        d="M12 2.25a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1h2Z"
+      />
+    </Svg>
+  );
+};
+
+export default UserIcon;

src/components/atoms/small-button.tsx

@@ -24,7 +24,7 @@ const Container = styled.TouchableOpacity`
   width: 50px;
   height:  50px;
   border-radius: 8px;
-  background-color: ${Colors.PRIMARY};
+  background-color: ${Colors.WHITE};
   margin-bottom: 10px;
   justify-content: center;
   align-items: center;

src/components/molecules/line-text-input.tsx

@@ -13,13 +13,14 @@ import IconButton from 'components/atoms/icon-button';
 
 const Container = styled.View`
   border-width: 1px;
-  height: 42px;
+  height: 50px;
   border-width: 1px;
   border-color: ${props => props.isFocused ? DEFAULT_THEME.inputFocus : DEFAULT_THEME.boderColor};
-  border-radius: 4px;
+  border-radius: 10px;
   padding-horizontal: 10px;
-  background-color: ${DEFAULT_THEME.inputBg};
+  background-color: rgba(244, 244, 244, 1);
   justify-content: center;
+  align-items: center;
   flex-direction: row;
   ${is('error')`
     border-color: ${DEFAULT_THEME.error};
@@ -85,6 +86,11 @@ interface IProps {
   isFocused?: boolean;
   error?: boolean | string;
   customRef?: any;
+  leftIconType?: string;
+  leftIconSize?: number;
+  leftIconColor?: string;
+  leftIconName?: string;
+  customLeftIcon?: () => JSX.Element;
 }
 
 const LineTextInput = ({
@@ -106,6 +112,11 @@ const LineTextInput = ({
   error,
   customRef,
   containerStyle,
+  leftIconName = '',
+  leftIconType = 'Ionicons',
+  leftIconSize = 24,
+  leftIconColor = DEFAULT_THEME.placeHolderText,
+  customLeftIcon,
   ...props
 }: IProps) => {
 
@@ -143,7 +154,31 @@ const LineTextInput = ({
     );
   }
   return (
-    <Container error={error} isFocused={isFocused} style={containerStyle}>
+    <Container
+      error={error}
+      isFocused={isFocused}
+      style={containerStyle}
+    >
+
+      <IconContainer
+        style={{ marginRight: 2 }}
+      >
+        {customLeftIcon ? (
+          <>
+            {customLeftIcon()}
+          </>
+        ) : (
+          <IconButton
+            iconType={leftIconType}
+            name={leftIconName}
+            size={leftIconSize}
+            color={leftIconColor}
+            backgroundColor={backgroundColor}
+            onPress={() => togglePasswordVisibility(!showPassword)}
+          />
+        )}
+      </IconContainer>
+
       <TextInput
         ref={customRef}
         fontSize={fontSize}

src/components/molecules/text-input.tsx

@@ -88,6 +88,7 @@ const TextInput = (props: IProps) => {
     error = false | '',
     isFocused,
     customRef,
+    customLeftIcon,
   } = props;
 
   return (
@@ -124,6 +125,7 @@ const TextInput = (props: IProps) => {
         secureTextEntry={secureTextEntry}
         error={error}
         containerStyle={containerStyle}
+        customLeftIcon={customLeftIcon}
         {...inputProps}
       />
 

src/locales/en.ts

@@ -5,12 +5,13 @@ export default {
   email: 'Email',
   displayName: 'Display Name',
   welcome: 'Welcome',
-  placeholderMail: 'Enter your email',
+  placeholderMail: 'Email address',
   password: 'Password',
+  passwordConfirmation: 'Password confirmation',
   placeholderPassword: 'Enter your password',
   signIn: 'Sign In',
   signUp: 'Sign Up',
-  forgotPassword: 'Forgot Password',
+  recoverPassword: 'Recover password',
   signUpNow: 'Sign Up Now',
   signingIn: 'Signing In...',
   error: 'Error',
@@ -43,4 +44,11 @@ export default {
   savingChanges: 'Saving changes...',
   saveChanges: 'Save changes',
   notification: 'Notification',
+  login: 'Login',
+  loginMsg: 'Welcome back! Enter your details below',
+  notAMember: 'Not a member?',
+  registerNow: 'Register Now',
+  orContinueWith: 'Or continue with',
+  createYourAccount: 'Create your Account',
+  alreadyHaveAnAccount: 'Already have an account?',
 };