API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 21st, 2017
135
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.65 KB | None | 0 0
raw download clone embed print report
  1. @{
  2. Layout = "~/Views/Shared/_LayoutThemed.cshtml";
  3. }
  4.  
  5. <article class="article gradient-2">
  6. <h2 class="title container text-center">Welcome to Art Find</h2>
  7. <section class="form-section">
  8. <div class="section-inner container text-center">
  9. <div class="row">
  10. <div class="col-md-10 col-sm-12 col-xs-12 col-md-push-1 col-sm-push-0 col-xs-push-0">
  11. <div class="content">
  12. <div ng-controller="userController as user" class="form-container col-md-10 col-sm-12 col-xs-12 col-md-push-1 col-sm-push-0 col-xs-push-0">
  13.  
  14. <form name="user.userForm" class="contact-form form" novalidate>
  15. <div class="contact-form-inner">
  16. <h3 class="subtitle titleArea">Registration</h3>
  17. <div class="row">
  18. <div class="row">
  19. <div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : user.userForm.username.$invalid && user.userForm.$submitted}">
  20. <label for="username">Username</label>
  21. <input required ng-model="user.userInfo.username" ng-maxlength="30" type="text" name="username" class="form-control" placeholder="Username">
  22. <div ng-show="user.userForm.$submitted">
  23. <p ng-show="user.userForm.username.$error.maxlength" class="help-block">Username must be less than 30 characters.</p>
  24. <p ng-show="user.userForm.username.$error.required" class="help-block">Username is required.</p>
  25. </div>
  26. </div>
  27. <div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : user.userForm.email.$invalid && user.userForm.$submitted}">
  28. <label for="email">Email Address</label>
  29. <input required ng-maxlength="200" ng-model="user.userInfo.email" type="email" class="form-control" name="email" placeholder="Email Address">
  30. <div ng-show="user.userForm.$submitted">
  31. <p ng-show="user.userForm.email.$error.maxlength" class="help-block">Email address must be less than 200 characters.</p>
  32. <p ng-show="user.userForm.email.$error.required" class="help-block">Email is required.</p>
  33. <p ng-show="user.userForm.email.$error.email" class="help-block">Not a valid email address.</p>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="row" ng-show="user.passwordShow">
  38. <div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : user.passwordValidation || user.userForm.password.$invalid && user.userForm.$submitted}">
  39. <label for="password">Password</label>
  40. <input ng-required="user.passwordShow" ng-maxlength="20" ng-minlength="6" ng-model="user.userInfo.password" ng-change="user.verifyPasswordRules()" type="password" class="form-control" name="password" placeholder="Password">
  41. <div ng-show="user.userForm.$submitted">
  42. <p ng-show="user.userForm.password.$error.maxlength" class="help-block">Password must be less than 20 characters.</p>
  43. <p ng-show="user.userForm.password.$error.minlength" class="help-block">Password must be at least 6 characters.</p>
  44. <p ng-show="user.userForm.password.$error.required" class="help-block">Password is required.</p>
  45. <p ng-show="user.passwordValidation" class="help-block">Password must have a character from two of following categories: lowercase letters, uppercase letters, numbers, special characters.</p>
  46. </div>
  47. </div>
  48. <div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : user.passwordMatchValidation && user.userForm.$submitted}">
  49. <label for="password2">Confirm Password</label>
  50. <input ng-required="user.passwordShow" ng-model="user.password2" ng-change="user.verifyPasswordMatch()" type="password" class="form-control" name="password2" placeholder="Confirm Password">
  51. <p ng-show="user.passwordMatchValidation" class="help-block">Password inputs must match.</p>
  52. </div>
  53. </div>
  54. <div class="row">
  55. <div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : user.userForm.firstName.$invalid && user.userForm.$submitted}">
  56. <label for="firstName">First Name</label>
  57. <input required ng-maxlength="20" ng-model="user.userInfo.firstName" type="text" class="form-control" name="firstName" placeholder="First Name">
  58. <div ng-show="user.userForm.$submitted">
  59. <p ng-show="user.userForm.firstName.$error.maxlength" class="help-block">First name must be less than 20 characters.</p>
  60. <p ng-show="user.userForm.firstName.$error.required" class="help-block">First name is required.</p>
  61. </div>
  62. </div>
  63. <div class="col-md-6 col-sm-6 col-xs-12 form-group" ng-class="{'has-error' : user.userForm.lastName.$invalid && user.userForm.$submitted}">
  64. <label class="" for="lastName">Last Name</label>
  65. <input required ng-maxlength="50" ng-model="user.userInfo.lastName" type="text" class="form-control" name="lastName" placeholder="Last Name">
  66. <div ng-show="user.userForm.$submitted">
  67. <p ng-show="user.userForm.lastName.$error.maxlength" class="help-block">Last name must be less than 50 characters.</p>
  68. <p ng-show="user.userForm.lastName.$error.required" class="help-block">Last name is required.</p>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="row">
  73. <div class="col-md-12 col-sm-12 col-xs-12 form-group" ng-class="{'has-error' : user.userForm.blurb.$invalid && user.userForm.$submitted}">
  74. <label class="" for="blurb">Your Blurb</label>
  75. <textarea ng-maxlength="200" ng-model="user.userInfo.blurb" class="form-control" name="blurb" placeholder="Enter your Blurb" rows="2"></textarea>
  76. <div ng-show="user.userForm.$submitted">
  77. <p ng-show="user.userForm.blurb.$error.maxlength" class="help-block">Blurb must be less than 200 characters.</p>
  78. </div>
  79. </div>
  80. </div>
  81. <div class="row">
  82. <div class="col-md-12 col-sm-12 col-xs-12 form-group">
  83. <label class="input-file" for="imageUrl">Profile Picture</label>
  84. </div>
  85. <div ng-include="'/Scripts/app_fileUpload/FileUploadTemplate.html'"></div>
  86. </div>
  87. <div class="row">
  88. <div class="col-md-12 col-sm-12 col-xs-12 form-group">
  89. <button ng-click="user.submitUserForm(user.userForm.$valid)" type="submit" class="btn btn-block btn-cta btn-cta-primary">{{user.submitBtn}}</button>
  90. <button ng-show="user.showReset" ng-click="user.resetForm()" type="button" class="btn btn-block btn-cta btn-cta-primary">Reset</button>
  91. </div>
  92. </div>
  93. </div><!--//row-->
  94. </div>
  95. </form><!--//contact-form-->
  96. </div>
  97. </div><!--//content-->
  98. </div>
  99. </div><!--//row-->
  100. </div>
  101. </section>
  102. </article>
  103.  
  104.  
  105.  
  106. @section pageInitScripts {
  107.  
  108. <script src="~/Scripts/ngCropper.js"></script>
  109.  
  110. <script>
  111. sabio.moduleOptions.extraModuleDependencies.push('ngCropper')
  112. </script>
  113.  
  114. }
  115.  
  116. @section scripts
  117. {
  118. <script src="~/Scripts/app_fileUpload/FileUploadController.js"></script>
  119. <script src="~/Scripts/app/directives/files-model.js"></script>
  120. <script src="~/Scripts/sabio/services/sabio.services.users.js"></script>
  121. <script src="~/Scripts/sabio/services/sabio.services.uploads.js"></script>
  122. <script src="~/Scripts/sabio/services/sabio.services.passwords.js"></script>
  123. <script type="text/javascript">
  124.  
  125. (function () {
  126. "use strict";
  127.  
  128. angular.module(APPNAME)
  129. .controller('userController', UserController);
  130.  
  131. UserController.$inject = ['$scope', '$baseController', 'usersService', 'notificationsService', 'uploadsService', 'appConfig', '$window', 'passwordsService'];
  132.  
  133. function UserController($scope, $baseController, usersService, notificationsService, uploadsService, appConfig, $window, passwordsService) {
  134.  
  135. var vm = this;
  136. vm.usersService = usersService;
  137. vm.notificationsService = notificationsService;
  138. vm.passwordsService = passwordsService;
  139. vm.userForm = null;
  140. vm.userInfo = null;
  141. vm.password = null;
  142. vm.password2 = null;
  143. vm.showReset = true;
  144. vm.passwordValidation = false;
  145. vm.passwordMatchValidation = false;
  146. vm.submitBtn = 'Create User';
  147. var userId = null;
  148. var lastSavedUserInfo = null;
  149. vm.passwordShow = true;
  150. var defaultImageUrl = '/Content/default.svg';
  151.  
  152.  
  153. vm.$scope = $scope;
  154. vm.submitUserForm = _submitUserForm;
  155. vm.resetForm = _resetForm;
  156. vm.verifyPasswordMatch = _verifyPasswordMatch;
  157. vm.verifyPasswordRules = _verifyPasswordRules;
  158. vm.userCreateOrUpdate = _userCreateOrUpdate;
  159. vm.createUser = _createUser;
  160. vm.onCreateUserSuccess = _onCreateUserSuccess;
  161. vm.onCreateUserError = _onCreateUserError;
  162. vm.updateUser = _updateUser;
  163. vm.onUpdateUserSuccess = _onUpdateUserSuccess;
  164. vm.onUpdateUserError = _onUpdateUserError;
  165. vm.loadEditMode = _loadEditMode;
  166. vm.onGetByIdSuccess = _onGetByIdSuccess;
  167. vm.onGetByIdError = _onGetByIdError;
  168.  
  169.  
  170. $baseController.merge(vm, $baseController);
  171.  
  172.  
  173. $scope.$on('$includeContentLoaded', _render);
  174. $scope.$on('fileUpload.urlAvailable', _userCreateOrUpdate);
  175.  
  176. function _render() {
  177. $scope.$broadcast('fileUpload.urlLoad', { url: null, defaultPreviewUrl: defaultImageUrl });
  178. if (appConfig.isLoggedIn == true) {
  179. if (appConfig.item) {
  180. vm.loadEditMode();
  181. vm.passwordShow = false;
  182. }
  183. else {
  184. $window.location.href = '/home';
  185.  
  186. }
  187. }
  188. };
  189.  
  190. //FORM RESET
  191. function _resetForm() {
  192. if (appConfig.isLoggedIn == true) {
  193. vm.userInfo = angular.extend({}, lastSavedUserInfo);
  194. vm.password2 = lastSavedUserInfo.password;
  195. $scope.$broadcast('fileUpload.urlLoad', { url: vm.userInfo.imageUrl, defaultPreviewUrl:defaultImageUrl, reset: true });
  196. }
  197. else {
  198. vm.userInfo = null;
  199. vm.password = null;
  200. vm.password2 = null;
  201. userId = null;
  202. vm.showReset = true;
  203. vm.submitBtn = 'Create User';
  204. $scope.$broadcast('fileUpload.urlLoad', { url: null, defaultPreviewUrl: defaultImageUrl, reset: true });
  205. }
  206. vm.userForm.$setPristine();
  207. }
  208.  
  209. //VERIFY PASSWORD MATCH
  210. function _verifyPasswordMatch() {
  211. if (vm.userInfo.password == vm.password2) {
  212. vm.passwordMatchValidation = false;
  213. }
  214. }
  215.  
  216. //VERIFY PASSWORD RULES
  217. function _verifyPasswordRules() {
  218. vm.verifyPasswordMatch();
  219. if (vm.userInfo.password != null) {
  220. if (vm.passwordsService.rulesCheck(vm.userInfo.password)) {
  221. vm.passwordValidation = false;
  222. }
  223. }
  224. }
  225.  
  226. //SUBMIT USER FORM
  227. function _submitUserForm(isValid) {
  228. if (isValid) {
  229. vm.createUser();
  230. }
  231. else {
  232. vm.$log.log('invalid user data');
  233. }
  234. }
  235.  
  236. //CREATE USER
  237. function _createUser() {
  238. if (vm.passwordShow) {
  239. if (vm.passwordsService.rulesCheck(vm.userInfo.password)) {
  240. if (vm.userInfo.password == vm.password2) {
  241. $scope.$broadcast('fileUpload.urlNeeded');
  242. }
  243. else {
  244. vm.passwordMatchValidation = true;
  245. }
  246. }
  247. else {
  248. vm.passwordValidation = true;
  249. }
  250. } else {
  251. $scope.$broadcast('fileUpload.urlNeeded');
  252. };
  253. };
  254.  
  255. //CREATE OR UPDATE AJAX CALL
  256. function _userCreateOrUpdate(event, imageUrl) {
  257.  
  258. vm.userInfo.imageUrl = imageUrl.url;
  259. if (vm.submitBtn == 'Create User') {
  260. vm.usersService.create(vm.userInfo, vm.onCreateUserSuccess, vm.onCreateUserError);
  261. }
  262. else {
  263. vm.updateUser();
  264. }
  265. }
  266.  
  267. //CREATE USER SUCCESS & ERROR
  268.  
  269. function _onCreateUserSuccess(response) {
  270. $scope.$apply(function () {
  271. vm.showReset = true;
  272. vm.submitBtn = 'Update User Info';
  273. notificationsService.redirectDialog("/", "You have created an ArtFind account! Check your email to validate your account and sign in.'");
  274. userId = response.item;
  275. });
  276. }
  277.  
  278. function _onCreateUserError(response) {
  279. notificationsService.error(response.responseJSON.message);
  280. }
  281.  
  282. //UPDATE USER AJAX CALL
  283.  
  284. function _updateUser() {
  285. if (appConfig != null) {
  286. userId = appConfig.item;
  287. }
  288. vm.userInfo.id = userId;
  289. vm.usersService.update(userId, vm.userInfo, vm.onUpdateUserSuccess, vm.onUpdateUserError);
  290. }
  291.  
  292. //UPDATE USER SUCCESS & ERROR
  293. function _onUpdateUserSuccess(response) {
  294. notificationsService.success('You have updated your ArtFind account info.');
  295. $scope.$broadcast('fileUpload.urlLoad', { url: null, defaultPreviewUrl: defaultImageUrl });
  296.  
  297. //CAPTURE LAST SAVED USER INFO
  298. lastSavedUserInfo = angular.extend({}, vm.userInfo);
  299. lastSavedUserInfo.password = vm.userInfo.password;
  300. }
  301.  
  302. function _onUpdateUserError() {
  303. notificationsService.error('Error updating user info.');
  304. }
  305.  
  306. //LOAD EDIT MODE (GET BY ID)
  307.  
  308. function _loadEditMode() {
  309. vm.usersService.getById(appConfig.item, vm.onGetByIdSuccess, vm.onGetByIdError);
  310. vm.showReset = true;
  311. vm.submitBtn = 'Update User Info';
  312. }
  313.  
  314. //GET BY ID SUCCESS & ERROR
  315. function _onGetByIdSuccess(response) {
  316. $scope.$apply(function () {
  317. vm.userInfo = response.item;
  318.  
  319. //CAPTURE LAST SAVED USER INFO
  320. lastSavedUserInfo = angular.extend({}, vm.userInfo);
  321.  
  322. $scope.$broadcast('fileUpload.urlLoad', { url: vm.userInfo.imageUrl, defaultPreviewUrl: defaultImageUrl });
  323. });
  324. }
  325.  
  326. function _onGetByIdError() {
  327. notificationsService.error('Error loading user info.');
  328. }
  329. }
  330. })();
  331. </script>
  332. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!