Refactoring

Before this project gets too messy, there are a few things that I want to change. It will be a good opportunity to learn more about how the project is put together and to try to improve my command line skills like grep and find and sed.

First of all, I prefer register to signup, so I'm going to change all that. I noticed that the signup html form has its very own *.scss file, a sass file that gets compiled into CSS. I'd like to change that to be more generic so I can use it for other forms. Finally, I've learned that it's really handy to be able to grep in the client/app directory without taking in the node_modules or bower_components directories. I want to fix the server side to be that way, too.

styles/partials/_signup.scss

client/app/styles/partials/_signup.scss has these styles:

• signup-container
• signup-header

I can change the name of the file by moving it:

mv _signup.scss _form.scss

This file gets imported into the client/app/styles/main.scss file. So, I have to change from this:

@import "_variables";
@import "partials/signup";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

to this:

@import "_variables";
@import "partials/form";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

I want to do some grepping to change the signup-container and signup-header styles to form-container and form-header, but first of all, let me see if I can make grep show up in color. I'm working on El Capitan OSX, and the background of my terminal is black. So, I'm going to do this:

export GREP_OPTIONS='--color=auto'
export GREP_COLOR='1;35;40'

This should make what grep finds stand out in magenta. If you like it, add it to the end of your ~/.bashrc file. Next, lets see if form-header or form-container is used anywhere. From client/app:

grep -r "form-header" .
grep -r "form-container" .

Nothing! Good. Let's see where signup-header and signup-container are used. We can see it in context by using -A and -B, lines before and after the find, respectively:

grep -r -A1 -B1 "signup-header" .
grep -r -A1 -B1 "signup-container" .

I found signup-header and signup-container in styles/partials/_form.scss and views/signup.html, which is okay to change. So, I'm going to do it with find and sed. Like this:

find . -type f -exec sed -i '' "s/signup-header/form-header/" {} +

This is going to find all the files (not directories) and then execute sed on each file swapping form-header for signup-header. We can repeat to change signup-container to form-container. Make sure you type carefully!

signup to register

I am going to grep for signup from client/app directory. To refactor to register, I'll have to:

• change SignupCtrl > RegisterCtrl
• rename script/controllers/signup.js to register.js
• and I have to hunt down signup-form

There is no other signup-form. I'll bet it's supposed to be form-container, so I'll just edit the form and change it.

I can rename signup.js like this from the client/app directory:

mv scripts/controllers/signup.js scripts/controllers/register.js

And now I'm going to swap out SignupCtrl for RegisterCtrl:

find . -type f -exec sed -i '' "s/signup/register/" {} +

I had to run that twice. I think it missed one where there were two signups in one line.

And now for SignupCtrl > RegisterCtrl:

find . -type f -exec sed -i '' "s/SignupCtrl/RegisterCtrl/" {} +

Let me check for signup, and ignore the case:

grep -ri "signup" .

(Note: old versions of OSX had a bug and -i for ignore case didn't work correctly. You can check like this:

echo "ABC" | grep -i "abc"

will return ABC if the bug has been fixed on your machine.)

I got a copy of Signups on buttons and in headers. Time for replace:

find . -type f -exec sed -i '' "s/Signup/Register/" {} +

We have to do the same thing on the server side. I think there's less of them. From server directory:

grep -ri "signup" .

I got three, I substituted them all.

I went and tried executing the code. Clicking the register button didn't do anything:

Oops. Forgot to rename client/app/views/signup.html to register.html. Where's that used? Its in client/app/scripts/app.js. That's been changed.

I renamed that. Let me make sure this thing can still do the one thing that it does: register a user.

Hmm. Once I tried it, it didn't seem to do anything. I did check the test database of mongo, and I could see the user that I created, so I guess it did work. OK, then I checked the code. After you register a user, the client/app/scripts/controllers/register.js doesn't do anything after a successful register. Hmm. I have to do something more interesting with this code.

server/app directory

I want to isolate all the server code into a separate directory below the node_modules directory. From the server directory, move most of the code down a level:

mkdir app
mv database/ app/
mv app.js app/
mv router/ app/

In the bin/www file, you need to help it find app.js now that it has moved. Change from this:

var app = require('../app');

to this:

var app = require('../app/app');

Also, you have to change where app/app.js gets its Angular stuff:

Change from this:

  app.use(express.static(path.join(__dirname, '../client')))
  app.use(express.static(path.join(__dirname, '../client/.tmp')));
  app.use(express.static(path.join(__dirname, '../client/app')));

To this:

  app.use(express.static(path.join(__dirname, '../../client')))
  app.use(express.static(path.join(__dirname, '../../client/.tmp')));
  app.use(express.static(path.join(__dirname, '../../client/app')));

Change from this:

  app.use(express.static(path.join(__dirname, '/dist')));

To this:

  app.use(express.static(path.join(__dirname, '../dist')));

Finally, let's grep for 'signup' executed from the server directory:

grep -r -A1 -B1 "signup" .

Looks like we need one of these:

find . -type f -exec sed -i '' "s/signup/register/" {} +

This is what the file structure looks like in the server/app directory:

.
|-- app.js
|-- database
|   |-- index.js
|   `-- schemas
|       `-- user.js
`-- router
    |-- endpoints
    |   `-- user.js
    |-- index.js
    `-- users.js

OK. Refactoring all done.

So what this app does is it lets the user register. They can create a user with a password in the database, but the user can never use that information to login.

I'm going to change that next up.