Daniela Feitosa · Michel Felipe
Showing 9 changed files Show diff stats
src/app/index.scss
src/app/layout/blocks/login-block/login-block.html
src/app/layout/scss/_forms.scss
src/app/layout/scss/_mixins.scss
src/app/layout/scss/skins/_whbl.scss
src/app/login/login.html
src/app/login/login.scss
src/languages/en.json
src/languages/pt.json
@@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 {
 @import "layout/scss/layout";
 @import "layout/scss/sidebar";
 @import "layout/scss/tables";
+@import "layout/scss/forms";
@@ -15,13 +15,13 @@
 <div class="logged-user-info" ng-show="!ctrl.currentUser">
   <form>
     <div class="form-group">
-      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
-      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
+      <label for="email">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="ctrl.credentials.username">
     </div>
     <div class="form-group">
-      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
-      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
+      <label for="passwd">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="ctrl.credentials.password">
     </div>
     <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button>
   </form>
-</div>
 \ No newline at end of file
+</div>
@@ -0,0 +1,36 @@
+label {
+  cursor: pointer;
+}
+
+.checkbox-nice {
+	position: relative;
+	padding-left: 15px;
+
+	input[type=checkbox] {
+		visibility: hidden;
+	}
+	label {
+		padding-top: 3px;
+	}
+	&.checkbox-inline > label {
+		margin-left: 16px;
+	}
+	label:before {
+    @include checkbox-mark(22px, 22px, 1px, 1px, #ffffff, 2px solid $main-bg-color);
+		@include border-radius(3px);
+	}
+	label:after {
+    @include checkbox-mark(12px, 7px, 7px, 6px, transparent, 3px solid #000);
+		@include opacity(0);
+
+		border-top: none;
+		border-right: none;
+		transform: rotate(-45deg);
+	}
+	label:hover::after {
+		@include opacity(0.3);
+	}
+	input[type=checkbox]:checked + label:after {
+		@include opacity(1);
+	}
+}
@@ -3,3 +3,15 @@
 	border-radius: $radius;
 	background-clip: padding-box; /* stops bg color from leaking outside the border: */
 }
+
+@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
+	width: $width;
+	height: $height;
+	cursor: $cursor;
+	position: $position;
+	left: $left;
+	top: $top;
+	background: $bg;
+	content: $content;
+	border: $border;
+}
@@ -306,6 +306,13 @@ $whbl-font-color: #16191c;
 		color: white;
 	}
+	/* Form overrides */
+	.checkbox-nice {
+		label:after {
+			border-color: $whbl-primary-color;
+		}
+	}
+
 }
 .rtl.skin-whbl #content-wrapper {
 	border-left: 0;
@@ -4,13 +4,21 @@
 <div class="modal-body">
   <form>
     <div class="form-group">
-      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
-      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="vm.credentials.username">
+      <label for="email">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="email" placeholder="{{'auth.form.login' | translate}}" ng-model="vm.credentials.username">
     </div>
     <div class="form-group">
-      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
-      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.credentials.password">
+      <label for="passwd">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password">
     </div>
-    <button type="submit" class="btn btn-default" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
+    <div class="form-inline">
+      <div class="checkbox-nice">
+        <input type="checkbox" id="keep-logged">
+        <label for="keep-logged">
+          {{"auth.form.keepLoggedIn" | translate}}
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-default btn-block" ng-click="vm.login()">{{"auth.form.login_button" | translate}}</button>
   </form>
 </div>
@@ -0,0 +1,55 @@
+.modal-content{
+  padding: 40px;
+}
+.modal-header {
+  border-bottom: 0;
+  text-align: center;
+}
+form {
+  margin-bottom: 30px;
+}
+form button {
+  margin-top: 20px;
+  text-transform: uppercase;
+}
+.strike {
+  display: block;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 25px 0;
+}
+
+.strike > span {
+  position: relative;
+  display: inline-block;
+}
+
+.strike > span:before,
+.strike > span:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 9999px;
+  height: 1px;
+  background: black;
+}
+
+.strike > span:before {
+  right: 100%;
+  margin-right: 15px;
+}
+
+.strike > span:after {
+  left: 100%;
+  margin-left: 15px;
+}
+.strike span {
+  text-transform: uppercase;
+}
+#oauth-block span {
+  margin: 5px;
+}
+#create-account {
+  padding: 30px 0 0;
+}
@@ -21,9 +21,10 @@
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
   "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
-  "auth.title": "Login",
-  "auth.form.login": "Login / Email address",
+  "auth.title": "Great to have you back!",
+  "auth.form.login": "Username or Email address",
   "auth.form.password": "Password",
+  "auth.form.keepLoggedIn": "Keep me logged in",
   "auth.form.login_button": "Login",
   "navbar.content_viewer_actions.new_item": "New Item",
   "navbar.profile_actions.new_item": "New Item",
@@ -21,9 +21,10 @@
   "activities.create_article.description": "publicou em",
   "activities.add_member_in_community.description": "entrou na comunidade",
   "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
-  "auth.title": "Login",
-  "auth.form.login": "Login / Email",
+  "auth.title": "Legal ter você de volta!",
+  "auth.form.login": "Nome de usuário ou Email",
   "auth.form.password": "Senha",
+  "auth.form.keepLoggedIn": "Continuar logado",
   "auth.form.login_button": "Login",
   "navbar.content_viewer_actions.new_item": "Novo Item",
   "navbar.profile_actions.new_item": "Novo Item",
	@@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 {		@@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 {
82	@import "layout/scss/layout";	82	@import "layout/scss/layout";
83	@import "layout/scss/sidebar";	83	@import "layout/scss/sidebar";
84	@import "layout/scss/tables";	84	@import "layout/scss/tables";
		85	+@import "layout/scss/forms";
@@ -0,0 +1,36 @@		@@ -0,0 +1,36 @@
	1	+label {
	2	+ cursor: pointer;
	3	+}
	4	+
	5	+.checkbox-nice {
	6	+ position: relative;
	7	+ padding-left: 15px;
	8	+
	9	+ input[type=checkbox] {
	10	+ visibility: hidden;
	11	+ }
	12	+ label {
	13	+ padding-top: 3px;
	14	+ }
	15	+ &.checkbox-inline > label {
	16	+ margin-left: 16px;
	17	+ }
	18	+ label:before {
	19	+ @include checkbox-mark(22px, 22px, 1px, 1px, #ffffff, 2px solid $main-bg-color);
	20	+ @include border-radius(3px);
	21	+ }
	22	+ label:after {
	23	+ @include checkbox-mark(12px, 7px, 7px, 6px, transparent, 3px solid #000);
	24	+ @include opacity(0);
	25	+
	26	+ border-top: none;
	27	+ border-right: none;
	28	+ transform: rotate(-45deg);
	29	+ }
	30	+ label:hover::after {
	31	+ @include opacity(0.3);
	32	+ }
	33	+ input[type=checkbox]:checked + label:after {
	34	+ @include opacity(1);
	35	+ }
	36	+}
	@@ -3,3 +3,15 @@		@@ -3,3 +3,15 @@
3	border-radius: $radius;	3	border-radius: $radius;
4	background-clip: padding-box; /* stops bg color from leaking outside the border: */	4	background-clip: padding-box; /* stops bg color from leaking outside the border: */
5	}	5	}
		6	+
		7	+@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
		8	+ width: $width;
		9	+ height: $height;
		10	+ cursor: $cursor;
		11	+ position: $position;
		12	+ left: $left;
		13	+ top: $top;
		14	+ background: $bg;
		15	+ content: $content;
		16	+ border: $border;
		17	+}
	@@ -306,6 +306,13 @@ $whbl-font-color: #16191c;		@@ -306,6 +306,13 @@ $whbl-font-color: #16191c;
306	color: white;	306	color: white;
307	}	307	}
308		308
		309	+ /* Form overrides */
		310	+ .checkbox-nice {
		311	+ label:after {
		312	+ border-color: $whbl-primary-color;
		313	+ }
		314	+ }
		315	+
309	}	316	}
310	.rtl.skin-whbl #content-wrapper {	317	.rtl.skin-whbl #content-wrapper {
311	border-left: 0;	318	border-left: 0;
@@ -0,0 +1,55 @@		@@ -0,0 +1,55 @@
	1	+.modal-content{
	2	+ padding: 40px;
	3	+}
	4	+.modal-header {
	5	+ border-bottom: 0;
	6	+ text-align: center;
	7	+}
	8	+form {
	9	+ margin-bottom: 30px;
	10	+}
	11	+form button {
	12	+ margin-top: 20px;
	13	+ text-transform: uppercase;
	14	+}
	15	+.strike {
	16	+ display: block;
	17	+ text-align: center;
	18	+ overflow: hidden;
	19	+ white-space: nowrap;
	20	+ padding: 25px 0;
	21	+}
	22	+
	23	+.strike > span {
	24	+ position: relative;
	25	+ display: inline-block;
	26	+}
	27	+
	28	+.strike > span:before,
	29	+.strike > span:after {
	30	+ content: "";
	31	+ position: absolute;
	32	+ top: 50%;
	33	+ width: 9999px;
	34	+ height: 1px;
	35	+ background: black;
	36	+}
	37	+
	38	+.strike > span:before {
	39	+ right: 100%;
	40	+ margin-right: 15px;
	41	+}
	42	+
	43	+.strike > span:after {
	44	+ left: 100%;
	45	+ margin-left: 15px;
	46	+}
	47	+.strike span {
	48	+ text-transform: uppercase;
	49	+}
	50	+#oauth-block span {
	51	+ margin: 5px;
	52	+}
	53	+#create-account {
	54	+ padding: 30px 0 0;
	55	+}