@campxdev/shared 1.7.13 → 1.7.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.7.13",
+  "version": "1.7.14",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/LoginForm.tsx

@@ -18,8 +18,16 @@ import { FormTextField } from './HookForm'
 import axios from '../config/axios'
 import ResetPassword from './ResetPassword'
 import { Link } from 'react-router-dom'
+import { DialogButton } from './ModalButtons'
+import adminAxios from '../utils/adminAxios'
 
-export function LoginForm({ loginUrl }: { loginUrl?: string }) {
+export function LoginForm({
+  loginUrl,
+  showSuperAdminForm,
+}: {
+  loginUrl?: string
+  showSuperAdminForm?: boolean
+}) {
   const [showPassword, setShowPassword] = useState(false)
   const [forgotMail, setForgotMail] = useState(null)
   const [forgotPassword, setForgotPassword] = useState(true)
@@ -72,7 +80,7 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
   }, [])
 
   return (
-    <>
+    <Box sx={{ position: 'relative', height: '100%' }}>
       {resetPassword ? (
         <>
           <ResetPassword />
@@ -80,37 +88,33 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
       ) : forgotPassword ? (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Stack gap={'30px'} sx={{ display: resetPassword ? 'none' : 'flex' }}>
-            <Box>
-              <FormTextField
-                control={control}
-                name="username"
-                label="User ID"
-                required
-              />
-            </Box>
-            <Box>
-              <FormTextField
-                control={control}
-                name="password"
-                label="Password"
-                type={showPassword ? 'text' : 'password'}
-                required
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <IconButton
-                        size="small"
-                        aria-label="toggle password visibility"
-                        onClick={() => setShowPassword((prev) => !prev)}
-                        edge="end"
-                      >
-                        {showPassword ? <VisibilityOff /> : <Visibility />}
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Box>
+            <FormTextField
+              control={control}
+              name="username"
+              label="User ID"
+              required
+            />
+            <FormTextField
+              control={control}
+              name="password"
+              label="Password"
+              type={showPassword ? 'text' : 'password'}
+              required
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      aria-label="toggle password visibility"
+                      onClick={() => setShowPassword((prev) => !prev)}
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
             <ActionButton type="submit">Login</ActionButton>
             <Typography
               variant="h6"
@@ -159,7 +163,27 @@ export function LoginForm({ loginUrl }: { loginUrl?: string }) {
           {error}
         </Alert>
       )}
-    </>
+
+      {showSuperAdminForm && (
+        <Box
+          sx={{
+            position: 'absolute',
+            bottom: '20px',
+            right: '20px',
+          }}
+        >
+          <DialogButton
+            title="Super Admin Login"
+            anchor={({ open }) => (
+              <Button onClick={open} size="small" variant="text">
+                Super Admin Login
+              </Button>
+            )}
+            content={({ close }) => <SuperAdminLoginForm close={close} />}
+          />
+        </Box>
+      )}
+    </Box>
   )
 }
 
@@ -169,3 +193,82 @@ export const StyledLink = styled(Link)({
 })
 
 export default LoginForm
+
+const SuperAdminLoginForm = ({ close }) => {
+  const [showPassword, setShowPassword] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const { handleSubmit, control } = useForm({
+    defaultValues: null,
+  })
+  const [error, setError] = useState('')
+
+  const onSubmit = async (values) => {
+    setLoading(true)
+    try {
+      const res = await adminAxios.post(`/auth/login`, values)
+      Cookies.set('campx_admin_session_key', res?.data?.cookie)
+
+      setLoading(false)
+      window.location.href = '/campx'
+    } catch (err) {
+      setLoading(false)
+      setError(err.response.data.message ?? 'Server Error')
+    }
+  }
+
+  const onError = (e) => {
+    console.log(e)
+  }
+
+  return (
+    <Box width={'100%'} marginTop="20px">
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <Stack gap={'40px'}>
+          <Typography variant="h6" textAlign={'center'}>
+            Sign in to Super Admin Account
+          </Typography>
+          <FormTextField
+            control={control}
+            name="username"
+            label="Username/Email"
+            required
+          />
+          <FormTextField
+            control={control}
+            name="password"
+            label="Password"
+            type={showPassword ? 'text' : 'password'}
+            required
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    size="small"
+                    aria-label="toggle password visibility"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+          <ActionButton
+            type="submit"
+            fullWidth
+            disabled={loading}
+            loading={loading}
+          >
+            Login
+          </ActionButton>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}

package/src/contexts/LoginFormProvider.tsx

@@ -8,14 +8,19 @@ const LoginContext = createContext<{
   openLoginForm: (loginUrl: string) => {},
 })
 
-export default function LoginFormProvider({ children }) {
+export default function LoginFormProvider({ children, showSuperAdminForm }) {
   const modal = useModal()
 
   const onLogin = (loginUrl: string) => {
     modal({
       title: 'Developer Login',
       content({ close }) {
-        return <LoginForm loginUrl={loginUrl} />
+        return (
+          <LoginForm
+            loginUrl={loginUrl}
+            showSuperAdminForm={showSuperAdminForm}
+          />
+        )
       },
     })
   }

package/src/contexts/Providers.tsx

@@ -13,7 +13,13 @@ import LoginFormProvider from './LoginFormProvider'
 export const campxTenantKey = Cookies.get('campx_tenant')
 export const urlTenantKey = window.location.pathname.split('/')[1]
 
-export default function Providers({ children }: { children: ReactNode }) {
+export default function Providers({
+  children,
+  showSuperAdminLoginForm = false,
+}: {
+  children: ReactNode
+  showSuperAdminLoginForm?: boolean
+}) {
   useEffect(() => {
     if (!urlTenantKey) {
       if (campxTenantKey) {
@@ -30,7 +36,7 @@ export default function Providers({ children }: { children: ReactNode }) {
         <MuiThemeProvider>
           <ConfirmContextProvider>
             <DialogProvider>
-              <LoginFormProvider>
+              <LoginFormProvider showSuperAdminForm={showSuperAdminLoginForm}>
                 {children}
                 <GlobalNetworkLoadingIndicator />
               </LoginFormProvider>

package/src/utils/adminAxios.ts

@@ -0,0 +1,15 @@
+import Axios from 'axios'
+import Cookies from 'js-cookie'
+
+const sessionKey = Cookies.get('campx_admin_session_key')
+let adminAxios = Axios.create({
+  baseURL: process.env.REACT_APP_TENANT_API_HOST,
+  withCredentials: true,
+  headers: {
+    ...(sessionKey && {
+      campx_admin_session_key: sessionKey,
+    }),
+  },
+})
+
+export default adminAxios