Sign In Page refactor with native SC

native-example/App.js

@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
 import { useEasybase, EasybaseProvider } from 'easybase-react';
+import { NativeAuth } from 'easybase-react/native';
 import ebconfig from './ebconfig';
 
 function Account() {
@@ -57,7 +58,10 @@ function Router() {
 export default function app() {
   return (
     <EasybaseProvider ebconfig={ebconfig}>
-      <Router />
+      {/* <Router /> */}
+      <View style={styles.container}>
+        <NativeAuth />
+      </View>
     </EasybaseProvider>
   )
 }

native-example/package.json

@@ -5,6 +5,7 @@
     "ios": "npm run reinit && react-native run-ios",
     "web": "npm run reinit && expo start --web",
     "start": "npm run reinit && react-native start",
+    "resetCache": "react-native start --reset-cache",
     "reinit": "npm i github:easybase/easybase-react#dev"
   },
   "dependencies": {

native-example/yarn.lock

@@ -2897,7 +2897,7 @@
   "version" "0.1.2"
 
 "easybase-react@github:easybase/easybase-react#dev":
-  "resolved" "git+ssh://git@github.com/easybase/easybase-react.git#bc356375b205adbde4872c3d3b3d2ba2452c73e2"
+  "resolved" "git+ssh://git@github.com/easybase/easybase-react.git#f43f356fb0873aa3a3a1a8c1f4c05541aa157be3"
   "version" "2.1.15"
   dependencies:
     "easybasejs" "4.2.13"

src/ui/NativeAuth/NativeAuth.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState, lazy, Suspense, Fragment } from 'react';
+import Container from './components/Container';
+import { ThemeProvider } from 'styled-components/native';
+import { Toaster } from 'react-hot-toast';
+import { mergeDeep, defaultDictionary } from '../utils';
+import { IStyles, IAuth } from '../uiTypes';
+import useEasybase from '../../useEasybase';
+
+const DefaultSignIn = lazy(() => import('./pages/SignIn'));
+const DefaultSignUp = lazy(() => import('./pages/SignUp'));
+const DefaultForgotPassword = lazy(() => import('./pages/ForgotPassword'));
+
+export default function ({ theme, customStyles, children, dictionary, signUpFields }: IAuth): JSX.Element {
+    const [themeVal, setThemeVal] = useState<any>({});
+
+    const [currentPage, setCurrentPage] = useState<"SignIn" | "SignUp" | "ForgotPassword" | "ForgotPasswordConfirm">("SignIn");
+    const { isUserSignedIn } = useEasybase();
+
+    useEffect(() => {
+        try {
+            document.body.style.margin = "0px";
+        } catch (_) { }
+        async function mounted() {
+            let loadedTheme: IStyles = {};
+            if (theme === "minimal-dark") {
+                const _theme = (await import('../themes/minimal-dark')).default;
+                if (_theme.init) {
+                    _theme.init()
+                }
+                loadedTheme = _theme;
+            } else if (theme === "material") {
+                const _theme = (await import('../themes/material')).default;
+                if (_theme.init) {
+                    _theme.init()
+                }
+                loadedTheme = _theme;
+            } else {
+                // catch all
+                const _theme = (await import('../themes/minimal')).default;
+                if (_theme.init) {
+                    _theme.init()
+                }
+                loadedTheme = _theme;
+            }
+
+            if (customStyles) {
+                loadedTheme = mergeDeep(loadedTheme, customStyles)
+            }
+
+            setThemeVal(loadedTheme)
+        }
+        mounted();
+    }, [theme])
+
+    if (isUserSignedIn()) {
+        return <Fragment>{children}</Fragment>
+    }
+
+    const getCurrentPage = () => {
+        switch (currentPage) {
+            case "SignIn":
+                return (
+                    <Suspense fallback={<Fragment />}>
+                        <DefaultSignIn
+                            setCurrentPage={setCurrentPage}
+                            dictionary={typeof dictionary === "object" ? { ...defaultDictionary, ...dictionary } : defaultDictionary}
+                        />
+                    </Suspense>
+                )
+            case "SignUp":
+                return (
+                    <Suspense fallback={<Fragment />}>
+                        <DefaultSignUp
+                            setCurrentPage={setCurrentPage}
+                            dictionary={typeof dictionary === "object" ? { ...defaultDictionary, ...dictionary } : defaultDictionary}
+                            signUpFields={typeof signUpFields === "object" ? signUpFields : {}}
+                        />
+                    </Suspense>
+                )
+            case "ForgotPassword":
+                return (
+                    <Suspense fallback={<Fragment />}>
+                        <DefaultForgotPassword
+                            setCurrentPage={setCurrentPage}
+                            dictionary={typeof dictionary === "object" ? { ...defaultDictionary, ...dictionary } : defaultDictionary}
+                        />
+                    </Suspense>
+                )
+            default:
+                return <React.Fragment />;
+        }
+    }
+
+    return (
+        <ThemeProvider theme={themeVal}>
+            <Container>
+                <Toaster toastOptions={{ style: { fontFamily: 'inherit', ...(themeVal.toast ? { ...themeVal.toast } : {}) } }} />
+                {/* {getCurrentPage()} */}
+                <Suspense fallback={<Fragment />}>
+                    <DefaultSignIn
+                        setCurrentPage={setCurrentPage}
+                        dictionary={typeof dictionary === "object" ? { ...defaultDictionary, ...dictionary } : defaultDictionary}
+                    />
+                </Suspense>
+            </Container>
+        </ThemeProvider>
+    )
+}

src/ui/NativeAuth/components/Container.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+const Container = styled.View((props: any) => ({
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(props.theme.container ? { ...props.theme.container } : {})
+}))
+
+export default function (props: any) {
+    return (
+        <Container>{props.children}</Container>
+    )
+}

src/ui/NativeAuth/components/EmailInput.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Input from './internal/Input';
+
+export default function(props: any) {
+    return (
+        <Input label="Email" autoComplete="email" {...props} type="email" required />
+    )
+}

src/ui/NativeAuth/components/ErrorText.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ErrorText = styled.p(props => ({
+    marginTop: 5,
+    marginBottom: -5,
+    fontSize: 12,
+    fontWeight: 500,
+    color: 'red',
+    height: 0,
+    overflow: 'visible',
+    ...(props.theme.errorText ? { ...props.theme.errorText } : {})
+}))
+
+interface IErrorText extends React.HTMLAttributes<HTMLParagraphElement> {
+    value?: string | undefined;
+}
+
+export default function (props: IErrorText) {
+    if (props.value && props.value.length) {
+        return <ErrorText {...props}>{props.value}</ErrorText>
+    }
+    return <React.Fragment />
+}

src/ui/NativeAuth/components/ForgotPassword.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import TextButton from './internal/TextButton';
+import styled from 'styled-components/native';
+
+const ForgotPassword = styled(TextButton)(props => ({
+    marginTop: -53,
+    marginBottom: 53,
+    display: 'flex',
+    ...(props.theme.forgotPassword ? { ...props.theme.forgotPassword } : {})
+}))
+
+export default function (props: any) {
+    return (
+        <ForgotPassword {...props} />
+    )
+}

src/ui/NativeAuth/components/Form.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+const Form = styled.View((props: any) => ({
+    display: "flex",
+    justifyContent: "center",
+    minWidth: 300,
+    width: 380,
+    padding: '33px 55px',
+    boxShadow: '0 5px 10px 0 rgb(0 0 0 / 10%)',
+    borderRadius: 10,
+    flexDirection: 'column',
+    fontFamily: "inherit",
+    margin: '6% auto 50px',
+    '@media (max-width: 520px)': {
+        margin: '0px !important',
+        position: 'fixed !important',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: 'initial !important'
+    },
+    ...(props.theme.form ? { ...props.theme.form } : {})
+}))
+
+export default function (props: any) {
+    return (
+        <Form {...props}>{props.children}</Form>
+    )
+}

src/ui/NativeAuth/components/GenderSelect.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import styled from 'styled-components';
+import Label from './internal/Label';
+import Select from './internal/Select';
+
+const GenderSelect = styled(Select)(props => ({
+    boxSizing: "border-box",
+    ...(props.theme.genderSelect ? { ...props.theme.genderSelect } : {})
+}))
+
+const Root = styled.div({
+    position: "relative"
+})
+
+interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    register(): UseFormRegisterReturn;
+}
+
+export default function (props: ISelect) {
+    return (
+        <Root>
+            <Label htmlFor="select-gender">Gender *</Label>
+            <GenderSelect id="select-gender" {...props} options={["Male", "Female", "Prefer not to say"]} />
+        </Root>
+    )
+}

src/ui/NativeAuth/components/HeaderText.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+const HeaderText = styled.Text((props: any) => ({
+    fontFamily: "inherit",
+    fontSize: 24,
+    fontWeight: 500,
+    letterSpacing: -.2,
+    marginBlockStart: '0.67em',
+    marginBlockEnd: '0.67em',
+    marginInlineStart: 0,
+    marginInlineEnd: 0,
+    marginTop: '16px !important',
+    ...(props.theme.headerText ? { ...props.theme.headerText } : {})
+}))
+
+export default function (props: any) {
+    return (
+        <HeaderText {...props} />
+    )
+}

src/ui/NativeAuth/components/PasswordInput.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Input from './internal/Input';
+
+export default function(props: any) {
+    return (
+        <Input label="Password" {...props} type="password" required />
+    )
+}

src/ui/NativeAuth/components/SecondaryButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import TextButton from './internal/TextButton';
+import styled from 'styled-components/native';
+
+const SecondaryButton = styled(TextButton)(props => ({
+    margin: '15px',
+    ...(props.theme.secondaryButton ? { ...props.theme.secondaryButton } : {})
+}))
+
+export default function (props: any) {
+    return (
+        <SecondaryButton {...props} />
+    )
+}

src/ui/NativeAuth/components/SecondaryText.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const SecondaryText = styled.h2(props => ({
+    fontFamily: "inherit",
+    fontSize: 15,
+    fontWeight: 300,
+    letterSpacing: -.2,
+    lineHeight: '20px',
+    whiteSpace: 'normal',
+    ...(props.theme.secondaryText ? { ...props.theme.secondaryText } : {})
+}))
+
+export default function (props: React.HTMLAttributes<HTMLHeadingElement>) {
+    return (
+        <SecondaryText {...props} />
+    )
+}

src/ui/NativeAuth/components/Spacer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+const Spacer = styled.View({});
+
+interface ISpacer {
+    size?: "xlarge" | "large" | "medium" | "small"
+}
+
+export default function (props: ISpacer) {
+    switch (props.size) {
+        case "xlarge":
+            return <Spacer style={{ height: 64 }} />   
+        case "large":
+            return <Spacer style={{ height: 58 }} />            
+        case "small":
+            return <Spacer style={{ height: 16 }} />
+        default:
+            return <Spacer style={{ height: 37 }} />
+    }
+}

src/ui/NativeAuth/components/SubmitButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+const SubmitButtonRoot = styled.View((props: any) => props.theme.submitButtonRoot ? props.theme.submitButtonRoot : {});
+
+const SubmitButton = styled.Button((props: any) => ({
+    position: 'relative',
+    border: "none",
+    verticalAlign: "middle",
+    textAlign: "center",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    outline: "none",
+    cursor: "pointer",
+    boxSizing: 'border-box',
+    ...(props.theme.submitButton ? { ...props.theme.submitButton } : {})
+}))
+
+export default function (props: any) {
+    return (
+        <SubmitButtonRoot>
+            <SubmitButton type="submit" {...props} />
+        </SubmitButtonRoot>
+    )
+}