"login with Dolphin in chat+"

When I change my avatar in chat+, there is a button that says "Login with Dolphin." How do I change this to my site name?

That is one thing I asked about. With the original Rocket.Chat server, there are many more functions - including button color and name. Why this was hidded in the dolphin version - I have no idea.

ugh - WHY - OH WHY. Whenever you did whatever it was you did with the v.20 - you have somehow removed the ability to add additional dolphin sites to one Chat+ server.

To change this button title you need to download dev version from github:

Change packages/rocketchat-ui-account/account/avatar/prompt.html file (code in red was added):

 
{{#if service = 'dolphin'}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" "CUSTOM-NAME"}}</button>
{{else}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" service}}</button>
{{/if}}

Then build the package using the following command:

meteor build --directory /path/to/output/dir

Then you can use package in /path/to/output/dir/bundle folder as usual.

I do not see this bit of code to edit :

<template name="avatarSuggestion">
    {{#if .}}
        <div class="avatar-suggestion-item">
            <div class="avatar" style="background-image: url({{blob}});">
            </div>
            <div class="action">
                <button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" service}}</button>
            </div>
        </div>
    {{/if}}
</template>

<template name="avatarSuggestionLogin">
    {{#if .}}
        <div class="avatar-suggestion-item">
            <div class="avatar question-mark icon-user"></div>
            <div class="action">
                <button type="button" class="button primary {{.}} login-with-service">{{_ "Login_with" .}}</button>
            </div>
        </div>
    {{/if}}
</template>

<template name="avatarPrompt">
    <section class="page-container page-home page-static">
        <header class="fixed-title">
            {{> burger}}
            <h2>
                <span class="room-title">{{_ "Select_an_avatar"}}</span>
            </h2>
        </header>
        <div class="content">
            <div class="avatarPrompt">
                <header>
                    <p>{{_ "Select_service_to_login"}}</p>
                </header>
                <div>
                    <div class="avatar-suggestions">
                        <div class="avatar-suggestion-item">
                            {{> avatar username=initialsUsername }}
                            {{#with service='initials'}}
                                <div class="action">
                                    <button type="button" class="button primary select-service">{{_ "Use_initials_avatar" }}</button>
                                </div>
                            {{/with}}
                        </div>
                        <div class="avatar-suggestion-item">
                            <div style="background-image: url({{upload.blob}});" class="avatar {{#unless upload}}question-mark icon-upload{{/unless}}">
                            </div>
                            <div class="action">
                                <div class="button primary">{{_ "Select_file"}}
                                    <input type="file" class="avatar-file-input" accept="image/*">
                                </div>
                                {{#with upload}}
                                    <button type="button" class="button primary select-service">{{_ "Use_uploaded_avatar"}}</button>
                                {{/with}}
                            </div>
                        </div>
                        <div class="avatar-suggestion-item">
                            {{#with service='url'}}
                                <div class="avatar question-mark icon-upload"></div>
                                <div class="action">
                                    <div class="input-line">
                                        <input type="text" name="avatarurl" id="avatarurl" />
                                        <button type="button" class="button primary select-service">{{_ "Use_url_for_avatar"}}</button>
                                    </div>
                                </div>
                            {{/with}}
                        </div>

                        {{#if suggestions.ready}}
                            {{> avatarSuggestion suggestions.avatars.gravatar}}
                            {{> avatarSuggestion suggestions.avatars.facebook}}
                            {{> avatarSuggestion suggestions.avatars.dolphin}}
                            {{> avatarSuggestion suggestions.avatars.trident}}
                            {{> avatarSuggestion suggestions.avatars.google}}
                            {{> avatarSuggestion suggestions.avatars.github}}
                            {{> avatarSuggestion suggestions.avatars.gitlab}}
                            {{> avatarSuggestion suggestions.avatars.linkedin}}
                            {{> avatarSuggestion suggestions.avatars.twitter}}

                            {{#if suggestAvatar 'facebook'}}
                                {{> avatarSuggestionLogin 'facebook'}}
                            {{/if}}
                            {{#if suggestAvatar 'dolphin'}}
                                {{> avatarSuggestionLogin 'dolphin'}}
                            {{/if}}
                            {{#if suggestAvatar 'trident'}}
                                {{> avatarSuggestionLogin 'trident'}}
                            {{/if}}
                            {{#if suggestAvatar 'google'}}
                                {{> avatarSuggestionLogin 'google'}}
                            {{/if}}
                            {{#if suggestAvatar 'github'}}
                                {{> avatarSuggestionLogin 'github'}}
                            {{/if}}
                            {{#if suggestAvatar 'gitlab'}}
                                {{> avatarSuggestionLogin 'gitlab'}}
                            {{/if}}
                            {{#if suggestAvatar 'linkedin'}}
                                {{> avatarSuggestionLogin 'linkedin'}}
                            {{/if}}
                            {{#if suggestAvatar 'twitter'}}
                                {{> avatarSuggestionLogin 'twitter'}}
                            {{/if}}


                        {{else}}
                            {{_ "Loading_suggestion"}}
                        {{/if}}
                    </div>
                </div>

                {{#if username.ready}}
                    <div class="submit">
                        <button data-loading-text="{{_ "Please_wait"}}..." class='button primary login'><span>{{_ "Use_this_username"}}</span></button>
                    </div>
                {{/if}}
            </div>
        </div>
    </section>
</template>

Code in red was added.

HI;

I have my chat server at subdomain.mydomain.com:3000/ and I use this for 2 sites subdomain.mydomain.com and mydomain.com.

The chat works on both sites, mydomain.com is the same for both; but Helpdesk gives me on both sites "Internal server error".

Is there anything I can do?

ANother thing is if Helpdesk is active for members as well then there is a little conflict about the member menu at the bottom and I want to leave the member menu there. :-)

How are you connecting to your chat server for each site - are you using 2 separate OAuth instances for your sites?

Yep :-) I cheated the database :-) lol 

that may be the reason why. Are you using the v.20 that is provided for Dolphin or the original Rocket.Chat. Maybe just me - but it used to work, but not now where you can connect 2 sites properly.

Add a custom OAuth in the Chat Administration

token = /m/oauth2/token

identity = /m/oauth2/api/me

authoriation = /m/oauth2/auth

Fill in the rest of the fields as normal.

In your Dolphin Site - Administration - Modules - OAuth

 use the url provided in the OAuth section of the Chat Server for your new Custom OAuth

Also - I would recommend changing your url from subdomain.yourdomain.com:300 to something.yourdomain.com instead - just for visual sake of your users.

ohh sorry the :300 is the server location, the chat rooms are of course at my sites with .com

So the Helpdesk is now also working but all I did is cheating with the second OAuth in my database.

My issue was that by pointing to the server I had no "/" at the end :-)

It is not really working at safari though.

Mozilla and Chrome are ok.

Add a custom OAuth in the Chat Administration

token = /m/oauth2/token

identity = /m/oauth2/api/me

authoriation = /m/oauth2/auth

Fill in the rest of the fields as normal.

I have attached a photo is this where I should add them?

 no - go to Accounts on the left - and all the way at the bottom there is an Add New OAuth button.

Also, without https, Chat+ video and audio chat wont work on Chrome. It does not work on Safari or IE at all right now.

 
{{#if service = 'dolphin'}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" "CUSTOM-NAME"}}</button>
{{else}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" service}}</button>
{{/if}}

meteor build --directory /path/to/output/dir

So is this still the dolphin package? Will people still be able to log in using dolphin? What is the link to the dev version?

so far - it seems I have successfully added a Dolphin OAuth to the Dev version of Rocket.Chat. Hope I got things right.

URL for Dev version = https://github.com/RocketChat/Rocket.Chat

and how is it working for you?

you can check it out for yoursefl - https://talk.caredesign.org

 it gives me a "Service Unavailable" :-(

my bad - i stopped it last night - back up and running.

Hi Alex. Am going to try this later in the week.

How do you change the icon also? ie. the right arrow which logs in via Dolphin?

To me this is not self explanatory so I would like to change the icon to something that says "Login using [sitename]" instead of just a graphic icon.

Maybe this can be coded in future to allow this name/graphic to be an option in the Chat+ module?

unfortunately - the Dolphin version removes a lot from the dev version - if you do use the dev version - please let us know here - there are slight changes to be made to allow Dolphin to Connect. With the Dev version - you can have your own button color, own text and own text color as well.

Hi Alex/Boonex team,

Please clarify the below. When you say "download the dev version from github", does this mean a dolphin dev version or a rocketchat dev version?

How do you also change the icon, instead of that one that looks like a door exit ?

These are important to change, since I got lost with it myself and I'd rather put something like "Click this to Login with your site credentials".

Really important if you can allow this in future updates to be configured via a web interface, one of the best things about Dolphin is a "white label" solution.

Thanks.

 
{{#if service = 'dolphin'}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" "CUSTOM-NAME"}}</button>
{{else}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" service}}</button>
{{/if}}

meteor build --directory /path/to/output/dir

https://github.com/boonex/rocket.chat 

Icon can be changed in packages/rocketchat-dolphin/login-button.css file, it's SVG icon encoded as base64

Hi Alex/Boonex team,

Prior to reading this: I know zero about npm, meteor, etc. I just followed the Boonex instructions to install on CentOS which installed itself into /opt/bundle.

I went through the below:

 
{{#if service = 'dolphin'}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" "CUSTOM-NAME"}}</button>
{{else}}
<button type="button" class="button primary {{service}} select-service">{{_ "Use_service_avatar" service}}</button>
{{/if}}

meteor build --directory /path/to/output/dir

By first creating a new directory, cloning the Git repo. Modifying the file above.

When going to the "meteor" part I had to install it using:

curl https://install.meteor.com/ | sh

Once installed, I went into the ./rocket.chat directory and ran meteor build:

meteor build --directory /opt/
rocketchat:file: updating npm dependencies -- mkdirp, gridfs-stream, gm...
rocketchat:assets: updating npm dependencies -- image-size, mime-types...
rocketchat:cas: updating npm dependencies -- cas...
rocketchat:importer: updating npm dependencies -- adm-zip...
rocketchat:theme: updating npm dependencies -- less, less-plugin-autoprefix...
builLivechat: updating npm dependencies -- shelljs...
   Building plugin `builLivechat` in pac...  |
WARNING: The output directory is under your source tree.

rocketchat:tutum: updating npm dependencies -- redis...
rocketchat:ui-sidenav: updating npm dependencies -- less, less-plugin-autoprefix...
steffo:meteor-accounts-saml: updating npm dependencies -- xml2js, xml-crypto, xmldom, connect, xmlbuilder, querystring, xml-encryption...
Currently, it is only possible to build iOS apps on an OS X system.

This basically blew away my original directory which had:

# ll
total 36
-rw-r--r-- 1 root root 1319 Mar 15 20:20 chat_plus.log
-rw-rw-r-- 1 root root   41 Mar  3 19:54 example-init.sh
-rw-rw-r-- 1 root root  243 Mar  3 19:54 example-start.sh
-rw-rw-r-- 1 root root  128 Mar  3 19:54 example-stop.sh
-r--r--r-- 1 root root  485 Mar  3 19:54 main.js
drwxr-xr-x 5 root root   55 Mar  3 19:54 programs
-r--r--r-- 1 root root  543 Mar  3 19:54 README
-rwxr-xr-x 1 root root  241 Mar 15 08:08 run.sh
drwxr-xr-x 2 root root   32 Mar  3 19:54 server
-r--r--r-- 1 root root 1062 Mar  3 19:54 star.json
-rwxr-xr-x 1 root root  116 Mar 15 20:29 stop.sh

and made it:

# ll /opt/bundle/
total 12
-r--r--r-- 1 root root  485 Mar 25 19:07 main.js
drwxr-xr-x 5 root root   55 Mar 25 19:07 programs
-r--r--r-- 1 root root  543 Mar 25 19:07 README
drwxr-xr-x 2 root root   32 Mar 25 19:07 server
-r--r--r-- 1 root root 1062 Mar 25 19:07 star.json

which obviously breaks things (as start up scripts vanish etc). I restore from backup so it's OK.

But what am I doing wrong here?

You can copy start&stop scripts manually 

Hi Alex. Yeah I did that but the software no longer starts up for long ie. it starts and then bombs out with an error.

What you're saying is that this should work? I can post the error I get in this forum if you wish.

When I restore the older backup (which was built from the CentOS instructions on-line) things work fine again and the server stays up and running.

This indicates to me there's a problem when I run that "meteor" command from a fresh Git clone compared to the time I originally installed Chat+ from the CentOS instructions.

I'm sure others would have the same issue, as I've done nothing special but followed the basic instructions.

i used the dev version and i even tried with the boonex version - and both compiled properly and run properly. If you errored out - it may be something with the change you made that is not correct.

also - before running the meteor build - just run meteor and make sure everything works. You can make changes while the chat server is running, and the server will automatically restart. as long as everything is working on the non built version - all should be well with the built version

Please follow valuable @ProfessorSr recommendations, if it doesn't help, then post your error message here. 

ok - after you have done the build - you then need to go back to the boonex instructions for installing the Chat+.

So, you would need to go to the new bundle/programs/server directory and run npm install.

after running this - then you can run the run.sh to start the chat server.

Hi Prof. Ok, so the npm install creates that node_modules directory.

I went into /opt/bundle/programs/server, ran "npm install" and the nodes_modules directory was created and populated (cool).

When I went back to chat, mousing over the "login icon" still shows "Dolphin" as the info popup and not my customised version?

since you have already started the chat+ - you now need to create a new database. Open your run.sh file and change the rocketchat to something else - the line that has the 27017 port at the end - that is the database that is being used. once you ran it the first time - it made the database with the settins you had at that time. chane database name and restart - all should be well.

Hi Prof. Thank you, really appreciate your assistance and knowledge here.

I've been able to successfully build a new DB via the run.sh, and can configure the environment again with OAuth etc.

However, the mouse over of the "dolphin login" still shows the word "Dolphin" on mouse-over. This is when editing and adding the "red items" in the post from AlexT.

Really frustrating  to say the least, as can't seem to get rid of it.

Any ideas why this still shows this way? I haven't tried looking at changing the icon look until I can fix this part.

If it doesn't work with the Dolphin version of chatplus, is it worthwhile trying the Dev version of rocket.chat instead?

Thanks again.
 

ok - the changes above are not for the button that is used to login with Dolphin account - the change listed above allows you to change the button for the avatar and add your site name ther. this does not affect the login button.

to change that - you would need to create your own image - no bigger than 64 x 64 and replace it in the css file located (in unbuilt rocketchat) at:

packages/rocketchat-dolphin/login-button.css

then rebuild

Hi Prof. Thanks for your reply, unfortunately you've confused me :)

I've attached a screen shot to show the mouse over of the icon, which displays the "Dolphin" word.

So there's two things:

1. how to change that Dolphin word
2. how to change the icon

For 1, It's my understanding that to change the Dolphin word we do the items in red that AlexT wrote?

So for this item, when I modify "packages/rocketchat-ui-account/account/avatar/prompt.html ", rebuild with meteor and change DB, I still see the "Dolphin" word on mouse over.

For 2, this is what you talk about in this file: packages/rocketchat-dolphin/login-button.css yes?

Thanks.

negative - those word changes that AlexT posted are for the Avatar section - to show your site name for the avatar.

The image of the arrow pointing to the door - that can be changed using the login-button.css file - but you will need to rebuild your meteor app (Rocket.Chat) after making change to css file.

I have not found where to change the name as I believe it is hardcoded like the rest of the Dolphin Connect information. Basically - look at the dolphin connect as Facebook Connect.

To Boonex Team:

The confusing part is that there is no such thing as a site called Dolphin - and as such, creating a specific OAuth connection called Dolphin may not have been a good idea. Dolphin is not like Facebook in which it is a widely known site - because none of us call our site Dolphin. We have our own name for our sites. While it was a great attempt to make the OAuth connection simplified, it has caused more confusion.

Hi Prof. Thank you for this and yes, I agree with your comment to the Boonex team.

People visiting the site will not have a clue what "Dolphin" means, which is why from the first comment I've been looking for a way to remove this word and change it to "Login here" or similar.

I thought that is what AlexT meant originally with that, he hadn't made it clear unfortunately (and in the process have spent many hours on this for not much benefit).

Is the Dev version of Rocket.Chat better in this regard? ie. can you change those things for the dev version of rocket.chat.. so I could not only change the "Dolphin" word but also the icon easily?

try adding a new Cuatom OAuth first. It did not work for me, but maybe you might have better luck.

First - just create the new OAuth and then enable it. No need to input all the info at this point. Logout and see if the new OAuth button appears. If it does, then continue.

token = /m/oauth2/token

identity = /m/oauth2/api/me

authorization = /m/oauth2/auth

everything else is the same so you can use the same credentials you are already using for your current Dolphin connection.

Hi Prof. Ok. I'll plan to look at installing the dev version at some stage then. Are the instructions for installing the rocket.chat version the same or similar to the instructions for Dolphin?

I'll be installing it on a CentOS 7 server.

i was not referring to the dev version - but the Dolphin version