@laimoon/auth v2.4.7
Laimoon Auth UI Package
This JS package provides an easy way to integrate auth popup inside any laimoon's project.
The back-end logic is handled by profiles.laimoon.com
.
Get Started
- Install the pacakge via
npm
:
npm i @laimoon/auth --save
- Install webpack or any bundler you want, I suggest using Laravel Mix since it wraps webpack's complixity and let you focus on work:
npm install cross-env laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./
- Update your
webpack.mix.js
to the following:
const mix = require('laravel-mix');
mix.js('src/js/auth.js','webroot/js');
- Create a JS file under
src/js/auth.js
and put the following:
require('@laimoon/auth');
- Add the following scrips into your
package.json
:
{
...
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
...
}
- Compile your JS file
auth.js
for production:
npm run prod
- Add the generated
webroot/js/auth.js
into your HTML and then add the following VueJs component into the first element od the body:
<body>
<div id="app">
<laimoon-auth referal-code="<?php echo $this->Session->read(‘referalCode’); ?>"
source="courses"
linkedin-redirect="<?php echo Configure::read(‘Urls.profiles’); ?>/profiles/linkedin"
back-end-url="<?php echo Configure::read(‘Urls.profiles’); ?>"
manage-profile-url="<?php echo Configure::read(‘Urls.job’); ?>/manage"
></laimoon-auth>
</div>
...
</body>
- Once done, you'll have a global object
Auth
you can consume to open and close the auth popup whenever you want:
The available methods:
Auth.login(); // will open the login UI
Auth.register(); // will open the register UI
Auth.close(); // will close the current open auth popup
Development
This projects uses webpack with the help of Laravel mix, you can refer to webpack config inside webpack.mix.js
for more details.
To rebuild the project during development with watcher:
npm run watch
To rebuild the project with minification for production:
npm run prod
To test your work locally while developing it, you can link the package using npm link:
This step is helpful instead of pushing your developemnt work to npm and then pull it back to any project so that you can save time.
- In thus repo, run:
npm link
- In your test projects, use:
npm link laimoon-auth
Testing
npm run test
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago