login css, talk details

base/arvo/eyre.hoon

@@ -274,12 +274,11 @@
       })
     }
     
-    if(window.ship) ship.innerText = urb.ship
     urb.foreign = /^\/~\/am/.test(window.location.pathname)
     urb.submit = function(){
       req(
         "/~/auth.json?PUT", 
-        {ship: ship.innerText, code: pass.value},
+        {ship:ship.innerText.toLowerCase(), code:pass.value},
         function(){
           if(urb.foreign) document.location = 
             document.location.hash.match(/#[^?]+/)[0].slice(1) +
@@ -298,17 +297,47 @@
 ++  xml
   |%
   ++  login-page
-    %+  titl  'Log in'
-    ;=  ;p: Please log in.
-        ;p.mono: ~;{span#ship(contenteditable "")}
-        ;input#pass(onchange "urb.submit()");
+    %+  titl  'Log in :urbit'
+    ;=  ;h1: Please log in
+        ;p.ship 
+          ;div.sig: ~
+          ;span#ship(contenteditable "");
+        ==
+        ;input#pass(type "password");
+        ;script:'''
+                $(function() {
+                  $ship = $('#ship')
+                  $pass = $('#pass')
+                  $ship.on('keydown', function(e) { 
+                    if(e.keyCode === 13 || e.keyCode === 9) {
+                      $pass.show()
+                      $pass.focus()
+                      e.preventDefault()
+                    }
+                  })
+                  $ship.on('focus', function(e) { 
+                    $pass.hide()
+                  })
+                  $pass.on('keydown', function(e) { 
+                    if(e.keyCode === 13) {
+                      urb.submit()
+                    }
+                  })
+                  if(window.ship) {
+                    $ship.text(urb.ship)
+                    $pass.focus()
+                  } else {
+                    $pass.hide()
+                  }
+                })
+                '''
         ;pre:code#err;
         ;script@"/~/at/~/auth.js";
     ==
   ::
   ++  logout-page
     %+  titl  'Log out'
-    ;=  ;p: Goodbye ~;{span#ship}.
+    ;=  ;h1: Goodbye ~;{span#ship}.
         ;button#act(onclick "urb.away()"): Log out
         ;pre:code#err;
         ;script@"/~/at/~/auth.js";
@@ -331,7 +360,9 @@
     |=  [a=cord b=marl] 
     ;html
       ;head
+        ;meta(charset "utf-8");
         ;title:"{(trip a)}" 
+        ;script(type "text/javascript", src "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js");
         ;link(rel "stylesheet", href "/home/lib/base.css");
       ==
       ;body:div#c:"*{b}"

base/lib/base.css

@@ -104,23 +104,29 @@ code,
 }
 
 #c {
-  width: 24rem;
+  width: 32rem;
+  margin-left: -16rem;
   position: absolute;
   left: 50%;
-  margin-left: -12rem;
+}
+
+h1 {
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+
+h1:after {
+  content: "\2014";
+  margin-left: 1rem;
 }
 
 #c pre {
   font-size: .6rem;
-}
-
-#c.err {
-  width: 32rem;
-  margin-left: -16rem;
+  margin-top: 2rem;
 }
 
 #pass {
-  width: 24rem;
+  width: 32rem;
 }
 
 button {
@@ -131,17 +137,32 @@ button {
   font-weight: 500;
 }
 
-#ship,
-input {
-  font-family: "scp";
+.sig {
+  font-weight: 400;
+  font-size: 2rem;
   display: inline;
-  border: none;
-  background-color: #f5f5f5;
-  padding: .3rem;
-  outline: none;
+  vertical-align: middle;
 }
 
-#ship:focus,
-input:focus {
-  background-color: #eee;
+#ship {
+  font-family: 'bau';
+  font-weight: 400;
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  letter-spacing: .1rem;
+  display: inline-block;
+  min-width: 1rem;
+}
+
+input {
+  font-family: 'scp';
+  display: inline;
+}
+
+#ship,
+input {
+  border: none;
+  padding: .3rem;
+  outline: none;
+  border-bottom: 3px solid #555;
 }

base/pub/talk/src/css/main.css

@@ -317,16 +317,22 @@ body {
   background-color: transparent;
   border: none;
   font-size: 0.8rem;
-  line-height: 2rem;
+  line-height: 1.2rem;
+  letter-spacing: 0.05rem;
   margin-top: 0.6rem;
   font-weight: 300;
   text-align: left;
   outline: none;
   cursor: pointer;
+  text-transform: uppercase;
+  border-bottom: 2px solid transparent;
+}
+.sour-ctrl input:focus {
+  border-bottom: 2px solid #fff;
 }
 .sour-ctrl input::-webkit-input-placeholder {
-  font-weight: 500;
-  font-size: 1.6rem;
+  font-weight: 400;
+  font-size: 1.2rem;
   margin-left: 0.6rem;
   color: #fff;
 }
@@ -509,12 +515,9 @@ a {
   min-height: 1.6rem;
   min-width: 1.3rem;
   outline: none;
-  background-color: #eee;
   padding: 0.3rem 0.1rem;
   margin-top: -0.3rem;
-}
-#writing:focus {
-  background-color: #fff;
+  border-bottom: 3px solid #555;
 }
 .writing {
   padding-top: 0.3rem;
@@ -540,15 +543,17 @@ a {
 }
 #audi {
   display: inline-block;
-  background-color: #eee;
   margin-right: -0.2rem;
+  margin-bottom: 0.3rem;
   outline: none;
   overflow: hidden;
   max-width: 9rem;
+  min-width: 1rem;
   padding: 0.3rem 0.1rem 0.1rem 0;
+  border-bottom: 2px solid #555;
 }
 .valid-false {
-  color: #ff2f2f;
+  color: #ff2f2f !important;
 }
 #scrolling {
   display: none;

base/pub/talk/src/css/main.styl

@@ -258,16 +258,22 @@ body
   background-color transparent
   border none
   font-size .8rem
-  line-height 2rem
+  line-height 1.2rem
+  letter-spacing .05rem
   margin-top .6rem
   font-weight 300
   text-align left
   outline none
   cursor pointer
-  
+  text-transform uppercase
+  border-bottom 2px solid transparent
+
+.sour-ctrl input:focus
+  border-bottom 2px solid #fff
+
 .sour-ctrl input::-webkit-input-placeholder
-  font-weight 500
-  font-size 1.6rem
+  font-weight 400
+  font-size 1.2rem
   margin-left .6rem
   color white
 
@@ -463,13 +469,9 @@ a
   min-height 1.6rem
   min-width 1.3rem
   outline none
-  background-color #eee
   padding .3rem .1rem
   margin-top -.3rem
-  
-
-#writing:focus
-  background-color #fff
+  border-bottom 3px solid #555
 
 .writing
   padding-top .3rem
@@ -495,15 +497,17 @@ a
 
 #audi
   display inline-block
-  background-color #eee
   margin-right -.2rem
+  margin-bottom .3rem
   outline none
   overflow hidden
   max-width 9rem
+  min-width 1rem
   padding .3rem .1rem .1rem 0
+  border-bottom 2px solid #555
 
 .valid-false
-  color #ff2f2f
+  color #ff2f2f !important
 
 //
 // scrolling

base/pub/talk/src/js/components/StationComponent.coffee

@@ -44,15 +44,30 @@ module.exports = recl
       return
     $("#station-container").toggleClass 'open'
 
+  validateSource: (s) ->
+    if @state.configs[@state.station].sources.indexOf(s) isnt -1
+      return false
+    if s.length < 5
+      return false
+    if s[0] isnt "~"
+      return false
+    if s.indexOf("/") is -1
+      return false
+    return true
+
   _keyUp: (e) ->
+    $('.sour-ctrl .join').removeClass 'valid-false'
     if e.keyCode is 13
-      v = @$input.val()
-      if @state.configs[@state.station].sources.indexOf(v) is -1
+      v = @$input.val().toLowerCase()
+      if v[0] isnt "~" then v = "~#{v}"
+      if @validateSource v
         _sources = _.clone @state.configs[@state.station].sources
         _sources.push v
         StationActions.setSources @state.station,_sources
         @$input.val('')
         @$input.blur()
+      else
+        $('.sour-ctrl .join').addClass 'valid-false'
 
   _remove: (e) ->
     e.stopPropagation()

base/pub/talk/src/js/components/WritingComponent.coffee

@@ -125,8 +125,10 @@ module.exports = recl
   _validateAudi: ->
     v = $('#audi').text()
     v = v.trim()
-    if v.length is 0
+    if v.length is 0 
       return true
+    if v.length < 5 # zod/a is shortest
+      return false
     v = v.split " "
     for a in v
       a = a.trim()
@@ -138,10 +140,10 @@ module.exports = recl
     StationActions.setValidAudience valid
     if valid is true
       v = $('#audi').text()
+      if v.length is 0 then v = window.util.mainStationPath window.urb.user
       v = v.split " "
       for k,_v of v
         if _v[0] isnt "~" then v[k] = "~#{_v}"
-      v = window.util.expandAudi v
       StationActions.setAudience v
       v
     else

base/pub/talk/src/js/main.js

@@ -522,16 +522,37 @@ module.exports = recl({
     }
     return $("#station-container").toggleClass('open');
   },
+  validateSource: function(s) {
+    if (this.state.configs[this.state.station].sources.indexOf(s) !== -1) {
+      return false;
+    }
+    if (s.length < 5) {
+      return false;
+    }
+    if (s[0] !== "~") {
+      return false;
+    }
+    if (s.indexOf("/") === -1) {
+      return false;
+    }
+    return true;
+  },
   _keyUp: function(e) {
     var _sources, v;
+    $('.sour-ctrl .join').removeClass('valid-false');
     if (e.keyCode === 13) {
-      v = this.$input.val();
-      if (this.state.configs[this.state.station].sources.indexOf(v) === -1) {
+      v = this.$input.val().toLowerCase();
+      if (v[0] !== "~") {
+        v = "~" + v;
+      }
+      if (this.validateSource(v)) {
         _sources = _.clone(this.state.configs[this.state.station].sources);
         _sources.push(v);
         StationActions.setSources(this.state.station, _sources);
         this.$input.val('');
         return this.$input.blur();
+      } else {
+        return $('.sour-ctrl .join').addClass('valid-false');
       }
     }
   },
@@ -793,6 +814,9 @@ module.exports = recl({
     if (v.length === 0) {
       return true;
     }
+    if (v.length < 5) {
+      return false;
+    }
     v = v.split(" ");
     for (i = 0, len = v.length; i < len; i++) {
       a = v[i];
@@ -807,6 +831,9 @@ module.exports = recl({
     StationActions.setValidAudience(valid);
     if (valid === true) {
       v = $('#audi').text();
+      if (v.length === 0) {
+        v = window.util.mainStationPath(window.urb.user);
+      }
       v = v.split(" ");
       for (k in v) {
         _v = v[k];
@@ -814,7 +841,6 @@ module.exports = recl({
           v[k] = "~" + _v;
         }
       }
-      v = window.util.expandAudi(v);
       StationActions.setAudience(v);
       return v;
     } else {