sf-login
v0.4.36
Published
login page for sf wewbsites
Readme
sf-login
Get the login app and deploy it
yarn add sf-login
yarn add [email protected] [email protected] @vue/[email protected] @vue/[email protected]build the app :
yarn build-login path/to/myfolder cleanpath/to/myfolder : from root directory clean : if defined, will clear target folder before building
set template file :
<body>
<div id="app"></div>
<script src="path/to/my/folder?"></script>
<script>
window.onload = function () {
var sfLogin = new LoginApp('path/to/my/folder').initApp()
}
</script>
</body>customize app
Configure sf-login.config.js
There are two exports in the sf-login.config.js (automatically created in the root directory if missing) file, the default defines theme options and the "createAccount" defines input options for the account creation form.
Theme export
export default {
name: 'webpage title',
logo: 'path/to/logo',
background: 'path/to/background',
scheme: 'dark',
colors: {
accent: 'white',
primary: '#fffff',
highlight: 'rgb(255,255,255)',
'accent-light': 'rgba(255,255,255,0.5)',
'primary-light': 'linear-gradient(from left, #fff, #000)',
'primary-lighter': 'linear-gradient(from left, #fff, #000)'
},
supportedLanguages: ['fr', 'en'],
accountCreation: true,
paths: {
preauth: 'path/to/preauth',
auth: 'path/to/auth',
forgetpass: 'path/to/forgetpass',
create: 'path/to/create',
redirect: 'redirect/after/auth'
}
}name :
STRING (optional) forces document title if defined
logo :
STRING (required) path to logo
background :
STRING (required) path to background image
scheme :
STRING (optional) if set to dark, theme will use white text, else black text will be used
colors :
STRING (optional) define the 6 colors of the app (if undefined, default colors will be used)
supportedLanguages :
STRING (required) defines options to be displayed in language picker (note that they should match translations object property names)
accountCreation :
BOOLEAN (required) is account creation enabled for this theme
paths :
OBJECT (required) contains routes for each api call
path[routeName] :
STRING (required) define which url is used for api calls (preauth, auth, forgetpass, create) and redirection after auth
Create account export
export const createAccount = {
data () {
return {
inputsToValidate: ['myInput'],
inputs: {
createAccount: {
myInput: {
value: '',
state: null,
type: 'text',
classes: 'css-class other-css-class',
validate: 'inputValidationFunction',
comparator: 'myOtherInput'
},
myOtherInput: {
value: 'defaultValue',
state: 'valid',
type: 'email',
classes: 'css-class other-css-class',
validate: 'otherInputValidationFunction'
}
}
},
texts: {
en: {
myInput: 'myInputPlaceholder'
},
fr: {
myInput: 'placeholderDeMonChampsDeTexte'
}
}
}
}
}inputs.createAccount :
OBJECT (optional) object containing all inputs that will be rendered in the account creation form
inputs.createAccount.myInput :
OBJECT (optional) object containing parameters of the input that will be rendered in the account creation form
inputs.createAccount.myInput.value :
STRING (required) input default value (leave as '' if you want it empty)
inputs.createAccount.myInput.state :
STRING (required) can be null, 'valid' or 'wrong'. if 'validate' property is defined, state property will be updated on keyup and 'valid' state will be required in order to validate form
inputs.createAccount.myInput.type :
STRING (required) HTML5 input type (eg: 'text')
inputs.createAccount.myInput.classes :
STRING (optional) a string containing all supplementary css classes, separated by spaces
inputs.createAccount.myInput.validate :
STRING (optional) name of the function to be used for validation WARNING: validation functions are defined in src/js/fieldValidation.js, you can write new functions in this file under new export names, but don't forget to import them in src/vue/CreateAccount.vue input value is passed as parameter in validation functions
inputs.createAccount.myInput.comparator :
STRING (optional) name of another input which value will be passed to your validation function as a second parameter
inputsToValidate :
ARRAY of STRING (optional) a list of inputs that should be "valid" in order to send a form, input objects should have a "validation" property
texts :
OBJECT (optional) list of languages, should correspond "supportedLanguages" naming
texts.myLanguage :
OBJECT (optional) list of strings that'll be translated depending on selected language, property name should correspond input name, string will be used as matching input placeholder
Modify the login app
Clone this repository, then install dependencies :
yarnCompiles and hot-reloads for development :
yarn serveRun your tests :
yarn testTo properly update this project for production :
- 1 - commit and push project
- 2 - publish new version of package :
yarn publish