Login Page - How to change?

[Heuer_Sven]

Where can I change the login page to adopte to my own CI? I did not find anything in the docs nor in the source code. Magic?

[wlandgraf (Wagner Landgraf)]

What do you mean by CI?
You can modify the style of the login page using custom CSS. You can find more information here:

Sphinx Web Identity Interface (like the embedded one)

This is in our roadmap and we are going to implement it soon. Some of these requests you can also add a feature request for that. Note that many (if not all) of the above you can implement by extending the existing Sphinx user class with your own class and additional properties: Addtional Attributes for User Class - #4 by wlandgraf. CSS is fully customizable so maybe all of the above can be implemented as well. You can completely override the CSS of the full page using the TSphinxConfig.UI…

get the login window displayed in another language?

Changing the login page language should be as simple as setting the UIOptions.DefaultLanguage property in the TSphinxConfig component: [image] But, of course, the translation should be available. For now, there is only English and Brazilian Portuguese, but we intend to add more languages of course, on demand (Swedish translation will be included in next update). To add a new language, it’s relatively easy: all the texts are in JSON files. You can file the portuguese ones in the “languages” fo…

[Heuer_Sven]

CI = corporate identity. Change the logos, add more information, change the color of the page and so on. Just to edit the html code of the page.

[wlandgraf (Wagner Landgraf)]

Exactly, that's what the LoginAppFolder is for. It's possible and actually was designed for that.
Use it to customize the logo, the CSS styles, among other things.

[Heuer_Sven]

Excuse me, but how shoul it work? do I need my own .html file? Whats the name for it in this folder?

This is the main page of the login page in the browser. I have to get rid of all of the foreign links. like

• https://cdn.jsdelivr.net
• https://fonts.googleapis.com/

i really have not idea how to replace it. I was not able to find the ressource for the existing login page.

[wlandgraf (Wagner Landgraf)]

@Heuer_Sven

Excuse me, but how shoul it work?

In the LoginAppFolder you can override all the files served for the web application. You can find the requested files and their content if you inspect your browser network console and see the network requests it's doing.

In the specific case of replacing the foreign links, here is an example of how to replace all the external scripts and files by local ones, so your login page doesn't require internet access to run.

LoginAppFolder.zip (72.4 KB)

First you download the above file which will be the content of your login app folder.

Then you can use it in the existing Sphinx demo, for example (folder demos, project group “SphinxSimpeDemo”. You can modify the SphinxServer this way:

procedure TForm7.FormCreate(Sender: TObject);
begin
  // Configure a folder to override some files for web Login App
  SphinxConfig1.UIOptions.LoginAppFolder := TPath.Combine(TPath.GetDirectoryName(ParamStr(0)), 'loginapp');

  // Initialize the language engine
  TLang.Init;

Add the first line to tell Sphinx that you will have a folder “loginapp" in the same folder of your server executable. Whatever files there in the correct relative folder will replace the default ones used by Sphinx.

Then, just use the zip file attached above you to put such folder in the same folder as executable. If you then run the server and launch the sample web client, and try to login, you will see that the login app will not try to load js and css from the web, but locally from the server.

What I did was to download all the css and js needed and put them in a “extras” folder, and then modify the index.html to point to those files.

That's an example of how you can modify existing files from web login app folder.

Hope this helps.

[Heuer_Sven]

Hi Wagner,
Thank you very much. That's the first step to change

I wonder where is the template of the content (and the other template for password recover and so on.) I tried to grep, but it seemed that it is precompiled in a resource?

(just found found the "index.html" in Sphinx.LoginApp.Res, Uff).

..and I will repeat it. You are writing high level software but it is not documented in a deep manner. So how should a developer know this? There are so many events and props with no documentation, what they are doing. I am willing to pay much more but docs were essential for using it on the same level like you intended to do so. Querying all the missing information here isn't fun for me either. Try and Error makes no fun too. And for sure, you as the lead have better things to do...

sorry for the words, but this kind of development makes me really angry after more than 30 years of experience with Delphi.

Sven

[wlandgraf (Wagner Landgraf)]

In the same folder I sent you zipped, you can create a folder css at the same level of the extras folder. Then inside that css, create an empty custom.css folder.

There, you can start adding CSS directives to fully customize the web page. You must know about CSS to do that, of course. And you will have to inspect the HTML page to know the CSS classes and HTML elements that are present in the web page.

[Erik_Fidlers]

I used the sphinx demo project to do some tests and changes.
Where can I implement the changes for the login so that the username is used instead of the e-mail (or that both can be used for login). At this point it always checks the e-mail even when the username is correct, on the sphinx server the e-mail requirement has been set to false.

[wlandgraf (Wagner Landgraf)]

This is something we still need to implement.

[Erik_Fidlers]

Thanks for the reply, is there any roadmap on when this would be implemented? We would like to make use of the Sphinx server but really need the login possibility with username.

[wlandgraf (Wagner Landgraf)]

We don't have a strict timeframe, but we intend to have it in the next update.