nitro-web 0.0.85 → 0.0.87

package/client/globals.ts

@@ -1,12 +1,16 @@
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, Dispatch, SetStateAction } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { onChange } from 'nitro-web'
+import { Store } from 'nitro-web/types'
 
 declare global {
-  // Common application globals
-  const onChange: typeof import('nitro-web').onChange
+  // useTracked global (normally defined in ./client/index.ts)
+  const useTracked: () => [Store, Dispatch<SetStateAction<Store>>]
 
-  // Common aependency globals
+  // nitro-web global
+  const onChange: typeof import('nitro-web').onChange
+  
+  // common daependency globals
   /** The public API for rendering a history-aware `<a>`. */
   const Link: typeof import('react-router-dom').Link
   const useCallback: typeof import('react').useCallback
@@ -21,9 +25,9 @@ declare global {
 }
 
 Object.assign(window, {
-  // application globals
+  // nitro-web global
   onChange: onChange,
-  // dependency globals
+  // common dependency globals
   Link: Link,
   useCallback: useCallback,
   useEffect: useEffect,

package/package.json

@@ -1,26 +1,34 @@
 {
   "name": "nitro-web",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
-  "main": "./client/index.ts",
   "type": "module",
+  "main": "./client/index.ts",
+  "types": "./types/globals.d.ts",
   "exports": {
     ".": "./client/index.ts",
+    "./.eslintrc.json": "./.eslintrc.json",
     "./client/imgs/*": "./client/imgs/*",
     "./client/globals": "./client/globals.ts",
     "./server": "./server/index.js",
     "./types": "./types.ts",
-    "./.eslintrc.json": "./.eslintrc.json",
-    "./tsconfig.json": "./tsconfig.json",
-    "./webpack.config.js": "./webpack.config.js",
     "./util": {
       "require": "./util.js",
       "import": "./util.js",
       "types": "./types/util.d.ts"
-    }
+    },
+    "./webpack.config.js": "./webpack.config.js"
   },
+  "files": [
+    ".eslintrc.json",
+    "client",
+    "server",
+    "types",
+    "util.js",
+    "webpack.config.js"
+  ],
   "scripts": {
     "major": "npm run types && standard-version -a --release-as major && npm publish && cd ../webpack && npm publish",
     "minor": "npm run types && standard-version -a --release-as minor && npm publish && cd ../webpack && npm publish",

package/types/{required-globals.d.ts → globals.d.ts}

@@ -1,4 +1,3 @@
-// Required global types
 import 'twin.macro'
 import { css as cssImport } from '@emotion/react'
 import styledImport from '@emotion/styled'
@@ -17,6 +16,7 @@ declare global {
     const content: string
     export default content
   }
+  
 }
 
 // Webpack: Twin.macro css extension
@@ -37,3 +37,5 @@ declare module 'react' {
     for?: string | undefined
   }
 }
+
+export {}

package/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

package/components/auth/auth.api.js

@@ -1,410 +0,0 @@
-import crypto from 'crypto'
-import bcrypt from 'bcrypt'
-import passport from 'passport'
-import passportLocal from 'passport-local'
-import { Strategy as JwtStrategy, ExtractJwt } from 'passport-jwt'
-import db from 'monastery'
-import jsonwebtoken from 'jsonwebtoken'
-import { sendEmail } from 'nitro-web/server'
-import { isArray, pick, ucFirst, fullNameSplit } from 'nitro-web/util'
-
-let authConfig = null
-const JWT_SECRET = process.env.JWT_SECRET || 'replace_this_with_secure_env_secret'
-
-export const routes = {
-  // Routes
-  'get     /api/store': [store],
-  'get     /api/signout': [signout],
-  'post    /api/signin': [signin],
-  'post    /api/signup': [signup],
-  'post    /api/reset-instructions': [resetInstructions],
-  'post    /api/reset-password': [resetPassword],
-  'post    /api/invite-instructions': [inviteInstructions],
-  'post    /api/invite-accept': [resetPassword],
-  'delete  /api/account/:uid': [remove],
-
-  // Overridable helpers
-  setup: setup,
-  findUserFromProvider: findUserFromProvider,
-  getStore: getStore,
-  signinAndGetStore: signinAndGetStore,
-  tokenCreate: tokenCreate,
-  tokenParse: tokenParse,
-  userCreate: userCreate,
-  validatePassword: validatePassword,
-}
-
-function setup(middleware, _config) {
-  // routes.setup is called automatically when express starts
-  // Set config values
-  const configKeys = ['clientUrl', 'emailFrom', 'env', 'name', 'mailgunDomain', 'mailgunKey', 'masterPassword', 'isNotMultiTenant']
-  authConfig = pick(_config, configKeys)
-  for (const key of ['clientUrl', 'emailFrom', 'env', 'name']) {
-    if (!authConfig[key]) throw new Error(`Missing config value for: config.${key}`)
-  }
-
-  passport.use(
-    new passportLocal.Strategy(
-      { usernameField: 'email' },
-      async (email, password, next) => {
-        try {
-          const user = await this.findUserFromProvider({ email }, password)
-          next(null, user)
-        } catch (err) {
-          next(err.message)
-        }
-      }
-    )
-  )
-
-  passport.use(
-    new JwtStrategy(
-      {
-        jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
-        secretOrKey: JWT_SECRET,
-      },
-      async (payload, done) => {
-        try {
-          const user = await this.findUserFromProvider({ _id: payload._id })
-          if (!user) return done(null, false)
-          return done(null, user)
-        } catch (err) {
-          return done(err, false)
-        }
-      }
-    )
-  )
-
-  middleware.order.splice(3, 0, 'passport', 'passportError', 'jwtAuth', 'blocked')
-
-  Object.assign(middleware, {
-    blocked: function (req, res, next) {
-      if (req.user && req.user.loginActive === false) {
-        res.status(403).error('This user is not available.')
-      } else {
-        next()
-      }
-    },
-    jwtAuth: function(req, res, next) {
-      passport.authenticate('jwt', { session: false }, function(err, user) {
-        if (user) req.user = user
-        next()
-      })(req, res, next)
-    },
-    passport: passport.initialize(),
-    passportError: function (err, req, res, next) {
-      if (!err) return next()
-      res.error(err)
-    },
-  })
-}
-
-async function store(req, res) {
-  res.json(await this.getStore(req.user))
-}
-
-async function signup(req, res) {
-  try {
-    const desktop = req.query.desktop
-    let user = await this.userCreate(req.body)
-    sendEmail({
-      config: authConfig,
-      template: 'welcome',
-      to: `${ucFirst(user.firstName)}<${user.email}>`,
-    }).catch(console.error)
-    res.send(await this.signinAndGetStore(user, desktop, this.getStore))
-  } catch (err) {
-    res.error(err)
-  }
-}
-
-function signin(req, res) {
-  const desktop = req.query.desktop
-  if (!req.body.email) return res.error('email', 'The email you entered is incorrect.')
-  if (!req.body.password) return res.error('password', 'The password you entered is incorrect.')
-
-  passport.authenticate('local', { session: false }, async (err, user, info) => {
-    if (err) return res.error(err)
-    if (!user && info) return res.error('email', info.message)
-    try {
-      const response = await this.signinAndGetStore(user, desktop, this.getStore)
-      res.send(response)
-    } catch (err) {
-      res.error(err)
-    }
-  })(req, res)
-}
-
-function signout(req, res) {
-  res.json('{}')
-}
-
-async function resetInstructions(req, res) {
-  try {
-    let email = (req.body.email || '').trim().toLowerCase()
-    if (!email) throw { title: 'email', detail: 'The email you entered is incorrect.' }
-
-    let user = await db.user.findOne({ query: { email }, _privateData: true })
-    if (!user) throw { title: 'email', detail: 'The email you entered is incorrect.' }
-
-    let resetToken = await tokenCreate(user._id)
-    await db.user.update({ query: { email }, $set: { resetToken }})
-
-    res.json({})
-    sendEmail({
-      config: authConfig,
-      template: 'reset-password',
-      to: `${ucFirst(user.firstName)}<${email}>`,
-      data: {
-        token: resetToken + (req.query.hasOwnProperty('desktop') ? '?desktop' : ''),
-      },
-    }).catch(err => console.error('sendEmail(..) mailgun error', err))
-  } catch (err) {
-    res.error(err)
-  }
-}
-
-async function resetPassword(req, res) {
-  try {
-    const { token, password, password2 } = req.body
-    const name = req.path.includes('invite') ? 'inviteToken' : 'resetToken'
-    const desktop = req.query.desktop
-    const id = tokenParse(token)
-    await validatePassword(password, password2)
-
-    let user = await db.user.findOne({ query: id, blacklist: ['-' + name], _privateData: true })
-    if (!user || user[name] !== token) throw new Error('Sorry your token is invalid or has already been used.')
-
-    await db.user.update({
-      query: user._id,
-      data: {
-        password: await bcrypt.hash(password, 10),
-        resetToken: '',
-      },
-      blacklist: ['-' + name, '-password'],
-    })
-    res.send(await this.signinAndGetStore({ ...user, [name]: undefined }, desktop, this.getStore))
-  } catch (err) {
-    res.error(err)
-  }
-}
-
-async function inviteInstructions(req, res) {
-  try {
-    // Check if user is admin here rather than in middleware (which may not exist yet)
-    if (req.user.type != 'admin' && !req.user.isAdmin) {
-      throw new Error('You are not authorized to invite users.')
-    }
-    const inviteToken = await tokenCreate()
-    const userData = await db.user.validate({
-      ...pick(req.body, ['email', 'firstName', 'lastName']),
-      status: 'invited',
-      inviteToken: inviteToken,
-    })
-
-    // Check if user already exists
-    if (await db.user.findOne({ query: { email: userData.email } })) {
-      throw { title: 'email', detail: 'User already exists.' }
-    }
-
-    // Create user
-    const user = await db.user.insert({
-      data: userData,
-    })
-
-    // Send email
-    res.send(user)
-    sendEmail({
-      config: authConfig,
-      template: 'invite-user',
-      to: `${ucFirst(userData.firstName)}<${userData.email}>`,
-      data: {
-        token: inviteToken + (req.query.hasOwnProperty('desktop') ? '?desktop' : ''),
-      },
-    }).catch(err => console.error('sendEmail(..) mailgun error', err))
-
-  } catch (err) {
-    return res.error(err)
-  }
-}
-
-async function remove(req, res) {
-  try {
-    const uid = db.id(req.params.uid || 'badid')
-    // Check for active subscription first...
-    if (req.user.stripeSubscription?.status == 'active') {
-      throw { title: 'subscription', detail: 'You need to cancel your subscription first.' }
-    }
-    // // Get companies owned by user
-    // const companyIdsOwned = (await db.company.find({ 
-    //   query: { users: { $elemMatch: { _id: uid, role: 'owner' } } },
-    //   project: { _id: 1 },
-    // })).map(o => o._id)
-    
-    // if (companyIdsOwned.length) {
-    //   await db.product.remove({ query: { company: { $in: companyIdsOwned }}})
-    //   await db.company.remove({ query: { _id: { $in: companyIdsOwned }}})
-    // }
-    await db.user.remove({ query: { _id: uid }})
-    // Logout now so that an error doesn't throw when naviating to /signout
-    req.logout()
-    res.send(`User: '${uid}' removed successfully`)
-  } catch (err) {
-    res.error(err)
-  }
-}
-
-/* ---- Overridable helpers ------------------ */
-
-export async function findUserFromProvider(query, passwordToCheck) {
-  /**
-   * Find user for state (and verify password if signing in with email)
-   * @param {object} query - e.g. { email: 'test@test.com' }
-   * @param {string} <passwordToCheck> - password to test
-   */
-  const isMultiTenant = !authConfig.isNotMultiTenant
-  const checkPassword = arguments.length > 1
-  const user = await db.user.findOne({
-    query: query,
-    blacklist: ['-password'],
-    populate: db.user.loginPopulate(),
-    _privateData: true,
-  })
-  if (isMultiTenant && user?.company) {
-    user.company = await db.company.findOne({
-      query: user.company,
-      populate: db.company.loginPopulate(),
-      _privateData: true,
-    })
-  }
-  if (!user) {
-    throw new Error(checkPassword ? 'Email or password is incorrect.' : 'Session-user is invalid.')
-  } else if (isMultiTenant && !user.company) {
-    throw new Error('The current company is no longer associated with this user')
-  } else if (isMultiTenant && user.company.status != 'active') {
-    throw new Error('This user is not associated with an active company')
-  } else {
-    if (checkPassword) {
-      if (!user.password) {
-        throw new Error('There is no password associated with this account, please try signing in with another method.')
-      }
-      const match = user.password ? await bcrypt.compare(passwordToCheck, user.password) : false
-      if (!match && !(authConfig.masterPassword && passwordToCheck == authConfig.masterPassword)) {
-        throw new Error('Email or password is incorrect.')
-      }
-    }
-    // Successful return user
-    delete user.password
-    return user
-  }
-}
-
-export async function getStore(user) {
-  // Initial store
-  return {
-    user: user || undefined,
-  }
-}
-
-export async function signinAndGetStore(user, isDesktop, getStore) {
-  if (user.loginActive === false) throw 'This user is not available.'
-  user.desktop = isDesktop
-
-  const jwt = jsonwebtoken.sign({ _id: user._id }, JWT_SECRET, { expiresIn: '30d' })
-  const store = await getStore(user)
-  return { ...store, jwt }
-}
-
-export async function userCreate({ business, password, ...userDataProp }) {
-  try {
-    if (!this.findUserFromProvider) {
-      throw new Error('this.findUserFromProvider doesn\'t exist, make sure the context is available when calling this function')
-    }
-
-    const options = { blacklist: ['-_id'] }
-    const isMultiTenant = !authConfig.isNotMultiTenant
-    const userId = db.id()
-    const companyData = isMultiTenant && {
-      _id: db.id(), 
-      ...(business ? { business } : {}),
-      users: [{ _id: userId, role: 'owner', status: 'active' }],
-    }
-    const userData = {
-      ...userDataProp,
-      _id: userId,
-      ...(userDataProp.name ? { 
-        firstName: fullNameSplit(userDataProp.name)[0],
-        lastName: fullNameSplit(userDataProp.name)[1],
-      } : {}),
-      password: password ? await bcrypt.hash(password, 10) : undefined,
-      ...(isMultiTenant ? { company: companyData._id } : {}),
-    }
-    // First validate the data so we don't have to create a transaction
-    const results = await Promise.allSettled([
-      db.user.validate(userData, options),
-      ...(isMultiTenant ? [db.company.validate(companyData, options)] : []),
-      typeof password === 'undefined' ? Promise.resolve() : validatePassword(password),
-    ])
-
-    // Throw all the errors from at once
-    const errors = results.filter(o => o.status == 'rejected').reduce((acc, o) => {
-      if (isArray(o.reason)) acc.push(...o.reason)
-      else throw o.reason
-      return acc
-    }, [])
-    if (errors.length) throw errors
-
-    // Insert company & user
-    await db.user.insert({ data: userData, ...options })
-    if (isMultiTenant) await db.company.insert({ data: companyData, ...options })
-
-    // Return the user
-    return await findUserFromProvider({ _id: userId })
-
-  } catch (err) {
-    if (!isArray(err)) throw err
-    else throw err //...
-  }
-}
-
-export function tokenCreate(id) {
-  return new Promise((resolve) => {
-    crypto.randomBytes(16, (err, buff) => {
-      let hash = buff.toString('hex') // 32 chars
-      resolve(`${hash}${id || ''}:${Date.now()}`)
-    })
-  })
-}
-
-export function tokenParse(token) {
-  let split = (token  ||  '').split(':')
-  let hash = split[0].slice(0, 32)
-  let userId = split[0].slice(32)
-  let time = split[1]
-  if (!hash || !userId || !time) {
-    throw { title: 'error', detail: 'Sorry your code is invalid.' }
-  } else if (parseFloat(time) + 1000 * 60 * 60 * 24 < Date.now()) {
-    throw { title: 'error', detail: 'Sorry your code has timed out.' }
-  } else {
-    return userId
-  }
-}
-
-export async function validatePassword(password='', password2) {
-  // let hasLowerChar = password.match(/[a-z]/)
-  // let hasUpperChar = password.match(/[A-Z]/)
-  // let hasNumber = password.match(/\d/)
-  // let hasSymbol = password.match(/\W/)
-  if (!password) {
-    throw [{ title: 'password', detail: 'This field is required.' }]
-  } else if (authConfig.env !== 'development' && password.length < 8) {
-    throw [{ title: 'password', detail: 'Your password needs to be atleast 8 characters long' }]
-    // } else if (!hasLowerChar || !hasUpperChar || !hasNumber || !hasSymbol) {
-    //   throw {
-    //     title: 'password',
-    //     detail: 'You need to include uppercase and lowercase letters, and a number'
-    //   }
-  } else if (typeof password2 != 'undefined' && password !== password2) {
-    throw [{ title: 'password2', detail: 'Your passwords need to match.' }]
-  }
-}

package/components/auth/reset.tsx

@@ -1,86 +0,0 @@
-import { Topbar, Field, FormError, Button, request } from 'nitro-web'
-import { Errors } from 'nitro-web/types'
-
-export function ResetInstructions() {
-  const navigate = useNavigate()
-  const isLoading = useState(false)
-  const [, setStore] = useTracked()
-  const [state, setState] = useState({ email: '', errors: [] as Errors })
-
-  async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
-    try {
-      await request('post /api/reset-instructions', state, event, isLoading, setState)
-      setStore((s) => ({ ...s, message: 'Done! Please check your email.' }))
-      navigate('/signin')
-    } catch (e) {
-      return setState({ ...state, errors: e as Errors })
-    }
-  }
-
-  return (
-    <div class="">
-      <Topbar title={<>Reset your Password</>} />
-
-      <form onSubmit={onSubmit}>
-        <div>
-          <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)} placeholder="Your email address..." />
-        </div>
-        
-        <div class="mb-14">
-          Remembered your password? You can <Link to="/signin" class="underline2 is-active">sign in here</Link>.
-          <FormError state={state} className="pt-2" />
-        </div>
-
-        <Button className="w-full" isLoading={isLoading[0]} type="submit">Email me a reset password link</Button>
-      </form>
-    </div>
-  )
-}
-
-export function ResetPassword() {
-  const navigate = useNavigate()
-  const params = useParams()
-  const isLoading = useState(false)
-  const [, setStore] = useTracked()
-  const [state, setState] = useState(() => ({
-    password: '',
-    password2: '',
-    token: params.token,
-    errors: [] as Errors,
-  }))
-
-  async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
-    try {
-      const data = await request('post /api/reset-password', state, event, isLoading, setState)
-      setStore((s) => ({ ...s, ...data }))
-      navigate('/')
-    } catch (e) {
-      return setState({ ...state, errors: e as Errors })
-    }
-  }
-
-  return (
-    <div class="">
-      <Topbar title={<>Reset your Password</>} />
-
-      <form onSubmit={onSubmit}>
-        <div>
-          <label for="password">Your New Password</label>
-          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)} />
-        </div>
-        <div>
-          <label for="password2">Repeat Your New Password</label>
-          <Field name="password2" type="password" state={state} onChange={(e) => onChange(setState, e)} />
-        </div>
-
-        <div class="mb-14">
-          Remembered your password? You can <Link to="/signin" class="underline2 is-active">sign in here</Link>.
-          <FormError state={state} className="pt-2" />
-        </div>
-
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Reset Password</Button>
-      </form>
-    </div>
-  )
-}

package/components/auth/signin.tsx

@@ -1,76 +0,0 @@
-import { Topbar, Field, Button, FormError, request, queryObject, injectedConfig, updateJwt } from 'nitro-web'
-import { Errors } from 'nitro-web/types'
-
-export function Signin() {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const isSignout = location.pathname == '/signout'
-  const isLoading = useState(isSignout)
-  const [, setStore] = useTracked()
-  const [state, setState] = useState({
-    email: injectedConfig.env == 'development' ? (injectedConfig.placeholderEmail || '') : '',
-    password: injectedConfig.env == 'development' ? '1234' : '',
-    errors: [] as Errors,
-  })
-
-  useEffect(() => {
-    // Autofill the email input from ?email=
-    const query = queryObject(location.search, true)
-    if (query.email) setState({ ...state, email: query.email as string })
-  }, [location.search])
-
-  useEffect(() => {
-    if (isSignout) {
-      setStore((s) => ({ ...s, user: undefined }))
-      // util.axios().get('/api/signout')
-      Promise.resolve()
-        .then(() => isLoading[1](false))
-        .then(() => updateJwt())
-        .then(() => navigate({ pathname: '/signin', search: location.search }, { replace: true }))
-        .catch(err => (console.error(err), isLoading[1](false)))
-    }
-  }, [isSignout])
-
-  async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
-    try {
-      const data = await request('post /api/signin', state, e, isLoading, setState)
-      // Keep it loading until we navigate
-      isLoading[1](true)
-      setStore((s) => ({ ...s, ...data }))
-      setTimeout(() => { // wait for setStore
-        if (location.search.includes('redirect')) navigate(location.search.replace('?redirect=', ''))
-        else navigate('/')
-      }, 100) 
-    } catch (e) {
-      return setState({ ...state, errors: e as Errors})
-    }
-  }
-
-  return (
-    <div>
-      <Topbar title={<>Sign in to your Account</>} />
-
-      <form onSubmit={onSubmit}>
-        <div>
-          <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)}
-            placeholder="Your email address..." />
-        </div>
-        <div>
-          <div class="flex justify-between"> 
-            <label for="password">Password</label>
-            <Link to="/reset" class="label underline2">Forgot?</Link>
-          </div>
-          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)}/>
-        </div>
-        
-        <div class="mb-14">
-          Don&apos;t have an account? You can <Link to="/signup" class="underline2 is-active">sign up here</Link>.
-          <FormError state={state} className="pt-2" />
-        </div>
-
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Sign In</Button>
-      </form>
-    </div>
-  )
-}