@enso-ui/auth 3.0.0 → 3.1.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -25,4 +25,4 @@ Thank you to all the users who already contributed to Enso!
 
 ## License
 
-[ISC](https://opensource.org/licenses/ISC)
+[MIT](LICENSE)

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@enso-ui/auth",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "UI auth package",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enso-ui/auth.git"
@@ -15,32 +12,21 @@
     "vue"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/auth/issues"
   },
   "homepage": "https://github.com/enso-ui/auth#readme",
   "dependencies": {
-    "@enso-ui/directives": "^2.0",
-    "@enso-ui/forms": "^3.0",
-    "@enso-ui/laravel-validation": "^2.0",
-    "@enso-ui/ui": "^6.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@enso-ui/directives": "^3.1.0",
+    "@enso-ui/forms": "^4.1.0",
+    "@enso-ui/laravel-validation": "^3.1.0",
+    "@enso-ui/ui": "^7.1.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
+    "pinia": "^3.0.3",
     "vue": "^3.0",
-    "vuex": "^4.0.0",
     "zxcvbn": "^4.4.2"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^6.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^8.0.3"
   }
 }

package/src/bulma/layouts/Auth.vue

@@ -1,9 +1,10 @@
 <template>
-    <section class="hero is-fullheight is-primary is-bold">
-        <div class="hero-body">
-            <div class="container">
+    <section class="hero is-fullheight auth-shell">
+        <div class="hero-body auth-shell-body">
+            <div class="container auth-shell-container">
                 <core-auth v-slot="{ guestState }">
-                    <router v-if="guestState"/>
+                    <router-view v-if="guestState"
+                        :key="$route.path"/>
                 </core-auth>
             </div>
         </div>
@@ -11,12 +12,67 @@
 </template>
 
 <script>
-import Router from '@enso-ui/ui/src/bulma/pages/Router.vue';
 import CoreAuth from '../../core/layouts/Auth.vue';
 
 export default {
     name: 'Auth',
 
-    components: { CoreAuth, Router },
+    components: { CoreAuth },
 };
 </script>
+
+<style lang="scss">
+    .auth-shell {
+        position: relative;
+        overflow: hidden;
+        background:
+            radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.2), transparent 26%),
+            radial-gradient(circle at 84% 14%, rgba(123, 92, 255, 0.16), transparent 28%),
+            radial-gradient(circle at 78% 74%, rgba(255, 176, 0, 0.13), transparent 24%),
+            linear-gradient(135deg, #041a2e 0%, #0c3854 32%, #0f8e96 70%, #18d2c5 100%);
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            inset: auto;
+            pointer-events: none;
+        }
+
+        &::before {
+            top: -12rem;
+            left: -8rem;
+            width: 34rem;
+            height: 34rem;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 66%);
+            filter: blur(14px);
+        }
+
+        &::after {
+            right: -10rem;
+            bottom: -10rem;
+            width: 38rem;
+            height: 38rem;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(2, 12, 27, 0.42) 0%, rgba(2, 12, 27, 0) 68%);
+            filter: blur(18px);
+        }
+    }
+
+    .auth-shell-body {
+        position: relative;
+        z-index: 1;
+        min-height: 100vh;
+    }
+
+    .auth-shell-container {
+        position: relative;
+    }
+
+    @media screen and (max-width: 768px) {
+        .auth-shell-body {
+            min-height: 100vh;
+        }
+    }
+</style>

package/src/bulma/pages/auth/Login.vue

@@ -9,18 +9,21 @@
         <remember v-model="payload.remember"
             v-if="!isWebview"/>
         <template #footer>
-            <router-link class="is-pulled-right"
-                :to="{ name: 'password.email' }">
-                {{ i18n('Forgot password') }}
-            </router-link>
-            <div class="is-clearfix"/>
+            <div class="auth-footer is-flex is-justify-content-flex-end mt-3">
+                <router-link class="auth-footer-link is-flex is-align-items-center"
+                    :to="{ name: 'password.email' }">
+                    {{ i18n('Forgot password') }}
+                </router-link>
+            </div>
         </template>
     </auth-form>
 </template>
 
 <script>
-import { mapState, mapGetters, mapMutations } from 'vuex';
 import Errors from '@enso-ui/laravel-validation';
+import { app } from '@enso-ui/ui/src/pinia/app';
+import { layout } from '@enso-ui/ui/src/pinia/layout';
+import { auth } from '../../../pinia/auth';
 import AuthForm from './components/AuthForm.vue';
 import Email from './components/fields/Email.vue';
 import Password from './components/fields/Password.vue';
@@ -45,14 +48,24 @@ export default {
     }),
 
     computed: {
-        ...mapState(['meta']),
-        ...mapGetters(['isWebview']),
+        meta() {
+            return app().meta;
+        },
+        isWebview() {
+            return app().isWebview;
+        },
     },
 
     methods: {
-        ...mapMutations('auth', ['login']),
-        ...mapMutations('layout', ['home']),
-        ...mapMutations(['setShowQuote']),
+        login() {
+            auth().login();
+        },
+        home(value) {
+            layout().setHome(value);
+        },
+        setShowQuote(value) {
+            app().setShowQuote(value);
+        },
         init() {
             this.setShowQuote(this.meta.showQuote);
 

package/src/bulma/pages/auth/components/AuthForm.vue

@@ -2,7 +2,7 @@
     <div class="login"
         :class="$attrs.class">
         <div class="box p-3">
-            <div class="logo mb-3 is-flex">
+            <div class="logo mb-3 is-flex is-justify-content-center">
                 <figure class="image is-48x48  is-clickable is-flex"
                     @click="$router.push({ name: 'login' }).catch(routerErrorHandler)">
                     <img src="/images/logo.svg"
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import Errors from '@enso-ui/laravel-validation';
+import { app } from '@enso-ui/ui/src/pinia/app';
 import Submit from './Submit.vue';
 
 export default {
@@ -47,7 +47,9 @@ export default {
     }),
 
     computed: {
-        ...mapState(['meta']),
+        meta() {
+            return app().meta;
+        },
     },
 };
 </script>
@@ -57,16 +59,147 @@ export default {
         max-width: 400px;
         margin: auto;
 
-        .logo {
-            justify-content: center;
+        .box {
+            border-radius: 1.25rem;
+            border: 1px solid rgba(255, 255, 255, 0.5);
+            background: rgba(255, 255, 255, 0.92);
+            box-shadow: 0 24px 70px rgba(7, 22, 39, 0.22);
+            backdrop-filter: blur(14px);
+        }
+
+        form {
+            margin-bottom: 0;
+        }
+
+        .control .input,
+        .control.has-icons-left .input,
+        .control.has-icons-right .input {
+            background-color: #f7fbff;
+            border-color: #c6d3e1;
+            color: #0f172a;
+
+            &::placeholder {
+                color: #64748b;
+            }
+        }
+
+        .control .icon {
+            color: #64748b;
+        }
+
+        .control .icon.is-left {
+            color: #475569 !important;
+        }
+
+        .checkbox,
+        .help,
+        .label {
+            color: #1e293b;
+        }
+
+        .auth-footer-link {
+            color: #334155;
+            font-weight: 600;
+            text-decoration: none;
+            text-shadow: none;
+
+            &:hover {
+                color: #0f172a;
+            }
         }
 
         .is-spaced {
             margin-right: 1.6em;
         }
+    }
+
+    [data-theme='dark'] {
+        .login {
+            .box {
+                border-color: rgba(107, 114, 128, 0.3);
+                background: rgba(18, 24, 35, 0.9);
+                box-shadow: 0 28px 80px rgba(1, 6, 16, 0.38);
+            }
+
+            .control .input,
+            .control.has-icons-left .input,
+            .control.has-icons-right .input {
+                background-color: rgba(10, 14, 22, 0.9);
+                border-color: #4b5563;
+                color: #f3f6fb;
+
+                &::placeholder {
+                    color: #94a3b8;
+                }
+            }
+
+            .control .icon {
+                color: #94a3b8;
+            }
+
+            .control .icon.is-left {
+                color: #cbd5e1 !important;
+            }
+
+            .checkbox,
+            .help,
+            .label {
+                color: #e5ebf3;
+            }
+
+            .auth-footer-link {
+                color: #d7deea;
+
+                &:hover {
+                    color: #f3f6fb;
+                }
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        html:not([data-theme]) {
+            .login {
+                .box {
+                    border-color: rgba(107, 114, 128, 0.3);
+                    background: rgba(18, 24, 35, 0.9);
+                    box-shadow: 0 28px 80px rgba(1, 6, 16, 0.38);
+                }
+
+                .control .input,
+                .control.has-icons-left .input,
+                .control.has-icons-right .input {
+                    background-color: rgba(10, 14, 22, 0.9);
+                    border-color: #4b5563;
+                    color: #f3f6fb;
+
+                    &::placeholder {
+                        color: #94a3b8;
+                    }
+                }
+
+                .control .icon {
+                    color: #94a3b8;
+                }
+
+                .control .icon.is-left {
+                    color: #cbd5e1 !important;
+                }
+
+                .checkbox,
+                .help,
+                .label {
+                    color: #e5ebf3;
+                }
+
+                .auth-footer-link {
+                    color: #d7deea;
 
-        figure.logo {
-            display: inline-block;
+                    &:hover {
+                        color: #f3f6fb;
+                    }
+                }
+            }
         }
     }
 </style>

package/src/bulma/pages/auth/components/PasswordStrength.vue

@@ -1,8 +1,7 @@
 <template>
-    <transition enter-active-class="zoomIn"
-        leave-active-class="zoomOut">
+    <transition enter-active-class="animate__animated animate__zoomIn"
+        leave-active-class="animate__animated animate__zoomOut">
         <svg v-if="password"
-            class="animated"
             width="100%"
             height="5"
             version="1.1"

package/src/bulma/pages/auth/components/Submit.vue

@@ -1,23 +1,20 @@
 <template>
-    <button class="button is-primary is-fullwidth"
+    <button class="button is-dark is-fullwidth"
         :class="{ 'is-loading': loading }"
         type="submit"
         @click.prevent="submit">
         <span class="icon is-small">
-            <fa :icon="icon"/>
+            <fa :icon="resolvedIcon"/>
         </span>
         <span>{{ i18n(action) }}</span>
     </button>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { app } from '@enso-ui/ui/src/pinia/app';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
 
-library.add(faLock, faUser);
-
 export default {
     name: 'Submit',
 
@@ -31,7 +28,7 @@ export default {
             required: true,
         },
         icon: {
-            type: String,
+            type: [String, Object],
             required: true,
         },
         endpoint: {
@@ -51,7 +48,19 @@ export default {
     }),
 
     computed: {
-        ...mapGetters(['isWebview']),
+        resolvedIcon() {
+            if (typeof this.icon !== 'string') {
+                return this.icon;
+            }
+
+            return {
+                lock: faLock,
+                user: faUser,
+            }[this.icon] ?? this.icon;
+        },
+        isWebview() {
+            return app().isWebview;
+        },
         config() {
             return this.isWebview
                 ? { headers: { isWebview: true } }

package/src/bulma/pages/auth/components/fields/Confirmation.vue

@@ -9,18 +9,21 @@
                 @input="$emit('update:modelValue', $event.target.value);
                     errors.clear('password')">
             <span class="icon is-small is-left">
-                <fa icon="lock"/>
+                <fa :icon="faLock"/>
             </span>
             <reveal-password :meta="meta"
-                :class="{ 'mr-5': match || successful || errors.has('password')}"
+                :class="[
+                    'has-text-dark',
+                    { 'mr-5': match || successful || errors.has('password') }
+                ]"
                 v-if="modelValue && !successful"/>
             <span v-if="errors.has('password')"
                 class="icon is-small is-right has-text-danger">
-                <fa icon="exclamation-triangle"/>
+                <fa :icon="faExclamationTriangle"/>
             </span>
             <span v-if="match && !errors.has('password') || successful"
                 class="icon is-small is-right has-text-success">
-                <fa icon="check"/>
+                <fa :icon="faCheck"/>
             </span>
         </div>
         <p class="has-text-danger is-size-7"
@@ -32,13 +35,10 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faExclamationTriangle, faLock } from '@fortawesome/free-solid-svg-icons';
 import { focus } from '@enso-ui/directives';
 import RevealPassword from '@enso-ui/forms/src/bulma/parts/RevealPassword.vue';
 
-library.add(faCheck, faExclamationTriangle, faLock);
-
 export default {
     name: 'Confirmation',
 
@@ -62,6 +62,9 @@ export default {
     emits: ['update:modelValue'],
 
     data: () => ({
+        faCheck,
+        faExclamationTriangle,
+        faLock,
         meta: {
             content: 'password',
         },

package/src/bulma/pages/auth/components/fields/Email.vue

@@ -10,15 +10,15 @@
                 autocomplete="email"
                 @input="$emit('update:modelValue', $event.target.value); errors.clear('email')">
             <span class="icon is-small is-left">
-                <fa icon="envelope"/>
+                <fa :icon="faEnvelope"/>
             </span>
             <span v-if="successful"
                 class="icon is-small is-right has-text-success">
-                <fa icon="check"/>
+                <fa :icon="faCheck"/>
             </span>
             <span v-if="errors.has('email')"
                 class="icon is-small is-right has-text-danger">
-                <fa icon="exclamation-triangle"/>
+                <fa :icon="faExclamationTriangle"/>
             </span>
         </div>
         <p class="has-text-danger is-size-7"
@@ -30,12 +30,9 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faExclamationTriangle, faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import { focus } from '@enso-ui/directives';
 
-library.add(faCheck, faExclamationTriangle, faEnvelope);
-
 export default {
     name: 'Email',
 
@@ -59,5 +56,11 @@ export default {
             return this.state.successful;
         },
     },
+
+    data: () => ({
+        faCheck,
+        faEnvelope,
+        faExclamationTriangle,
+    }),
 };
 </script>

package/src/bulma/pages/auth/components/fields/Password.vue

@@ -9,18 +9,21 @@
                 :autocomplete="autocomplete"
                 @input="$emit('update:modelValue', $event.target.value); errors.clear('password')">
             <span class="icon is-small is-left">
-                <fa icon="lock"/>
+                <fa :icon="faLock"/>
             </span>
             <reveal-password :meta="meta"
-                :class="{ 'is-spaced': successful || errors.has('password') }"
+                :class="[
+                    'has-text-dark',
+                    { 'is-spaced': successful || errors.has('password') }
+                ]"
                 v-if="modelValue && !successful"/>
             <span v-if="successful"
                 class="icon is-small is-right has-text-success">
-                <fa icon="check"/>
+                <fa :icon="faCheck"/>
             </span>
             <span v-if="errors.has('password')"
                 class="icon is-small is-right has-text-danger">
-                <fa icon="exclamation-triangle"/>
+                <fa :icon="faExclamationTriangle"/>
             </span>
             <slot name="password-strength"
                 :password="modelValue"
@@ -35,13 +38,10 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faExclamationTriangle, faLock } from '@fortawesome/free-solid-svg-icons';
 import { focus } from '@enso-ui/directives';
 import RevealPassword from '@enso-ui/forms/src/bulma/parts/RevealPassword.vue';
 
-library.add(faExclamationTriangle);
-
 export default {
     name: 'Password',
 
@@ -65,6 +65,9 @@ export default {
     emits: ['update:modelValue'],
 
     data: () => ({
+        faCheck,
+        faExclamationTriangle,
+        faLock,
         meta: {
             content: 'password',
         },

package/src/bulma/register.js

@@ -0,0 +1,5 @@
+import { auth } from '../pinia/auth';
+
+export default () => {
+    auth();
+};

package/src/bulma/routes/auth.js

@@ -1,11 +1,10 @@
-import store from '@enso-ui/ui/src/core/services/store';
-
 const Login = () => import('../pages/auth/Login.vue');
 const Email = () => import('../pages/auth/password/EmailResetLink.vue');
 const Reset = () => import('../pages/auth/password/Reset.vue');
+import { auth } from '../pinia/auth';
 
 const redirect = (to, from, next) => {
-    if (store.state.auth.isAuth) {
+    if (auth().isAuth) {
         next({ path: '/' });
     } else {
         next();

package/src/core/layouts/Auth.vue

@@ -1,24 +1,27 @@
 <script>
-import { mapState, mapActions } from 'vuex';
+import { loadGuestState } from '@enso-ui/ui/src/pinia/loadState';
 
 export default {
     name: 'Auth',
 
-    computed: {
-        ...mapState(['guestState']),
-    },
+    data: () => ({
+        ready: false,
+    }),
 
-    created() {
-        this.loadGuestState();
+    async created() {
+        await this.loadGuestState();
+        this.ready = true;
     },
 
     methods: {
-        ...mapActions(['loadGuestState']),
+        loadGuestState() {
+            return loadGuestState();
+        },
     },
 
     render() {
         return this.$slots.default({
-            guestState: this.guestState,
+            guestState: this.ready,
         });
     },
 };

package/src/pinia/auth.js

@@ -0,0 +1,36 @@
+import axios from 'axios';
+import { defineStore } from 'pinia';
+
+const getRouter = () => import('@enso-ui/ui/src/core/services/router');
+
+export const auth = defineStore('auth', {
+    state: () => ({
+        isAuth: localStorage.getItem('isAuth') === 'true',
+        intendedRoute: null,
+        intendedPath: null,
+    }),
+
+    actions: {
+        login() {
+            this.isAuth = true;
+            localStorage.setItem('isAuth', true);
+        },
+        setIntendedRoute(value) {
+            this.intendedRoute = value;
+        },
+        setIntendedPath(value) {
+            this.intendedPath = value;
+        },
+        logoutState() {
+            this.isAuth = false;
+            localStorage.setItem('isAuth', false);
+            localStorage.removeItem('authorization');
+        },
+        async logout() {
+            await axios.post('/api/logout');
+            this.logoutState();
+            const { default: router } = await getRouter();
+            router.push({ name: 'login' });
+        },
+    },
+});

package/src/store/auth.js

@@ -1,32 +0,0 @@
-import axios from 'axios';
-import router from '@enso-ui/ui/src/core/services/router';
-
-export const state = {
-    isAuth: localStorage.getItem('isAuth') === 'true',
-    intendedRoute: null,
-    intendedPath: null,
-};
-
-export const mutations = {
-    login(state) {
-        state.isAuth = true;
-        localStorage.setItem('isAuth', true);
-    },
-    logout(state) {
-        state.isAuth = false;
-        localStorage.setItem('isAuth', false);
-        localStorage.removeItem('authorization');
-    },
-    setIntendedRoute: (state, value) => (state.intendedRoute = value),
-    setIntendedPath: (state, value) => (state.intendedPath = value),
-};
-
-export const actions = {
-    logout({ commit }) {
-        axios.post('/api/logout').then(() => {
-            commit('appState', false, { root: true });
-            commit('logout');
-            router.push({ name: 'login' });
-        });
-    },
-};