Unpacking modules

app/static/lib.js

@@ -0,0 +1,100 @@
+function checkUsername(u){
+  var starts_with_period = /^\./.test(u);
+  var ends_with_period = /\.$/.test(u);
+  var two_periods = /\.\./.test(u);
+  var forbidden_extensions = u.match(/\.(com|net|org|txt)$/);
+  
+  return (
+    starts_with_period? 'You cannot start username with a period.':
+    ends_with_period? 'You cannot end username with a period.':
+    two_periods? 'You cannot have more than one period in a row.':
+    forbidden_extensions? 'Your username cannot end with .' + forbidden_extensions[1]:
+    'ok'
+  );
+}
+
+function attachUsernameInput(){
+  var usernameInputs = document.getElementsByClassName('username-input');
+  for(var i=0;i<usernameInputs.length;i++)(function(usernameInput){
+    var lastValue = '';
+    var usernameInputMessage = document.createElement('div');
+    usernameInput.oninput = function(event){
+      var value = usernameInput.value;
+      if (value != lastValue){
+        if(!/^[a-z0-9_. ]*$/i.test(value)){
+          usernameInputMessage.innerHTML = 'Usernames can only contain letters, numbers, underscores, and periods.';
+          usernameInputMessage.className = 'username-input-message error';
+          event.preventDefault();
+          return;
+        }
+        if(/ /.test(value)){
+          value = value.replace(/ /g,'_');
+        }
+        usernameInput.value = lastValue = value.toLowerCase();
+        if(!value){
+          usernameInputMessage.innerHTML = 'You cannot have an empty username.';
+          usernameInputMessage.className = 'username-input-message error';
+          return;
+        }
+        var message = checkUsername(value);
+        if (message != 'ok'){
+          usernameInputMessage.innerHTML = message;
+          usernameInputMessage.className = 'username-input-message error';
+          return;
+        }
+        usernameInputMessage.innerHTML = 'Checking username...';
+        usernameInputMessage.className = 'username-input-message checking';
+        requestUsernameAvailability(value, function(resp){
+          if (resp.status != 'ok'){
+            usernameInputMessage.innerHTML = 'Sorry, there was an unknown error.';
+            usernameInputMessage.className = 'username-input-message error';
+            return;
+          }
+          if (resp.is_available){
+            usernameInputMessage.innerHTML = "The username '" + value + "' is available.";
+            usernameInputMessage.className = 'username-input-message success';
+            return;
+          } else {
+            usernameInputMessage.innerHTML = "The username '" + value + "' is not available.";
+            usernameInputMessage.className = 'username-input-message error';
+            return;
+          }
+        });
+      }
+    };
+    usernameInputMessage.className = 'username-input-message';
+    usernameInput.parentNode.appendChild(usernameInputMessage);
+  })(usernameInputs[i]);
+}
+
+attachUsernameInput();
+
+function requestUsernameAvailability(u, callback){
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', '/ajax/username_availability/' + u, true);
+  xhr.onreadystatechange = function(){
+    if (xhr.readyState == XMLHttpRequest.DONE){
+      try {
+        var data = JSON.parse(xhr.responseText);
+        callback(data);
+      } catch(ex) {
+      }
+    }
+  }
+  xhr.send();
+}
+
+function attachFileInput(){
+  var fileInput = document.getElementById('fileInputContainer');
+  fileInput.innerHTML = '<input type="file" accept="image/*" name="file">';
+}
+
+function showHideMessageOptions(id){
+  var msgElem = document.getElementById(id);
+  var options = msgElem.getElementsByClassName('message-options')[0];
+  if(options.style.display == 'block'){
+    options.style.display = 'none';
+  } else {
+    options.style.display = 'block';
+  }
+}

app/static/style.css

@@ -0,0 +1,28 @@
+body,button,input,select,textarea{font-family:'Segoe UI',Arial,Helvetica,sans-serif}
+body{margin:0}
+.header{padding:12px;color:white;background-color:#ff3018}
+.content{padding:12px}
+.header a{color:white}
+.content a{color:#3399ff}
+.content a.plus{color:#ff3018}
+.metanav{float:right}
+.header h1{margin:0;display:inline-block}
+.flash{background-color:#ff9;border:yellow 1px solid}
+.infobox{padding:12px;border:#ccc 1px solid}
+@media (min-width:640px) {
+  .infobox{float:right;width:320px}
+}
+.weak{opacity:.5}
+.field_desc{display:block}
+.message-visual img{max-width:100%;max-height:8em}
+.message-options-showhide::before{content:'\2026'}
+.message-options{display:none}
+.create_text{width:100%;height:8em}
+.biography_text{height:4em}
+.before-toggle:not(:checked) + input{display:none}
+.follow_button,input[type="submit"]{background-color:#ff3018;color:white;border-radius:3px;border:1px solid #ff3018}
+.follow_button.following{background-color:transparent;color:#ff3018;border-color:#ff3018}
+.copyright{font-size:smaller;text-align:center;color:#808080}
+.copyright a:link,.copyright a:visited{color:#31559e}
+.copyright ul{list-style:none;padding:0}
+.copyright ul > li{padding:0 3px}