Custom Login By Portal

[czcpf]

Hello,

I am trying to achieve the following

portal A
has login with an extra field on the login window (let’s suppose its a boolean field called isModeB

portal B
Normal login window

logic
from portal A login window,

if user toggles isModeB to true, upon login it would actually login to portal B

the idea is a single user is assigned to both portals in the crm but from the main portal they can choose to login to the other instead of having to go to portalB url.

Alternatively, I would be ok if I could just put a link on portalA login window (ie. To login to portalB click here) and that link would take them to the other portal url.

Questions :

What scripts control these things ? I’m assuming from the portal login script I can somehow determine what portal it’s loading and put appropriate logic in there ? This must be already done to some extent because we can specify a different logo for each portal we create in crm GUI.

I don’t need a full example just someone please point me in the right direction.

thank you in advance.

[czcpf]

Well, I did some work today to get this accomplished. I went ahead and implemented the 'Alternative' idea specified above. So the login window a link to login to the other portal. See example below. If anyone knows how to accomplish the first idea (where you select a field value) to decide which one to login to please post here. I can't quite figure out how to direct the login to the other portal based on some field value because I don't quite understand how to route it to another portal. This is the next best user friendly thing I could come up with.

kuddos to telecastg whose post pointed me in the right direction.


/Resources/clientDefs/App.json

{
    "loginView" : "custom:views/login"
}​

/client/custom/src/views/login.js

define('custom:views/login', 'views/login', function (Dep) {

return Dep.extend({

// specify your custom template
template: 'custom:login',

// specify your own custom values for any custom placeholders that you are including in the template
// in this example, a background image, company name, custom button for self-registration and captcha are included
landingPageData: {
    clientPortalUrl: '/portal',
    inspectorPortalUrl: '/portal/inspector',
    currentPortalUrl: null,
},

data: function() {
    let data = Dep.prototype.data.call(this);
    data.clientPortalUrl = this.landingPageData.clientPortalUrl;
    data.inspectorPortalUrl = this.landingPageData.inspectorPortalUrl;
    data.currentPortalUrl = this.getCurrentPortalUrl();
    return data;
},

setup: function () {
    Dep.prototype.setup.call(this);
},

getCurrentPortalUrl: function () {
    let currentUrl = window.location.href;
    let currentPortalUrl = null;

    if( currentUrl.toLowerCase().includes(this.landingPage Data.clientPortalUrl.toLowerCase()) ) {
        currentPortalUrl = this.landingPageData.clientPortalUrl;
    }
    if (currentUrl.toLowerCase().includes(this.landingPag eData.inspectorPortalUrl.toLowerCase())) {
        currentPortalUrl = this.landingPageData.inspectorPortalUrl;
    }
    return currentPortalUrl;
}

});

});​

/client/custom/res/templates/login.tpl

<div class="container content">
<div class="container-centering">
<div id="login" class="panel panel-default block-center-sm">
<div class="panel-heading">
{{#ifEqual currentPortalUrl inspectorPortalUrl}}
<div class="portal-heading pull-right margin" style="margin-right:4px;">
<span class="short-label" title="Inspector Login" style="color: #a4c5e0">
<span class="fas fa-2x fa-search"> Inspector Login</span>
</span>
</div>
{{/ifEqual}}
{{#ifEqual currentPortalUrl clientPortalUrl}}
<div class="portal-heading pull-right margin" style="margin-right:4px;">
<span class="short-label" title="Client Login" style="color: #a4c5e0">
<span class="fas fa-2x fa-user"> Client Login</span>
</span>
</div>
{{/ifEqual}}
<div class="logo-container">
<img src="{{logoSrc}}" class="logo">
</div>
</div>
<div class="panel-body{{#if anotherUser}} another-user{{/if}}">
<div class="">
<form id="login-form">
{{#if hasSignIn}}
<div class="cell" data-name="sign-in">
{{#if hasFallback}}
<div class="pull-right">
<a
role="button"
tabindex="0"
class="btn btn-link btn-icon"
data-action="showFallback"
><span class="fas fa-chevron-down"></span></a>
</div>
{{/if}}
<button
class="btn btn-default btn-x-wide"
id="sign-in"
type="button"
>{{signInText}}</button>
</div>
{{/if}}
<div class="form-group cell" data-name="username">
<label for="field-username">{{translate 'Username'}}</label>
<input
type="text"
name="username"
id="field-userName"
class="form-control"
autocapitalize="off"
spellcheck="false"
tabindex="1"
autocomplete="username"
maxlength="255"
>
</div>
<div class="form-group cell" data-name="password">
<label for="login">{{translate 'Password'}}</label>
<input
type="password"
name="password"
id="field-password"
class="form-control"
tabindex="2"
autocomplete="current-password"
maxlength="255"
>
</div>
{{#if anotherUser}}
<div class="form-group cell">
<label>{{translate 'Log in as'}}</label>
<div>{{anotherUser}}</div>
</div>
{{/if}}
<div class="margin-top-2x cell" data-name="submit">
{{#if showForgotPassword}}
<a
role="button"
class="btn btn-link btn-text btn-text-hoverable btn-sm pull-right margin-top-sm"
data-action="passwordChangeRequest"
tabindex="4"
>{{translate 'Forgot Password?' scope='User'}}</a>{{/if}}
<button
type="submit"
class="btn btn-primary btn-s-wide"
id="btn-login"
tabindex="3"
>{{logInText}}</button>
</div>
</form>
</div>
</div>
{{#ifEqual currentPortalUrl clientPortalUrl}}
<div class="panel-body{{#if anotherUser}} another-user{{/if}}">
<div class="">
<div class="margin-top-2x cell">
<a href="{{inspectorPortalUrl}}" class="nav-link pull-right margin-top-sm" style="border-color: #a4c5e0">
<span class="short-label" title="Inspector Mode Login" style="color: #a4c5e0">
<span class="fas fa-2x fa-search"></span>
</span>
<span class="full-label">Inspector Mode Login</span>
</a>

</div>
</div>
</div>
{{/ifEqual}}
{{#ifEqual currentPortalUrl inspectorPortalUrl}}
<div class="panel-body{{#if anotherUser}} another-user{{/if}}">
<div class="">
<div class="margin-top-2x cell">
<a href="{{clientPortalUrl}}" class="nav-link pull-right margin-top-sm" style="border-color: #a4c5e0">
<span class="short-label" title="Client Mode Login" style="color: #a4c5e0">
<span class="fas fa-2x fa-user"></span>
</span>
<span class="full-label">Client Mode Login</span>
</a>

</div>
</div>
</div>
{{/ifEqual}}
</div>
</div>
</div>
<footer>{{{footer}}}</footer>​

[yuri]

Specifying the custom "loginView" is not fully upgrade safe way. Just an information for whomever decides to do it.

[yuri]

To minimize chances of compatibility breaks when extending something, one should strive to preserve all the original logic is being called and the template is not rewritten. DOM manipulation in the afterRender method is a solution.

For login form, one can create a custom authentication with the custom handler: https://docs.espocrm.com/development...methods/#login. The way the OIDC login works in Espo.

[yuri]

BTW "loginView" is not documented parameter, hence it's recommended to avoid using it (as any not documented ones).

[czcpf]

Thanks. I will plan on restructuring my custom login.js to use DOM manipulation instead. How else would you suggest achieving what I'm trying to accomplish here without specifying "loginView" ?