Page History

HTML

<style>
@media only screen and (max-width: 580px){
    .description-container{
        width: 100%!important;
    }
    .field-group input{
        padding: 0 10px!important;
    }

}

.description-container #link-container {
    #rw_dashboard_link{
	display: none !important;
}

.custom-ov-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
}

div.bigImageContainer {
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
    margin-left: 10px;
}

#login-banner-image {
    width: 100%;
    object-fit: cover;
}

div.signContainer {
    width: 90vw;
    height: 90%;
    margin: 60px auto;
}

.rw_content {
    background: var(--main-background);
}


div.formContainer {
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    /* width: 50%; */
}

.link-container-button.left {
    display: none;
}

div.link-container-button {
    width: 100%;
}

input#loginButton:hover {
    cursor: pointer;
}

@media only screen and (max-width: 480px) {
    div.formContainer {
        box-shadow: none;
        width: 100%;
    }

    div.bigImageContainer {
        display: none;
    }

    div.signContainer {
        margin: 0 auto;
    }

    form.login-form-container[name='loginform'] {
        width: 100%;
        padding: 14px 0;
        margin: auto;
    }

    div.field-group {
        width: 100%;
        margin-top: 10px;
    }

    .field-group.login-field-group {
        margin-top: 20px;
    }
}

.description-container {
    display: flex;
    flex-direction: column;    
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    justify-content: center;
    color: var(--secondary-font-color);
    font-family: var(--main-font-family);
    border-radius: var(--border-radius);
    background-color: var(--main-background);
}

.formTop {
    padding: 0 65px;
}

.welcome-message {
    font-family: var(--main-font-family);
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-font-color);
    margin-bottom: 15px;
    line-height: 1.48;
    margin-top: 90px !important;
}

div#login-message {
    object-fit: contain;   
    font-size: 14px;
    font-weight: bold;    
    line-height: 1.82;
}

div#login-message a {
    font-family: var(--main-font-family);
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
}

form[name='loginform'] {
    height: fit-content;
    width: 100%;
    margin-bottom: 90px;
}

.field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #f6fdf3 inset !important;
}

form[name='loginform'] label {
    font-family: var(--main-font-family);
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-font-color);
    line-height: 1.75;
    margin-bottom: 5px;
}

form[name='loginform'] input {
    margin: 4px 0 0;
    padding: 18px 110px 17px 20px;
    border-radius: 4px;
    border: solid 1.5px #767676;
    background: var(--main-background);
    width: 346px;
    height: 34px;
}

input#checkbox {
    width: unset;
    height: unset;
    margin-right: 10px;
}

label.checkbox {
    display: flex;
    height: 70px;
    align-items: center;
}

.conditions-message a {
    color: var(--primary-color) !important;
}

input#loginButton {
    width: 167px;
    height: 48px;
    padding: 20px 0;
    border: none;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: #ffffff;    
    object-fit: contain;
    font-family: var(--main-font-family);
    line-height: 2.15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
    font-size: 16px;
    font-weight: bold; 
}

input:focus, textarea:focus, select:focus{
    outline: none;
}

#error-message {
    color: red;
}

#error-message a {
    color: red;
    text-decoration: underline;
    margin-left: 10px;
}

div#error-message {
    margin-bottom: 15px;
}

div#link-container {
    height: 80px;
    width: 100%;
    display: flex;
}

.link-container-button {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--main-font-family);
    font-size: 16px;
    font-weight: bold;
}

.link-container-button a {
    color: var(--primary-color) !important;
}

.link-container-button {
    border: solid 1px #e5e5e5;
}

.link-container-button.left {
    border-right: none;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
form[name='loginform'] {
    width: 90%;
    padding: unset;
    margin: unset;
    margin-top: 30px;
    padding: 14px;
}

.description-container {
    width: unset;
    text-align: left;
    margin: unset;
}

p.welcome-message {
    text-align: left;
    margin-top: 30px;
}

form[name='loginform'] input {
    width: auto;
    padding-left: 10px;
}

.field-group {
    width: 83%;
    margin: auto;
}
}

div#login-outer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    justify-content: center;
    color: var(--secondary-font-color);
    font-family: var(--main-font-family);
    border-radius: var(--border-radius);
    background-color: var(--main-background);
}

div#login-container {
    width: 80%;
    margin: auto;
}


form.aui .date-select, form.aui .field-group, form.aui .group {
    display: flex;
    padding: 0px;
    margin: 0px 0px 15px 0px;
    width: 100%;
}


form[name='loginform'] label {
    float: none;
    margin-left: 0px !important;
    text-align: left  !important;
}

span.conf-macro.output-inline {
    width: 100%;
}
</style> </style>

HTML

<link rel="stylesheet" href="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/stylesheets/MS+SBA/login.css">

<script>

window.addEventListener("load", function(){
	//$('.login-form-container').append(`<p>Forgot your password? Reset it <a href="mailto:morganstanley@theonevalley.com?subject=Reset Password Request&body=Please reset my password.">here</a>.</p>`);
	$('#login-issue-btns').append(`<p class="login-issue-btn"><a href="/display/SBAAN/Sign+Up">Don't have an account?</a></p>`);
    $('#login-issue-btns').append(`<p class="login-issue-btn"><a href="/display/SBAAN/SBA+Forgot+Password">Forgot Password?</a></p>`);
});

</script>  

<style>

#loginform > fieldset > div {
    padding: 0;
  }

</style>

Custom section

Class	signContainer

Custom section

Class	formContainer

Login form sso sba

SignUpLink	/display/SBAAN/Sign+Up
Destination	/display/SBAH
EndpointUrl	/rest/scriptrunner/latest/custom/loginMSSBA
ForgotPassword	/display/SBAAN/Forgot+Password
WelcomeMessage	Welcome to the Morgan Stanley Small Business Academy

HTML
<div id="login-issue-btns"> </div>

Custom section

Class	bigImageContainer

HTML

<div class="learn-more-section">
    <p>Our focus is helping small businesses leverage their competitive advantage, differentiate themselves in the procurement process, strengthen their business knowledge, and build their professional network.</p>
    <a href="https://www.morganstanley.com/about-us/supplier-diversity/small-business-academy" style="font-weight:bold;">LEARN MORE</a>
</div>

HTML

<script>
$("input#loginButton").val("LOG IN"

HTML

<script>
    let loginConfig = {
        welcomeMessage: {
            text: "LOG IN",
            selector: ".welcome-message",
            initialize: "true"
        },
        osUsername: {
            text: "Email",
            selector: "#os_username-label",
            initialize: "true"
        },
        osPassword: {
            text: "Password",
            selector: "#os_password-label",
            initialize: "true"
        },
        osDestination: {
            input: "/display/MSSH",
            selector: "#os_destination-submit",
            initialize: "true"
        },
        passwordResetLink: {
            input: "/display/MSA/Forgot+Password",
            selector: "#password-reset-link",
            initialize: "true"
        },
        // signupLink: {
        //     endpoint: "/display/MSA/Sign+Up",
        //     selector: "#signup-link",
        //     initialize: "true"
        // },
        loginBannerImage: {
            img: "https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/images/MSSC/login.jpeg",
            selector:"#login-banner-image",
            initialize: "true"
        }
    };
</script>

<div class="custom-ov-container signContainer fullSite">
    <div class="custom-ov-container formContainer fullSite">
        <div id="login-container" class="unified-container fullSite">
            <div class="login-section unified fullSite">
                <form name="loginform" method="POST" action="/dologin.action" class="aui login-form-container fullSite">
                    <p class="welcome-message"></p>
                    <div id="action-messages" class="fullSite"></div>
                    <fieldset class="compact-form-fields fullSite">
                        <!-- <legend class="assistive fullSite"><span class="fullSite">Log in to Confluence</span></legend> -->
                        <div class="field-group fullSite">
                            <label id="os_username-label" for="os_username" class="fullSite"></label>
                            <input type="text" name="os_username" id="os_username" class="text fullSite" placeholder="Username" data-focus="0">
                        </div> 
                        <div class="field-group fullSite">
                            <label id="os_password-label" for="os_password" class="fullSite"></label>
                            <input type="password" name="os_password" id="os_password" class="password fullSite" placeholder="Password">
                        </div>
                        <div class="field-group form-buttons compact-form-buttons fullSite">
                        <input id="loginButton" class="aui-button aui-style aui-button-primary fullSite" name="login" type="submit" value="Log in">
                        <!-- <div id="link-container" class="fullSite"><a id="signup" class="aui-button aui-style aui-button-link fullSite" href="$paramSignUpLink">Don't have an account?</a><a id="forgot-password" class="aui-button aui-style aui-button-link fullSite" href="$paramForgotPassword">Forgot your password?</a></div></div> -->
                        <input id="os_destination-submit" type="hidden" name="os_destination" value="" class="fullSite">
                    </fieldset>
                    <!-- <p>Forgot your password? Reset it <a id="password-reset-link" href="/">here</a>.</p> -->
                    <!-- <p><a id="signup-link" href="/">Don't have an account? Sign up here.</a></p> -->
                </form>
            </div>
        </div>
    </div>
    <div class="custom-ov-container bigImageContainer fullSite">
        <img id="login-banner-image" src="" alt="login-banner-image">
    </div>
</div>

<script>
    let initializeLoginPage = function(data) {
        for (const key in data) {
            if (data[key].initialize) {
                if (data[key].text) {
                    $(data[key].selector).text(data[key].text);
                }
                if (data[key].endpoint) {
                    $(data[key].selector).attr("href", data[key].endpoint);
                }
                if (data[key].img) {
                    $(data[key].selector).attr("src", data[key].img);
                }
                if (data[key].input) {
                    $(data[key].selector).attr("value", data[key].input);
                }
            }
        }
    }(loginConfig);
</script>

Content

Space Tools

Versions Compared

Old Version 1

New Version Current

Key

Content

Space Tools

Breadcrumbs

Page History

Versions Compared

Old Version 1

New Version Current

Key