[FIX] allow user to logout before set username (#13439)

packages/rocketchat-ui-login/client/login/form.html

@@ -119,33 +119,31 @@
 						</div>
 						{{/if}}
 					</div>
-						<div class="submit">
-							<button class='rc-button rc-button--primary login'><span>{{btnLoginSave}}</span></button>
-						</div>
+					<div class="rc-button__group rc-button__group--vertical">
+						<button class='rc-button rc-button--primary login'>{{btnLoginSave}}</button>
 						{{#if state 'login'}}
 							{{#if registrationAllowed}}
-								<div>
-									<button type="button" class="register">{{_ 'Register'}}</button>
-								</div>
+
+							<button type="button" class="rc-button rc-button--nude register">{{_ 'Register'}}</button>
+
 							{{else}}
-								{{#if linkReplacementText}}
-									<div class="register-link-replacement">
-										{{{linkReplacementText}}}
-									</div>
-								{{/if}}
+							{{#if linkReplacementText}}
+							<div class="register-link-replacement">
+								{{{linkReplacementText}}}
+							</div>
+							{{/if}}
 							{{/if}}
 							{{#if passwordResetAllowed}}
-								<div>
-									<button type="button" class="forgot-password">{{_ 'Forgot_password'}}</button>
-								</div>
+								<button type="button" class="rc-button rc-button--nude forgot-password">{{_ 'Forgot_password'}}</button>
 							{{/if}}
 						{{/if}}
+					</div>
 				{{/if}}
 			{{/if}}
 			{{#unless state 'login'}}
-				<div>
-					<button type="button" class="back-to-login">{{_ 'Back_to_login'}}</button>
-				</div>
+			<div class="rc-button__group rc-button__group--vertical">
+				<button type="button" class="rc-button rc-button--nude back-to-login">{{_ 'Back_to_login'}}</button>
+			</div>
 			{{/unless}}
 		</form>
 		<div class='login-terms'>

packages/rocketchat-ui-login/client/username/username.html

@@ -35,8 +35,9 @@
 				</div>
 
 				{{#if username.ready}}
-					<div class="submit">
-						<button data-loading-text="{{_ "Please_wait"}}..." class='button primary login'><span>{{_ "Use_this_username"}}</span></button>
+					<div class="rc-button__group rc-button__group--vertical">
+						<button data-loading-text="{{_ " Please_wait "}}..." class='rc-button rc-button--primary login'>{{_ "Use_this_username"}}</button>
+						<button type="reset" class='rc-button rc-button--nude'>{{_ "Logout"}}</button>
 					</div>
 				{{/if}}
 			</form>

packages/rocketchat-ui-login/client/username/username.js

@@ -43,7 +43,9 @@ Template.username.events({
 			return $(event.currentTarget).parents('.input-text').removeClass('focus');
 		}
 	},
-
+	'reset #login-card'() {
+		Meteor.logout();
+	},
 	'submit #login-card'(event, instance) {
 		event.preventDefault();
 

packages/rocketchat_theme/client/imports/forms/button.css

@@ -6,14 +6,16 @@
 	&--icon > svg {
 		margin: 0 5px 0 -5px;
 
+		font-size: 20px;
+		fill: currentColor;
+
 		.rtl & {
 			margin: 0 -5px 0 5px;
 		}
-
-		font-size: 20px;
-		fill: currentColor;
 	}
 
+	position: relative;
+
 	display: flex;
 
 	min-height: 40px;
@@ -38,6 +40,32 @@
 	align-items: center;
 	justify-content: center;
 
+	&:active,
+	&:focus:hover {
+		outline: none;
+	}
+
+	&:active {
+		transform: translateY(2px);
+
+		opacity: 0.9;
+	}
+
+	&:active::before {
+		top: -2px;
+	}
+
+	&::before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+
+		content: "";
+		cursor: pointer;
+	}
+
 	&:disabled {
 		cursor: default;
 
@@ -149,6 +177,30 @@
 			margin: 0 5px;
 		}
 	}
+
+	&__group {
+		display: flex;
+
+		flex-direction: row;
+
+		margin: 10px -5px;
+
+		& > .rc-button {
+			margin: 0 5px;
+		}
+
+		&--stretch {
+			justify-content: stretch;
+
+			& > .rc-button {
+				flex: 1 1;
+			}
+		}
+
+		&--vertical {
+			flex-direction: column;
+		}
+	}
 }
 
 @media (width < 780px) {

packages/rocketchat_theme/client/imports/general/base_old.css

@@ -4176,17 +4176,6 @@ body:not(.is-cordova) {
 		font-size: 10px;
 	}
 
-	& .submit,
-	& .register,
-	& .forgot-password,
-	& .back-to-login {
-		margin-top: 12px;
-
-		& button {
-			margin: 0 auto;
-		}
-	}
-
 	& .input-line {
 		position: relative;
 

tests/pageobjects/login.page.js

@@ -3,9 +3,9 @@ import mainContent from './main-content.page';
 
 class LoginPage extends Page {
 	get registerButton() { return browser.element('button.register'); }
-	get forgotPasswordButton() { return browser.element('button.forgot-password'); }
-	get backToLoginButton() { return browser.element('button.back-to-login'); }
-	get submitButton() { return browser.element('.submit > button'); }
+	get forgotPasswordButton() { return browser.element('.forgot-password'); }
+	get backToLoginButton() { return browser.element('.back-to-login'); }
+	get submitButton() { return browser.element('.login'); }
 
 	get emailOrUsernameField() { return browser.element('[name=emailOrUsername]'); }
 	get nameField() { return browser.element('[name=name]'); }