Redesign form admin view as well as added preview in design pane

This commit is contained in:
David Baldwynn 2016-08-25 22:48:44 -07:00
parent 4b1562f96a
commit 5add4f2ce9
22 changed files with 302 additions and 201 deletions

7
=
View file

@ -1,7 +0,0 @@
Merge branch 'stage' of https://github.com/whitef0x0/tellform into stage
# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

View file

@ -13,8 +13,8 @@ exports.index = function(req, res) {
};
exports.form = function(req, res) {
//Allow form to be embeded
res.removeHeader('X-Frame-Options');
//Allow form to be embedded
res.set('X-Frame-Options', 'GOFORIT');
res.render('form', {
user: req.user || null,

View file

@ -6,11 +6,12 @@ angular.module('core').controller('HeaderController', ['$rootScope', '$scope', '
$rootScope.signupDisabled = $window.signupDisabled;
$scope.user = $rootScope.user = Auth.ensureHasCurrentUser(User);
console.log(Auth.ensureHasCurrentUser(User));
$scope.authentication = $rootScope.authentication = Auth;
$rootScope.languages = $scope.languages = ['en', 'fr', 'es', 'it', 'de'];
console.log($locale.id);
//Set global app language
if($scope.authentication.isAuthenticated()){
$rootScope.language = $scope.user.language;

View file

@ -10,6 +10,27 @@ body {
float: none;
}
/* Custom CSS for Buttons */
.btn-rounded {
border-radius: 100px;
font-size: 14px;
padding: 10px 28px;
margin: 0 2px;
margin-top: 1em;
text-transform: uppercase;
text-decoration: none!important;
}
.btn-secondary {
background: #DDDDDD;
color: #4c4c4c;
border: 2px #4c4c4c solid;
}
.btn-secondary:hover {
background: #cacaca;
border-color: #cacaca;
}
/*Navbar Custom CSS*/
.navbar {
min-height: 60px;
@ -33,6 +54,7 @@ body {
min-height: 60px;
}
.navbar-nav > li > a {
padding-top: 20px;
color: white;
}
.navbar-nav > li:hover, .navbar-nav > li.active {

View file

@ -1,8 +1,12 @@
'use strict';
// Forms controller
angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope', '$stateParams', '$state', 'Forms', 'CurrentForm', '$http', '$uibModal', 'myForm', '$filter',
function($rootScope, $scope, $stateParams, $state, Forms, CurrentForm, $http, $uibModal, myForm, $filter) {
angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope', '$stateParams', '$state', 'Forms', 'CurrentForm', '$http', '$uibModal', 'myForm', '$filter', '$sce',
function($rootScope, $scope, $stateParams, $state, Forms, CurrentForm, $http, $uibModal, myForm, $filter, $sce) {
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
};
$scope = $rootScope;
$scope.animationsEnabled = true;
@ -11,24 +15,34 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope
CurrentForm.setForm($scope.myform);
$scope.formURL = $scope.myform.admin.username + '.tellform.com';
$scope.formURL = "/#!/forms/" + $scope.myform._id;
$scope.tabData = [
console.log($scope.myform);
$scope.actualFormURL = window.location.protocol + '//' + $scope.myform.admin.username + '.' + window.location.host + "/#!/forms/" + $scope.myform._id;
var refreshFrame = $scope.refreshFrame = function(){
document.getElementById('iframe').contentWindow.location.reload();
};
$scope.tabData = [
{
heading: $filter('translate')('CREATE_TAB'),
route: 'viewForm.create'
templateName: 'create'
},
{
/*{
heading: $filter('translate')('DESIGN_TAB'),
route: 'viewForm.design'
},
templateName: 'design'
},*/
{
heading: $filter('translate')('CONFIGURE_TAB'),
route: 'viewForm.configure'
templateName: 'configure'
},
{
heading: $filter('translate')('ANALYZE_TAB'),
route: 'viewForm.analyze'
templateName: 'analyze'
}
];
@ -93,6 +107,7 @@ angular.module('forms').controller('AdminFormController', ['$rootScope', '$scope
// Update existing Form
$scope.update = $rootScope.update = function(updateImmediately, cb){
refreshFrame();
var continueUpdate = true;
if(!updateImmediately){

View file

@ -2,7 +2,7 @@
<div class="container" cg-busy="{promise:updatePromise,templateUrl:'modules/forms/admin/views/directiveViews/cgBusy/update-form-message-TypeB.html',message:'Updating form...', backdrop:false, wrapperClass:'.busy-updating-wrapper'}"></div>
<section class="container admin-form">
<section class="admin-form">
<!-- Modal Delete Dialog Template -->
<script type="text/ng-template" id="myModalContent.html">
@ -29,7 +29,7 @@
</div>
</script>
<div class="page-header row-fluid" style="padding-bottom: 1em;">
<div class="page-header" style="padding-bottom: 1em;">
<div class="col-xs-10 col-sm-8">
<h1 class="hidden-sm hidden-xs" data-ng-bind="myform.title" style="margin-bottom: 0px;"></h1>
<h2 class="hidden-md hidden-lg" data-ng-bind="myform.title" style="margin-bottom: 0px;"></h2>
@ -45,13 +45,13 @@
</div>
<div class="col-xs-1 col-sm-2">
<small class="pull-right">
<a class="btn btn-default view-form-btn" href="//{{formURL}}/#!/forms/{{myform._id}}">
<a class="btn btn-secondary view-form-btn" href="{{actualFormURL}}">
<span class="hidden-xs hidden-sm">
{{ 'VIEW' | translate }}
<span ng-show="myform.isLive">
{{ 'LIVE' | translate }}
</span>
<span ng-hide="myform.isLive">{{ 'PREVIEW' | translate }}</span> {{ 'FORM' | translate }}
<span ng-hide="myform.isLive">{{ 'PREVIEW' | translate }}</span>
</span>
<span class="hidden-xs hidden-md hidden-lg">
View
@ -65,16 +65,84 @@
</div>
</div>
<div class="row-fluid">
<div class="row">
<div class="col-xs-12">
<!-- <tabset> -->
<tabs data="tabData"></tabs>
<!-- </tabset> -->
</div>
<uib-tabset active="activePill" vertical="true" type="pills">
<uib-tab ng-repeat="tab in tabData" index="$index" heading="{{tab.heading}}">
<div class='row' data-ng-include="'/static/modules/forms/admin/views/adminTabs/'+tab.templateName+'.html'" onload="form_url = trustSrc(formURL)"></div>
</uib-tab>
<uib-tab heading="Design" index="5">
<div class="config-form design container">
<div class="row">
<div class="col-md-4 col-sm-12 container">
<div class="row field">
<div class="field-title col-sm-5">
<h5>{{ 'BACKGROUND_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-6">
<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.backgroundColor" ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
</div>
</div>
<div class="col-xs-12">
<ui-view></ui-view>
</div>
<div class="row field">
<div class="field-title col-sm-5">
<h5>{{ 'QUESTION_TEXT_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-6">
<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-5">
<h5>{{ 'ANSWER_TEXT_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-6">
<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-5">
<h5>{{ 'BTN_BACKGROUND_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-6">
<input class="form-control" colorpicker="hex" type="text"
ng-model="myform.design.colors.buttonColor"
ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-5">
<h5>{{ 'BTN_TEXT_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-6">
<input class="form-control" colorpicker="hex" type="text"
ng-model="myform.design.colors.buttonTextColor"
ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
</div>
</div>
</div>
<div class="col-md-8 hide-md hide-lg">
<iframe id="iframe" ng-if="!!formURL" src="{{trustSrc(formURL)}}" style="border: none; box-shadow: 0px 0px 10px 0px grey; overflow: hidden; height: 400px; width: 90%; position: absolute;"></iframe>
</div>
</div>
<div class="row">
<div class="col-sm-offset-4 col-sm-2">
<button class="btn btn-signup btn-rounded" type="button" ng-click="update(false, null)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
</div>
<div class="col-sm-1">
<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
</div>
</div>
</div>
</uib-tab>
</uib-tabset>
</div>
</div>
</section>

View file

@ -1,21 +1,12 @@
<div class="config-form design container">
<div class="row">
<div class="col-md-12 container">
<div class="row">
<div class="col-sm-12">
<h2 class="hidden-sm hidden-xs">{{ 'DESIGN_HEADER' | translate }}</h2>
<h3 class="hidden-lg hidden-md">{{ 'DESIGN_HEADER' | translate }}</h3>
</div>
</div>
<div class="col-md-4 col-sm-12 container">
<div class="row field">
<div class="field-title col-sm-3">
<h5>{{ 'BACKGROUND_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-9">
<input colorpicker="hex" type="text" ng-model="myform.design.colors.backgroundColor" ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
<div class="field-input col-sm-6">
<input ng-change="refreshIframe()" class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.backgroundColor" ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
</div>
</div>
@ -24,11 +15,8 @@
<h5>{{ 'QUESTION_TEXT_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-9">
<input colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
<div class="field-input col-sm-6">
<input ng-change="refreshIframe()" class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
</div>
</div>
@ -37,8 +25,8 @@
<h5>{{ 'ANSWER_TEXT_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-9">
<input colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
<div class="field-input col-sm-6">
<input ng-change="refreshIframe()" class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
</div>
</div>
@ -47,8 +35,8 @@
<h5>{{ 'BTN_BACKGROUND_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-9">
<input colorpicker="hex" type="text"
<div class="field-input col-sm-6">
<input ng-change="refreshIframe()" class="form-control" colorpicker="hex" type="text"
ng-model="myform.design.colors.buttonColor"
ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
</div>
@ -58,21 +46,24 @@
<h5>{{ 'BTN_TEXT_COLOR' | translate }}</h5>
</div>
<div class="field-input col-sm-9">
<input colorpicker="hex" type="text"
<div class="field-input col-sm-6">
<input ng-change="refreshIframe()" class="form-control" colorpicker="hex" type="text"
ng-model="myform.design.colors.buttonTextColor"
ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
</div>
</div>
</div>
<div class="col-md-8 hide-md hide-lg">
<iframe refreshable="refreshDesign" ng-if="!!form_url" src="{{form_url}}" style="border: none; box-shadow: 0px 0px 10px 0px grey; overflow: hidden; height: 95vh; width: 90%; position: absolute;"></iframe>
</div>
</div>
<div class="row">
<div class="col-sm-offset-4 col-sm-2">
<button class="btn btn-primary btn-large" type="button" ng-click="update(false, null)"><i class="icon-arrow-left icon-white"></i> Save Changes</button>
</div>
<div class="col-sm-1">
<button class="btn btn-default" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i> Cancel</button>
</div>
<div class="col-sm-offset-4 col-sm-2">
<button class="btn btn-signup btn-rounded" type="button" ng-click="update(false, null)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
</div>
<div class="col-sm-1">
<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
</div>
</div>
</div>

View file

@ -1,22 +1,21 @@
<div class="config-form container">
<div class="row">
<!-- Settings -->
<div class="col-sm-12 container-fluid">
<div class="row">
<div class="col-sm-12">
<h2 class="hidden-sm hidden-xs">{{ 'ADVANCED_SETTINGS' | translate }}</h2>
<h3 class="hidden-lg hidden-md">{{ 'ADVANCED_SETTINGS' | translate }}</h3>
</div>
</div>
<!--<div class="row">
<div class="col-sm-offset-2 col-sm-10">
<h2 class="hidden-sm hidden-xs">{{ 'ADVANCED_SETTINGS' | translate }}</h2>
<h3 class="hidden-lg hidden-md">{{ 'ADVANCED_SETTINGS' | translate }}</h3>
</div>
</div>-->
<!-- Settings -->
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<div class="row field">
<div class="field-title col-sm-4">
<div class="field-title col-sm-12">
<h5>{{ 'FORM_NAME' | translate }}</h5>
</div>
<div class="col-sm-8">
<input type="text"
<div class="col-sm-12">
<input class="form-control"
type="text"
ng-model="myform.title"
value="{{myform.title}}"
style="width: 100%;"
@ -26,44 +25,28 @@
</div>
<div class="row field">
<div class="field-title col-sm-6">
<div class="field-title col-sm-12">
<h5>{{ 'FORM_STATUS' | translate }}</h5>
</div>
<div class="field-input col-sm-6">
<div class="field-input col-sm-12">
<label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.isLive" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'PUBLIC' | translate }}</span>
</label>
<label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.isLive" ng-required="true" />
&nbsp;<span>{{ 'PRIVATE' | translate }}</span>
</label>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-4">
<h5>{{ 'GA_TRACKING_CODE' | translate }}</h5>
</div>
<div class="col-sm-8">
<input type="text"
ng-model="myform.analytics.gaCode"
value="{{myform.analytics.gaCode}}"
style="width: 100%;"
ng-minlength="4"
placeholder="UA-XXXXX-Y"
ng-pattern="/\bUA-\d{4,10}-\d{1,4}\b/">
</div>
</div>
<div class="row field">
<div class="col-xs-6 field-title">Language</div>
<div class="col-xs-4 field-input">
<div class="col-sm-12 field-title">Language</div>
<div class="col-sm-12 field-input">
<select ng-model="myform.language">
<option ng-repeat="language in languages"
ng-selected="language == myform.language"
@ -74,51 +57,69 @@
<span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-6">
<h5>{{ 'DISPLAY_FOOTER' | translate }}</h5>
</div>
<div class="field-input col-sm-6">
<label>
<input type="radio" data-ng-value="false" ng-model="myform.hideFooter" ng-required="true" />
&nbsp;<span>{{ 'YES' | translate }}</span>
</label>
<label>
<input type="radio" data-ng-value="true" ng-model="myform.hideFooter" ng-required="true" />
&nbsp;<span>{{ 'No' | translate }}</span>
</label>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-6">
<h5>Display Start Page?</h5>
</div>
<div class="field-input col-sm-6">
<label>
<input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'YES' | translate }}</span>
</label>
<label>
<input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart" ng-required="true" />
&nbsp;<span>{{ 'NO' | translate }}</span>
</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'GA_TRACKING_CODE' | translate }}</h5>
</div>
<div class="col-sm-12">
<input class="form-control"
type="text"
ng-model="myform.analytics.gaCode"
value="{{myform.analytics.gaCode}}"
style="width: 100%;"
ng-minlength="4"
placeholder="UA-XXXXX-Y"
ng-pattern="/\bUA-\d{4,10}-\d{1,4}\b/">
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'DISPLAY_FOOTER' | translate }}</h5>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.hideFooter" ng-required="true" />
&nbsp;<span>{{ 'YES' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.hideFooter" ng-required="true" />
&nbsp;<span>{{ 'No' | translate }}</span>
</label>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>Display Start Page?</h5>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'YES' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart" ng-required="true" />
&nbsp;<span>{{ 'NO' | translate }}</span>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-offset-4 col-sm-2">
<button class="btn btn-primary btn-large" type="button" ng-click="update(false, null)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
</div>
<div class="col-sm-1">
<button class="btn btn-default" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
</div>
<div class="col-sm-offset-4 col-sm-2">
<button class="btn btn-signup btn-rounded" type="button" ng-click="update(false, null)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
</div>
<div class="col-sm-1">
<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
</div>
</div>
</div>

View file

@ -1,7 +1,7 @@
<form class="row container" name="editForm" auto-save-form auto-save-watch="myform" auto-save-callback="update">
<!-- Add Fields Element -->
<div class="col-xs-2 col-sm-4 col-md-4 add-field">
<div class="col-xs-2 col-sm-4 add-field">
<div class="row add-field-title">
<h3 class="col-md-12 hidden-sm hidden-xs">{{ 'ADD_FIELD_LG' | translate }}</h3>

View file

@ -1,8 +1,5 @@
<div class="submissions-table row container">
<div class="row text-center analytics">
<div class="row col-xs-12 header-numbers">
Overview Analytics
</div>
<div class="row col-xs-12 header-title">
<div class="col-xs-3">
{{ 'TOTAL_VIEWS' | translate }}
@ -37,9 +34,6 @@
{{AverageTimeElapsed | secondsToDateTime | date:'mm:ss'}}
</div>
</div>
<div class="row col-xs-12 header-numbers">
Device Analytics
</div>
<div class="row col-xs-12 detailed-title">
<div class="col-xs-3">
{{ 'DESKTOP_AND_LAPTOP' | translate }}
@ -210,9 +204,6 @@
</div>
</div>
<div class="row col-xs-12 text-center" style="font-size:5em;">
Field Analytics
</div>
<div class="row col-xs-12 field-title-row">
<div class="col-xs-3">
@ -247,9 +238,6 @@
</div>
</div>
<br>
<div class="row col-xs-12 header-numbers text-center" style="font-size:5em;">
Responses Table
</div>
<div class="row table-tools">
<div class="col-xs-2">
<button class="btn btn-danger" ng-click="deleteSelectedSubmissions()" ng-disabled="!isAtLeastOneChecked();">

View file

@ -1,3 +1,19 @@
/* Custom Tab CSS */
.nav.nav-pills.nav-stacked {
width: 16.66666667%;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
}
div.tab-content {
width: 83.33333333%;
position: relative;
min-height: 1px;
float:left;
padding-top: 0!important;
}
.panel-default.startPage {
border-style: dashed;
border-color: #a9a9a9;
@ -302,6 +318,8 @@ div.config-form .row.field {
}
.admin-form .page-header {
border: none;
margin-top: none;
margin-bottom: none;
}
/*Styles for admin view tabs */

View file

@ -4,7 +4,8 @@ angular.module('users').config(['$translateProvider', function ($translateProvid
$translateProvider.translations('en', {
ACCESS_DENIED_TEXT: 'You need to be logged in to access this page',
USERNAME_LABEL: 'Username or Email',
USERNAME_OR_EMAIL_LABEL: 'Username or Email',
USERNAME_LABEL: 'Username',
PASSWORD_LABEL: 'Password',
CURRENT_PASSWORD_LABEL: 'Current Password',
NEW_PASSWORD_LABEL: 'New Password',
@ -23,6 +24,7 @@ angular.module('users').config(['$translateProvider', function ($translateProvid
SIGNUP_ERROR_TEXT: 'Couldn\'t complete registration due to errors',
ENTER_ACCOUNT_EMAIL: 'Enter your account email.',
RESEND_VERIFICATION_EMAIL: 'Resend Verification Email',
SAVE_CHANGES: 'Save Changes',
UPDATE_PROFILE_BTN: 'Update Profile',
PROFILE_SAVE_SUCCESS: 'Profile saved successfully',

View file

@ -2,8 +2,9 @@
angular.module('users').controller('PasswordController', ['$scope', '$stateParams', '$state', 'User',
function($scope, $stateParams, $state, User) {
$scope.error = '';
$scope.error = '';
// Submit forgotten password account id
$scope.askForPasswordReset = function() {
User.askForPasswordReset($scope.credentials).then(
@ -37,4 +38,4 @@ angular.module('users').controller('PasswordController', ['$scope', '$stateParam
);
};
}
]);
]);

View file

@ -1,10 +1,11 @@
'use strict';
angular.module('users').controller('SettingsController', ['$scope', '$rootScope', '$http', '$state', 'Users',
function($scope, $rootScope, $http, $state, Users) {
$scope.user = $rootScope.user;
angular.module('users').controller('SettingsController', ['$scope', '$rootScope', '$http', '$state', 'Users', 'Auth',
function($scope, $rootScope, $http, $state, Users, Auth) {
// Check if there are additional accounts
$scope.user = Auth.currentUser;
// Check if there are additional accounts
$scope.hasConnectedAdditionalSocialAccounts = function(provider) {
for (var i in $scope.user.additionalProvidersData) {
return true;
@ -12,6 +13,10 @@ angular.module('users').controller('SettingsController', ['$scope', '$rootScope'
return false;
};
$scope.cancel = function(){
$scope.user = Auth.currentUser;
};
// Check if provider is already in use with current user
$scope.isConnectedSocialAccount = function(provider) {
return $scope.user.provider === provider || ($scope.user.additionalProvidersData && $scope.user.additionalProvidersData[provider]);
@ -65,4 +70,4 @@ angular.module('users').controller('SettingsController', ['$scope', '$rootScope'
};
}
]);
]);

View file

@ -55,35 +55,25 @@ section.auth {
color: #4c4c4c;
}
section.auth .btn {
border-radius: 100px;
font-size: 14px;
padding: 10px 28px;
margin: 0 2px;
margin-top: 1em;
text-transform: uppercase;
text-decoration: none!important;
}
section.auth .btn-signup {
.btn-rounded.btn-signup {
background-color: #FFD747;
color: #896D0B;
border: 2px #FFD747 solid;
width: 100%;
}
section.auth .btn-signup:hover {
.btn-rounded.btn-signup:hover {
color: #FFD747;
background-color: #896D0B;
border: 2px #896D0B solid;
}
section.auth .btn-default {
.btn-rounded.btn-default {
background-color: transparent;
color: white;
border: 2px white solid;
}
section.auth .btn-default:focus, section.auth .btn-default:hover {
.btn-rounded.btn-default:focus, .btn-rounded.btn-default:hover {
color: #6450A0;
background-color: white;
border-color: white;
@ -104,10 +94,13 @@ section.auth {
position: absolute;
}
input.form-control {
section.auth input.form-control {
border: none;
border-radius: 4px;
color: white;
}
input.form-control {
border-radius: 4px;
box-shadow: none;
font-size: 18px;
padding: 30px 20px;

View file

@ -32,14 +32,14 @@
</div>
<div class="form-group">
<!--<label for="username">{{ 'USERNAME_LABEL' | translate }}</label>-->
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="{{ 'USERNAME_LABEL' | translate }}" ng-minlength="4">
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="{{ 'USERNAME_OR_EMAIL_LABEL' | translate }}" ng-minlength="4">
</div>
<div class="form-group">
<!--<label for="password">{{ 'PASSWORD_LABEL' | translate }}</label>-->
<input type="password" id="password" name="password" class="form-control" data-ng-model="credentials.password" placeholder="{{ 'PASSWORD_LABEL' | translate }}" ng-minlength="4">
</div>
<div class="form-group">
<button class="btn btn-signup" ng-click="signin()">{{ 'SIGNIN_BTN' | translate }}</button>
<button class="btn btn-signup btn-rounded btn-block" ng-click="signin()">{{ 'SIGNIN_BTN' | translate }}</button>
</div>
<div class="text-center forgot-password">
<a ui-sref="forgot">{{ 'FORGOT_PASSWORD_LINK' | translate }}</a>

View file

@ -29,7 +29,7 @@
<p>
<strong>{{ 'BEFORE_YOU_CONTINUE' | translate }}</strong> <a href="mail:polydaic@gmail.com">polydaic@gmail.com</a></p>
<div class="text-center form-group">
<button type="submit" class="btn btn-large btn-primary">
<button type="submit" class="btn btn-primary btn-rounded">
<a href="/#!/" style="color: white; text-decoration: none;">Continue</a>
</button>
</div>

View file

@ -43,7 +43,7 @@
<input type="password" id="password" name="password" class="form-control" ng-model="credentials.password" placeholder="{{ 'PASSWORD_LABEL' | translate }}" ng-minlength="4">
</div>
<div class="text-center form-group">
<button type="submit" class="btn btn-signup">{{ 'SIGNUP_BTN' | translate }}</button>
<button type="submit" class="btn btn-signup btn-rounded btn-block">{{ 'SIGNUP_BTN' | translate }}</button>
</div>
</fieldset>

View file

@ -8,10 +8,10 @@
<form data-ng-submit="askForPasswordReset()" autocomplete="off">
<fieldset>
<div class="form-group">
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="{{ 'USERNAME_LABEL' | translate }}">
<input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="{{ 'USERNAME_OR_EMAIL_LABEL' | translate }}">
</div>
<div class="text-center form-group">
<button type="submit" class="btn btn-signup">{{ 'PASSWORD_RESTORE_HEADER' | translate }}</button>
<button type="submit" class="btn btn-signup btn-rounded btn-block">{{ 'PASSWORD_RESTORE_HEADER' | translate }}</button>
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong>{{error}}</strong>

View file

@ -1,7 +1,7 @@
<header data-ng-include="'/static/modules/core/views/header.client.view.html'"></header>
<section class="row" data-ng-controller="SettingsController">
<h3 class="col-xs-offset-1 col-xs-10 text-center">Edit your profile</h3>
<h2 class="col-xs-offset-1 col-xs-10 text-center">Edit your profile</h2>
<div class="col-xs-offset-3 col-xs-6">
<form name="userForm" data-ng-submit="updateUserProfile(userForm.$valid)" class="signin form-horizontal" autocomplete="off">
<fieldset>
@ -15,18 +15,18 @@
<div class="form-group row">
<div class="col-xs-7 field-title">
<b>{{ 'FIRST_NAME_LABEL' | translate }}</b>
{{ 'FIRST_NAME_LABEL' | translate }}
</div>
<div class="col-xs-12 field-input">
<input type="text" id="firstName" name="firstName" class="form-control" data-ng-model="user.firstName" placeholder="First Name" ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
<input type="text" id="firstName" name="firstName" class="form-control" data-ng-model="user.firstName" ng-pattern="/^[\w0-9 \-.]*$/">
</div>
</div>
<div class="form-group row">
<div class="col-xs-7 field-title">
<b>Last Name</b>
{{ 'LAST_NAME_LABEL' | translate }}
</div>
<div class="col-xs-12 field-input">
<input type="text" id="lastName" name="lastName" class="form-control" data-ng-model="user.lastName" placeholder="Last Name" ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
<input type="text" id="lastName" name="lastName" class="form-control" data-ng-model="user.lastName" ng-pattern="/^[\w0-9 \-.]*$/">
</div>
</div>
<div class="row">
@ -34,7 +34,7 @@
</div>
<div class="row form-group">
<div class="col-xs-7 field-title">
<b>{{ 'LANGUAGE_LABEL' | translate }}</b>
{{ 'LANGUAGE_LABEL' | translate }}
</div>
<div class="col-xs-12 field-input">
<select ng-model="user.language" required>
@ -49,25 +49,28 @@
<div class="row form-group">
<div class="col-xs-7 field-title">
<b>Username</b>
{{ 'USERNAME_LABEL' | translate }}
</div>
<div class="col-xs-12 field-input">
<input type="text" id="username" name="username" class="form-control" data-ng-model="user.username" placeholder="Username">
<input type="text" id="username" name="username" class="form-control" data-ng-model="user.username">
</div>
</div>
<div class="row form-group">
<div class="col-xs-7 field-title">
<b>{{ 'EMAIL_LABEL' | translate }}</b>
{{ 'EMAIL_LABEL' | translate }}
</div>
<div class="col-xs-12 field-input">
<input type="email" id="email" name="email" class="form-control" data-ng-model="user.email" placeholder="Email">
<input type="email" id="email" name="email" class="form-control" data-ng-model="user.email">
</div>
</div>
<div class="text-center form-group">
<button type="submit" class="btn btn-large btn-primary" style="font-size:1.6em;">
{{ 'SUBMIT_BTN' | translate }}
<button type="submit" class="btn btn-signup btn-rounded">
{{ 'SAVE_CHANGES' | translate }}
</button>
<button type="none" ng-click="cancel()" class="btn btn-rounded">
{{ 'CANCEL' | translate }}
</button>
</div>

View file

@ -15,7 +15,7 @@
<input type="text" id="email" name="email" class="form-control" data-ng-model="credentials.email" placeholder="{{ 'ENTER_ACCOUNT_EMAIL' | translate}}">
</div>
<div class="text-center form-group">
<button type="submit" class="btn btn-signup" ng-click="resendVerifyEmail()">{{ 'RESEND_VERIFICATION_EMAIL' | translate }}</button>
<button type="submit" class="btn btn-signup btn-rounded btn-block" ng-click="resendVerifyEmail()">{{ 'RESEND_VERIFICATION_EMAIL' | translate }}</button>
</div>
</fieldset>
</form>
@ -36,7 +36,7 @@
</h2>
<p> {{ 'CHECK_YOUR_EMAIL' | translate }} <a href="mail:polydaic@gmail.com">polydaic@gmail.com</a></p>
<div class="text-center form-group">
<button type="submit" class="btn btn-large btn-primary">
<button type="submit" class="btn btn-large btn-primary btn-rounded">
<a href="/#!/" style="color:white;">Continue</a>
</button>
</div>

View file

@ -6,7 +6,7 @@
<img src="/static/modules/core/img/logo_white.svg" height="100px">
</div>
<div class="col-md-12">
<a href="/#!/signin" class="btn btn-signup">{{ 'CONTINUE_TO_LOGIN' | translate }}</a>
<a href="/#!/signin" class="btn btn-signup btn-rounded btn-block">{{ 'CONTINUE_TO_LOGIN' | translate }}</a>
</div>
</div>
</section>
@ -20,12 +20,12 @@
{{ 'VERIFY_ERROR' | translate }}
</h3>
<div class="col-md-12">
<a href="/#!/verify" class="btn btn-default">
<a href="/#!/verify" class="btn btn-rounded btn-default">
{{ 'REVERIFY_ACCOUNT_LINK' | translate }}
</a>
</div>
<div class="col-sm-12">
<a href="/#!/signin" class="btn btn-primary">
<a href="/#!/signin" class="btn btn-rounded btn-primary">
{{ 'SIGNIN_BTN' | translate }}
</a>
</div>