Custom message above login/signup forms?


(Chris Snyder) #1

Is there a way to display a custom message above the login and signup forms? I want to display a message to inform users that the account they already have for our main site won’t work on our Discourse installation.

We’re using Discourse for a trial run with a specific community before we look at rolling it out to replace other community-oriented features on our site. Our current site’s auth system is a mess, so I really don’t want to integrate it with Discourse - rather import the accounts into Discourse if we decide to proceed with a full migration.


(Jeff Atwood) #2

You can possibly achieve this with the CSS before and after directives on styles specific to those dialogs:

CSS can be entered in Admin, Customize, CSS/HTML


(Chris Snyder) #3

Thanks for the quick reply! I’ve considered that, but it feels awfully hacky (I like to keep content out of my stylesheets when possible). Still, it would be much easier than digging deeper to make a modification to the template, if there isn’t another official way to do this.


(Chris Snyder) #4

This worked to style the login form:

#login-form::before {
  content: 'Message text';
  display: block;
  margin-bottom: 10px;
  background: #e0f5ff;
  padding: 5px;
  font-weight: bold;
}

I couldn’t figure out a way to add a similar message above the account creation form - the <form> tag has no attributes to select on, and I couldn’t find serviceable unique attributes in any other tags either.


(Christopher Kampmeier) #5

This approach/hack sort of works for the Create New Account form, but it has the undesirable effect of duplicating the custom text on the overall browser window in addition to the pop up dialog:

.create-account::before {
  content: 'Email:   Use your your dot separated email address. For example, billy.bobl@foo.com \a \a Username:   Use your employee ID. For example, e001234';
  white-space: pre;
  display: block;
  margin-bottom: 10px;
  background: #e0f5ff;
  padding: 5px;
  font-weight: bold;
}

I am not sure how to suppress the duplication in the upper left portion of the browser window:


(Christopher Kampmeier) #6

If you want to insert line breaks, use the \a character:

#login-form::before {
  content: 'If you have not yet signed up for the forums pilot, select "Create New Account" \a \a If you receive "Unknown error", click "Log In" again';
  white-space: pre;
  display: block;
  margin-bottom: 10px;
  background: #e0f5ff;
  padding: 5px;
  font-weight: bold;
}


(Christopher Kampmeier) #7

I realized that the example of where we want to augment the existing email: instructions: and username: instructions: text would be better accomplished by selectively overriding the locale values per:


(DenisD) #8

@ckamps s there any chance to customize css of signup form to add custom text before input the same way as login?

#login-form::before {
  content: 'If you have not yet signed up for the forums pilot, select "Create New Account" \a \a If you receive "Unknown error", click "Log In" again';
  white-space: pre;
  display: block;
  margin-bottom: 10px;
  background: #e0f5ff;
  padding: 5px;
  font-weight: bold;
}

many thanks


(Sam) #9

Try using

.create-account form::before

Instead of #login-form::before, see if that works for you.


(DenisD) #10

it worked/ thanks so much

D


(Raphael Haase) #11

Is there a more proper way nowadays of doing this, i.e. not using CSS hacks?
Similarly to the previous posts, I want to show some guidelines about how to choose the username above the sign up form.


(Joshua Rosenfeld) #12

I don’t believe so. As there is no existing text “above the signup form” you’d need to use CSS. However, you can modify the text below each of the input boxes via /admin/customize/site_texts.


(Boost) #13

I wanted to add proper html content to the signup and forgot password dialogs so the css trick didn’t work.
I came up with this javascript code to do that (put it in a new style in the </head> part and then you can use it as a style component):

<script type="text/discourse-plugin" version="0.0.1">
api.onAppEvent('modal:body-shown', (data) => {
    
    if(data.title){
    
        if(data.title.match(/.*create.*account.*/)){
        
            $(".create-account.fixed-modal .modal-footer").prepend(getEmailSpamCheckMessage(true));
        }
    } else {
        
        // Might be forgot password
        let element = $(".fixed-modal .forgot-password-modal")
        if(element){
            element.append(getEmailSpamCheckMessage(false));
        }
    }
	
});

function getEmailSpamCheckMessage(register){
    return $.parseHTML("<p class='EmailNoteMessage'>If you don't receive an email " + 
                (register ? "confirmation " : "") + "check your spam folder.<br>" +
                "You can also visit our <a href='https://discordapp.com/invite/FZxDQ4H'>discord</a> " +
                "if you have trouble " + (register ? "registering" : "receiving emails from us") + ".</p>");
}

</script>