Customization login page


(Nikita Bytsko) #1

Hello everybody. I wanna change mine private login page like this, but i can’t find some solutions. I wanna show two fields like input type login, input type password and login button. Please help me. Sorry for bad English. 98d37b36d9109c012a384cc92cd421049785a855_1_690x371


(Nikita Bytsko) #2

Or how to show login form?


(Nikita Bytsko) #3

Help me please guys?!


(Bhanu Sharma) #4

The kind of login page you’ve demonstrated can’t be made from the native discourse customization but you can always use some 3rd party SSO and customize their page. probably not the best solution and may be overkill for your setup but should get the work done.


(Daniel Nevoigt) #5

It´s not exactly the same, but I have written some small CSS to adapt the login/register modals a bit. Comes far to that picture you showed. Try it, possibly you like it.

/*************************/
/* Custom Register/Login Modals */
/*************************/

// Modify Modal-Content only on desktop with size > 1024px
@media screen and (min-width: 1024px) {

/* Login */
    .login-modal .modal-body {
        padding: 15px 0 0 15px;
    }
    #login-buttons {
        float:left;
        width:48%;
        border-right:1px solid #eee;
        margin:0;
    }
    #login-buttons button {
        min-width: 90%;
    }
    #login-form {
        width:48%;
        float:right;
    }
    #credentials td input {
        width:170px;
    }
    #forgot-password-link {
        position:absolute!important;
        margin: 20px -198px 0;
    }
    div.caps-lock-warning {
        margin-top:30px;
    }
/* Register */
    .create-account form {
        width:48%;
        float:right;
        border-left: 1px solid #eee;
        padding-left: 25px;
    }
    .create-account #login-buttons {
        border-right:none!important;
        padding-top:5px;
    }
    .create-account table td input {
        width: 170px;
    }
    .create-account tr.input td {
        padding-right: 10px;
    }
}

(Nikita Bytsko) #6

Thx man, but i wanna login in a private page mysite.com/login without pressing any button.


(Nikita Bytsko) #7

How can i do the page like this Authorize a user for OAuth 2.0 - Imgur or Linkin Park or T Nation


(Bhanu Sharma) #8

They are all using SSO! as I suggested earlier.


(Joe) #9

You can still use the current login method.

Going to your.site.com/login Will take you to a page with the login modal open. From there and with a bit of CSS, you can add a background and change the way the form looks to your liking.

Rough CSS example:
This assumes you have social login buttons enabled

@import "common/foundation/variables";

.login-modal.modal-body {
  display: flex;
  align-items: center;
}

#login-buttons {
  width: 50%;
  text-align: center;
  border-right: 1px solid $primary-low;
}

.discourse-no-touch #login-form {
  margin: 0 auto;
}

.login-modal.in:before {
  content: "";
  height: 100vh;
  width: 100vw;
  background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Landscape-wallpapers-4.jpg);
  position: fixed;
  z-index: -1;
}

#credentials tr {
  display: flex;
  flex-direction: column;
}

And the result looks something like this:


#10

@Johani, It looks fantastic. Nice job mate! :rocket:

1). How can I make the button „Create New Account” to look same like „Log In”?

2). It will be nice if the background is with dark background overlay, same like your theme, Vincent.

3). On Mozilla the sign-up page looks like here:


(Joe) #11

Here’s a slightly revised version that should work for both the sign-up and login modals. This version also includes an optional dark overlay.

@import "common/foundation/variables";

#discourse-modal {
  &.login-modal,
  &.create-account {
    &:not(.hidden):before {
      content: "";
      height: 100vh;
      width: 100vw;
      // change background here
      background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Landscape-wallpapers-4.jpg);
      position: fixed;
      z-index: -2;
    }

    &:not(.hidden):after {
      content: "";
      height: 100vh;
      width: 100vw;
      // control overlay here
      background: rgba(black, 0.5);
      position: fixed;
      top: 0;
      z-index: -1;
    }

    .modal-body {
      display: flex;
      align-items: center;
    }
  }
}

#login-buttons {
  width: 50%;
  text-align: center;
  border-right: 1px solid $primary-low;
}

.discourse-no-touch #login-form {
  margin: 0 auto;
}

#credentials,
.create-account form {
  tr {
    display: flex;
    flex-direction: column;
  }
}

.create-account #login-buttons + div {
  margin: 0 auto;
}

Like so:

As for making the login link look like a button, you can use these selectors to style them to match your taste

button {
  &#login-link,
  &#new-account-link {
  // add styles here
  }
}

Of course, this is a very early version and so :bug::bug: are inevitable


(Jeff Atwood) #12

I like this arrangement a lot, can we make it the default in Discourse, assuming there is enough space to do so (responsive)?


(Joe) #13

It can be, up to a limit, say 400px viewer width. It would look like this:

On really small screens like an iPhone 5, there isn’t enough space for everything to sit “comfortably”

It makes more sense to vertically stack the sections like so:

Which isn’t all that different from the current default behaviour:

It’s also possible to make the changes on desktop only and leave mobile devices as they are now.


(Sam Saffron) #14

Can you test out how this looks:

  • With a bit more spacing between social logins (they are pretty close now)
  • With only a single social login enabled
  • With no social logins enabled

(Jeff Atwood) #15

Hmm even at 400px that doesn’t work for me. I was speaking about tablet, desktop, laptop.


(Joe) #16

Mock ups on top and current default below for the all of these :sunflower:

Then, yes!

It’s responsive and there’s enough space.


(Kris) #17

Good idea to bring this into core, I tried a couple things…

  • Thinking the validation could replace the input tips when relevant? they’re generally telling the user the same thing.
  • 3rd party logins feel a bit better to me on the right (especially when there are only 1 or 2 options available)


#18

Thank you @Johani, it works. A little problem with register page:

Default:

When you try to write something, it looks like here:


#19

A little help? I give a :beer:, :coffee: or :tea:.


(Joe) #20

Hi there @elGrande

apologies for the delay here.

To fix that particular problem try adding this:

.create-account tr.input .tip {
    display: block;
}

However, do note that this new design (see here) will be added to core Discourse code for desktops soon :tada: