Refactory html template + new environment service property

Michel Felipe
1 parent 716c2a26
Showing 3 changed files with 53 additions and 35 deletions Show diff stats
src/app/account/register-component.html
src/app/account/register.component.ts
src/languages/en.json
 <div class="register-page">
   <div class="welcome-message">
     <h1>{{"account.register.welcomeMessageTitle" | translate }}</h1>
-    <p>{{"account.register.welcomeMessage" | translate }}</p>
-    <p>{{"account.register.seeMoreMessage" | translate}}<a href="#">{{"account.register.informationsMessage" | translate}}</a></p>
+    <div class="environment-signup-intro" ng-bind-html="ctrl.environment.signup_intro"></div>
+    <p>{{"account.register.seeMoreMessage" | translate}} <a href="#">{{"account.register.informationsMessage" | translate}} </a></p>
   </div>
   <form>
     <div class="row">
       <div class="col-md-6 register-field">
-        <label for="name">{{"account.register.firstNameLabel" | translate }}</label>
-        <input type="text" class="form-control" id="name" placeholder="joao" ng-model="ctrl.account.name">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
+          <input type="text" class="form-control" id="name" placeholder="{{'account.register.firstNameLabel' | translate }}" ng-model="ctrl.account.name">
+        </div>
       </div>
       <div class="col-md-6 register-field">
-        <label for="lastName">{{"account.register.lastNameLabel" | translate }}</label>
-        <input type="text" class="form-control" id="lastName" placeholder="silva" ng-model="ctrl.account.lastName">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-male"></i><i class="fa fa-female"></i></span>
+          <input type="text" class="form-control" id="lastName" placeholder="{{'account.register.lastNameLabel' | translate }}" ng-model="ctrl.account.lastName">
+        </div>
       </div>
       <div class="col-md-12 register-field">
-        <label for="login">{{"account.register.usernameLabel" | translate }}</label>
-        <input type="text" class="form-control" id="login" placeholder="username" ng-model="ctrl.account.login">
-        <p class="light-text">ex: ola.coop.br/joaosilva</p>
+        <div class="input-group">
+          <span class="input-group-addon" style="font-weight: bold;"><i class="fa fa-globe"></i>&nbsp;http://ola.coop.br/</span>
+          <input type="text" class="form-control" id="login" placeholder="{{'account.register.usernameLabel' | translate }}" ng-model="ctrl.account.login">
+        </div>
       </div>
       <div class="col-md-12 register-field">
-        <label for="email">{{"account.register.emailLabel" | translate }}</label>
-        <input type="text" class="form-control" id="email" placeholder="Email" ng-model="ctrl.account.email">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
+          <input type="text" class="form-control" id="email" placeholder="{{'account.register.emailLabel' | translate }}" ng-model="ctrl.account.email">
+        </div>
       </div>
       <div class="col-md-6 register-field">
-        <label for="password">{{"account.register.passwordLabel" | translate }}</label>
-        <input type="password" class="form-control" id="password" placeholder="Password" ng-model="ctrl.account.password">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
+          <input type="password" class="form-control" id="password" placeholder="{{'account.register.passwordLabel' | translate }}" ng-model="ctrl.account.password">
+        </div>
       </div>
       <div class="col-md-6 register-field">
-        <label for="password-confirmation">{{"account.register.passwordConfirmationLabel" | translate}}</label>
-        <input type="password" class="form-control" id="passwordConfirmation" placeholder="Password Confirmation" ng-model="ctrl.account.password_confirmation">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
+          <input type="password" class="form-control" id="passwordConfirmation" placeholder="{{'account.register.passwordConfirmationLabel' | translate}}" ng-model="ctrl.account.password_confirmation">
+        </div>
       </div>
       <div class="col-md-12">
 import { Inject, Input, Component, Output, EventEmitter, provide } from 'ng-forward';
 import { RegisterService } from "./../../lib/ng-noosfero-api/http/register.service";
 import { NotificationService } from "./../shared/services/notification.service";
+import { EnvironmentService } from "../../lib/ng-noosfero-api/http/environment.service";
 @Component({
     selector: 'noosfero-register',
@@ -10,12 +11,19 @@ import { NotificationService } from &quot;./../shared/services/notification.service&quot;;
     ]
 })
-@Inject("$state", RegisterService, NotificationService)
+@Inject("$state", RegisterService, NotificationService, EnvironmentService)
 export class RegisterComponent {
     @Input() account: any;
+    environment: noosfero.Environment;
-    constructor(private $state: ng.ui.IStateService, public registerService: RegisterService, private notificationService: NotificationService) {
+    constructor(
+        private $state: ng.ui.IStateService,
+        public registerService: RegisterService,
+        private notificationService: NotificationService,
+        private environmentService: EnvironmentService
+    ) {
         this.account = {};
+        this.environment = environmentService.getCurrentEnvironment();
     }
     signup() {
@@ -31,23 +31,6 @@
   "auth.createAccount": "Create account",
   "navbar.content_viewer_actions.new_item": "New Item",
   "navbar.profile_actions.new_item": "New Item",
-  "account.register.welcomeMessageTitle": "Nice to have you there!",
-  "account.register.welcomeMessage": "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
-  "account.register.seeMoreMessage": "See more ",
-  "account.register.informationsMessage": "informations",
-  "account.register.firstNameLabel": "First Name",
-  "account.register.lastNameLabel": "Last Name",
-  "account.register.usernameLabel": "Username",
-  "account.register.emailLabel": "Email",
-  "account.register.passwordLabel": "Password",
-  "account.register.passwordConfirmationLabel": "Password Confirmation",
-  "account.register.accountCreatingMessage": "By creating an account, you are agreeing with the ",
-  "account.register.signupMessage": "Create Account",
-  "account.register.haveAccountMessage": "Already have an account?",
-  "account.register.termsOfUseMessage": "terms of use",
-  "account.register.success.title": "Good job!",
-  "account.register.success.message": "Account created!",
-  "account.register.passwordConfirmation.failed": "Wrong password confirmation"
   "navbar.content_viewer_actions.new_post": "New Post",
   "navbar.content_viewer_actions.new_discussion": "New Discussion",
   "navbar.profile_actions.new_discussion": "New Discussion",
@@ -118,5 +101,21 @@
   "block.edition.language.label": "Show for:",
   "activities.event.description": "Event on",
   "time.at": "at",
-  "date.on": "On"
+  "date.on": "On",
+  "account.register.welcomeMessageTitle": "Nice to have you there!",
+  "account.register.seeMoreMessage": "See more ",
+  "account.register.informationsMessage": "informations",
+  "account.register.firstNameLabel": "First name",
+  "account.register.lastNameLabel": "Last name",
+  "account.register.usernameLabel": "Username",
+  "account.register.emailLabel": "Email",
+  "account.register.passwordLabel": "Password",
+  "account.register.passwordConfirmationLabel": "Password confirmation",
+  "account.register.accountCreatingMessage": "By creating an account, you are agreeing with the ",
+  "account.register.signupMessage": "Register",
+  "account.register.haveAccountMessage": "Already have an account?",
+  "account.register.termsOfUseMessage": "terms of use",
+  "account.register.success.title": "Good job!",
+  "account.register.success.message": "Account created!",
+  "account.register.passwordConfirmation.failed": "Wrong password confirmation"
 }