[feat] add svelte template (#115)

* chore(mellow-vue): remove .vue in import

* feat(mellow-svelte): update dependencies

* feat(mellow-svelte): add routes

* feat(mellow-svelte): add actions

* feat(mellow-svelte): add custom config

* feat(mellow-svelte): add policies

* feat(mellow-svelte): setup mail

* fix(mellow-vue): resolve double wrapping of Link

* fix(mellow-vue): remove wrapping with ref

* feat(mellow-svelte): add layout page

* feat(mellow-svelte): add logic for url 'back'

* fix(mellow-react): add Tailwind content config to match project

* fix(mellow-vue): add Tailwind content config to match project

* fix(mellow-svelte): add Tailwind content config to match project

* feat(mellow-svelte): add policies

* feat(mellow-react): setup wish

* feat(mellow-svelte): setup wish

* feat(mellow-svelte): add prettier plugin for svelte

* feat(mellow-svelte): remove unneeded pages

* feat(mellow-svelte): added homepage

* feat(mellow-vue): remove unused Link

* feat(mellow-react): remove unused Link

* feat(mellow-react): remove duplicate

* chore(mellow-react): format

* feat(mellow-svelte): add email templates

* chore(mellow-svelte): remove deprecated back

* feat: update jsconfig

* chore(mellow-svelte): remove types

* feat(mellow-svelte): add GoogleButton component

* feat(mellow-svelte): add button

* feat(mellow-svelte): add InputBase

* feat(mellow-svelte): add InputText

* chore(mellow-vue): add extension in import

* chore(mellow-react): add extension in imports

* chore(mellow-vue): add missing extension

* feat(mellow-svelte): add InputEmail

* feat(mellow-svelte): add InputPassword

* feat(mellow-svelte): add user model

* feat(mellow-svelte): fix form inputs

* fix(mellow-svelte): forward props

* feat(mellow-vue): remove optional access

* feat(mellow-svelte): add login page

* feat(mellow-vue): add Vue as dependency

* feat(mellow-svelte): add Svelte as dependency

* feat(mellow-svelte): setup test

* feat(mellow-vue): use testing environment

* feat(mellow-svelte): add testing environment

* feat: add columnName to global attributes

* feat(mellow-svelte): use good ol function declaration

* feat(mellow-svelte): add  signup page

* feat(mellow-svelte): add helpers

* chore(mellow-svelte): install sails-hook-organics

* feat(mellow-svelte): add custom hook

* fix(mellow-svelte): fix wrong identifier

* feat(mellow-svelte): add check-email page

* feat(mellow-svelte): add success page

* feat(mellow-svelte): add link-expired page

* feat(mellow-svelte): fix typo

* feat: change message on success

* feat(mellow-svelte): add forgot-password page

* feat(mellow-vue): fix grammar

* feat(mellow-vue): remove unused code

* feat(mellow-svelte): add reset-password page

* feat(mellow-svelte): add dashboard page

* feat(mellow-svelte): modify InputButton to have class merge

* chore(mellow-svelte): remove ts comments

* feat(mellow-svelte): modify component to forward on click event to parent

* feat(mellow-svelte): add profile page

templates/mellow-react/api/controllers/auth/view-success.js

@@ -23,7 +23,7 @@ module.exports = {
         pageHeading = 'Email verification successful'
         break
       case 'reset-password':
-        message = 'Password has been successful reset'
+        message = 'Password has been successfully reset'
         pageHeading = 'Password reset successful'
     }
     return {

templates/mellow-react/assets/js/pages/auth/forgot-password.jsx

@@ -1,7 +1,8 @@
 import { Link, Head, useForm } from '@inertiajs/react'
-import InputEmail from '@/components/InputEmail'
-import InputButton from '@/components/InputButton'
+import InputEmail from '@/components/InputEmail.jsx'
+import InputButton from '@/components/InputButton.jsx'
 import { useMemo } from 'react'
+
 export default function ForgotPassword() {
   const { data, setData, ...form } = useForm({
     email: ''

templates/mellow-react/assets/js/pages/auth/link-expired.jsx

@@ -1,4 +1,5 @@
 import { Link, Head } from '@inertiajs/react'
+
 export default function LinkExpired() {
   return (
     <>

templates/mellow-react/assets/js/pages/auth/login.jsx

@@ -1,10 +1,10 @@
 import { Link, Head, useForm } from '@inertiajs/react'
 import { useState, useMemo } from 'react'
 
-import InputEmail from '@/components/InputEmail'
-import InputPassword from '@/components/InputPassword'
-import InputButton from '@/components/InputButton'
-import GoogleButton from '@/components/GoogleButton'
+import InputEmail from '@/components/InputEmail.jsx'
+import InputPassword from '@/components/InputPassword.jsx'
+import InputButton from '@/components/InputButton.jsx'
+import GoogleButton from '@/components/GoogleButton.jsx'
 
 export default function Login() {
   const { data, setData, ...form } = useForm({

templates/mellow-react/assets/js/pages/auth/reset-password.jsx

@@ -2,6 +2,7 @@ import { Link, Head, useForm } from '@inertiajs/react'
 import { useMemo } from 'react'
 import InputPassword from '@/components/InputPassword'
 import InputButton from '@/components/InputButton'
+
 export default function ResetPassword({ token }) {
   const { data, setData, ...form } = useForm({
     token,

templates/mellow-react/assets/js/pages/auth/signup.jsx

@@ -1,11 +1,11 @@
 import { Link, Head, useForm } from '@inertiajs/react'
 import { useMemo } from 'react'
 
-import InputText from '@/components/InputText'
-import InputEmail from '@/components/InputEmail'
-import InputPassword from '@/components/InputPassword'
-import InputButton from '@/components/InputButton'
-import GoogleButton from '@/components/GoogleButton'
+import InputText from '@/components/InputText.jsx'
+import InputEmail from '@/components/InputEmail.jsx'
+import InputPassword from '@/components/InputPassword.jsx'
+import InputButton from '@/components/InputButton.jsx'
+import GoogleButton from '@/components/GoogleButton.jsx'
 
 export default function Signup() {
   const { data, setData, ...form } = useForm({

templates/mellow-react/assets/js/pages/auth/success.jsx

@@ -35,7 +35,7 @@ export default function Success({ pageTitle, pageHeading, message }) {
 
             <h1 className="text-2xl">{pageHeading}</h1>
             <p className="text-lg text-gray">
-              {message}. Click continue to go to the homepage
+              {message}. Click continue to go to your dashboard.
             </p>
             <Link
               href="/dashboard"

templates/mellow-react/assets/js/pages/dashboard/index.jsx

@@ -1,5 +1,5 @@
 import { Link, Head, usePage } from '@inertiajs/react'
-import AppLayout from '@/layouts/AppLayout'
+import AppLayout from '@/layouts/AppLayout.jsx'
 
 Dashboard.layout = (page) => <AppLayout children={page} />
 export default function Dashboard() {

templates/mellow-react/assets/js/pages/dashboard/profile.jsx

@@ -1,11 +1,11 @@
 import { Link, Head, usePage, useForm, router } from '@inertiajs/react'
 
-import AppLayout from '@/layouts/AppLayout'
+import AppLayout from '@/layouts/AppLayout.jsx'
 
-import InputText from '@/components/InputText'
-import InputPassword from '@/components/InputPassword'
-import InputEmail from '@/components/InputEmail'
-import InputButton from '@/components/InputButton'
+import InputText from '@/components/InputText.jsx'
+import InputPassword from '@/components/InputPassword.jsx'
+import InputEmail from '@/components/InputEmail.jsx'
+import InputButton from '@/components/InputButton.jsx'
 
 Profile.layout = (page) => <AppLayout children={page} />
 export default function Profile() {

templates/mellow-react/assets/js/pages/index.jsx

@@ -1,9 +1,7 @@
-import { Link, Head } from '@inertiajs/react'
-import AppLayout from '@/layouts/AppLayout'
+import { Head } from '@inertiajs/react'
+import AppLayout from '@/layouts/AppLayout.jsx'
 import '~/css/homepage.css'
 
-Index.layout = (page) => <AppLayout children={page} />
-
 Index.layout = (page) => <AppLayout children={page} />
 export default function Index() {
   return (

templates/mellow-react/config/models.js

@@ -65,8 +65,16 @@ module.exports.models = {
    ***************************************************************************/
 
   attributes: {
-    createdAt: { type: 'number', autoCreatedAt: true },
-    updatedAt: { type: 'number', autoUpdatedAt: true },
+    createdAt: {
+      type: 'number',
+      autoCreatedAt: true,
+      columnName: 'created_at'
+    },
+    updatedAt: {
+      type: 'number',
+      autoUpdatedAt: true,
+      columnName: 'updated_at'
+    },
     id: { type: 'number', autoIncrement: true }
     //--------------------------------------------------------------------------
     //  /\   Using MongoDB?

templates/mellow-react/jsconfig.json

@@ -3,7 +3,7 @@
 
   "compilerOptions": {
     "types": ["node"],
-    "typeRoots": ["./types", "./node_modules/@types"],
+    "typeRoots": ["./node_modules/@types"],
     "lib": ["es2016"],
     // silences wrong TS error, we don't compile, we only typecheck
     "outDir": "./irrelevant/unused",
@@ -16,7 +16,8 @@
     "noErrorTruncation": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["assets/js/*"]
+      "@/*": ["assets/js/*"],
+      "~/*": ["assets/*"]
     }
   }
 }

templates/mellow-react/package.json

@@ -6,6 +6,7 @@
   "keywords": [],
   "dependencies": {
     "@inertiajs/react": "^1.2.0",
+    "@sailscasts/sails-hook-node-fetch": "^0.0.3",
     "@sailshq/connect-redis": "^6.1.3",
     "@sailshq/lodash": "^3.10.6",
     "@sailshq/socket.io-redis": "^6.1.2",
@@ -17,7 +18,8 @@
     "sails-hook-mail": "^0.1.0",
     "sails-hook-organics": "^3.0.0",
     "sails-hook-orm": "^4.0.3",
-    "sails-hook-sockets": "^3.0.1"
+    "sails-hook-sockets": "^3.0.1",
+    "sails-hook-wish": "^0.0.9"
   },
   "devDependencies": {
     "@rsbuild/plugin-react": "^1.0.2",

templates/mellow-react/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  content: ['./views/**/*.ejs', './assets/js/**/*.{js,vue,jsx,ts,tsx}'],
+  content: ['./views/**/*.ejs', './assets/js/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       colors: {

templates/mellow-svelte/api/controllers/auth/callback.js

@@ -0,0 +1,91 @@
+module.exports = {
+  friendlyName: 'Callback',
+
+  description: 'Callback auth.',
+
+  inputs: {
+    provider: {
+      isIn: ['google'],
+      required: true
+    },
+    code: {
+      type: 'string',
+      required: true
+    }
+  },
+
+  exits: {
+    success: {
+      responseType: 'redirect'
+    }
+  },
+  fn: async function ({ code, provider }, exits) {
+    const req = this.req
+    const googleUser = await sails.wish.provider(provider).user(code)
+
+    User.findOrCreate(
+      { or: [{ googleId: googleUser.id }, { email: googleUser.email }] },
+      {
+        googleId: googleUser.id,
+        email: googleUser.email,
+        fullName: googleUser.name,
+        googleAvatarUrl: googleUser.picture,
+        googleAccessToken: googleUser.accessToken,
+        googleIdToken: googleUser.idToken,
+        emailStatus: googleUser.verified_email ? 'verified' : 'unverified'
+      }
+    ).exec(async (error, user, wasCreated) => {
+      if (error) throw error
+
+      if (!wasCreated && googleUser.verified_email) {
+        await User.updateOne({ id: user.id }).set({
+          emailStatus: 'verified'
+        })
+      }
+      if (!wasCreated && user.googleId !== googleUser.id) {
+        // Checks if the user email has changed since last log in
+        // And then update the email change candidate which will be used be used to prompt the user to update their email
+        await User.updateOne({ id: user.id }).set({
+          emailChangeCandidate: googleUser.email
+        })
+      }
+      if (!wasCreated && user.email !== googleUser.email) {
+        // Checks if the user email has changed since last log in
+        // And then update the email change candidate which will be used be used to prompt the user to update their email
+        await User.updateOne({ id: user.id }).set({
+          emailChangeCandidate: googleUser.email
+        })
+      }
+
+      // Checks if the user name has changed since last log in
+      // And then update the name if changed
+      if (!wasCreated && user.fullName !== googleUser.name) {
+        await User.updateOne({ id: user.id }).set({
+          fullName: googleUser.name
+        })
+      }
+
+      if (!wasCreated && user.googleAvatarUrl !== googleUser.picture) {
+        await User.updateOne({ id: user.id }).set({
+          googleAvatarUrl: googleUser.picture
+        })
+      }
+
+      if (!wasCreated && user.googleAccessToken !== googleUser.accessToken) {
+        await User.updateOne({ id: user.id }).set({
+          googleAccessToken: googleUser.accessToken
+        })
+      }
+
+      if (!wasCreated && user.googleIdToken !== googleUser.idToken) {
+        await User.updateOne({ id: user.id }).set({
+          googleIdToken: googleUser.idToken
+        })
+      }
+
+      req.session.userId = user.id
+      const urlToRedirectTo = '/dashboard'
+      return exits.success(urlToRedirectTo)
+    })
+  }
+}