Skip to content

Commit

Permalink
refactored all the views to use Enlive instead of Hiccup; removed HTM…
Browse files Browse the repository at this point in the history 
…L markup from all translation strings; expanded coverage of i18n support (less non-internationalized strings)
  • Loading branch information
Xavi Caballe committed Jan 1, 2013
1 parent babd1b3 commit f04292c
Show file tree
Hide file tree
Showing 20 changed files with 875 additions and 351 deletions.
3 changes: 2 additions & 1 deletion project.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
[com.draines/postal "1.8.0"]
[clj-time "0.4.2"]
[jayq "0.1.0-alpha4"]
[fetch "0.1.0-alpha2"]]
[fetch "0.1.0-alpha2"]
[enlive/enlive "1.0.1"]]
:main noir-auth-app.server)

25 changes: 25 additions & 0 deletions resources/public/admin-layout.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Admin — noir-auth-app</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/admin.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="nav">
<ul>
<li><a href="/admin">admin</a></li><!--
http://stackoverflow.com/q/12168194/974795
--><li><a href="/settings">settings</a></li><!--
--><li><a data-method="post" href="/logout">log out</a></li>
</ul>
</div>
<div class="content">
<p>The base content.</p>
</div>
</div>
</body>
</html>
50 changes: 50 additions & 0 deletions resources/public/admin/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="../css/reset.css" rel="stylesheet" type="text/css">
<link href="../css/default.css" rel="stylesheet" type="text/css">
<link href="../css/admin.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">

<div class="content">
<p class="error-message">Sample error message.</p>
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, data 1</td>
<td>row 1, data 2</td>
<td class="actions">
<a href="#"
data-action="delete-user" data-i18n="delete">Delete</a>
</td>
</tr><!--
necessary to avoid undesired whitespace,
see also http://stackoverflow.com/q/12168194/974795
--><tr>
<td>row 2, data 1</td>
<td>row 2, data 2</td>
<td class="actions">
<a href="#"
data-action="delete-user" data-i18n="delete">Delete</a>
</td>
</tr>
</tbody>
</table>
<p>
<a class="button" href="" data-i18n="next">next</a>
</p>
</div>

</div>
</body>
</html>
2 changes: 1 addition & 1 deletion resources/public/css/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ code {
padding-right: 0;
}

.content {
.notice, .content {
clear: right;
}

Expand Down
22 changes: 22 additions & 0 deletions resources/public/layout.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>noir-auth-app</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="nav">
<ul>
<li><a href="/login">log in</a></li>
</ul>
</div>
<p class="notice">This is a notice.</p>
<div class="content">
<p>The base content.</p>
</div>
</div>
</body>
</html>
26 changes: 26 additions & 0 deletions resources/public/login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>Login — noir-auth-app</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="content">
<form action="/login" method="POST">
<p class="error-message">Sample error message.</p>
<p><input name="username-or-email" type="text"
placeholder="Username or email" data-i18n-placeholder="username-or-email"></p>
<p><input name="password" type="password"
placeholder="Password" data-i18n-placeholder="password"></p>
<p><a href="/password-resets" data-i18n="forgot-password">forgot password?</a></p>
<p><input type="submit" value="Log in" data-i18n-value="log-in"></p>
</form>
<hr>
<p><a class="button signup" href="/signup" data-i18n="sign-up-ended-with-ellipsis">Sign up...</a></p>
</div>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions resources/public/navs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="nav">

<ul id="not-logged-in-nav">
<li><a href="/login">log in</a></li>
</ul>

</div>
<div style="clear: both"></div>
<div class="nav">

<ul id="logged-in-nav">
<li><a href="/admin">admin</a></li><!--
http://stackoverflow.com/q/12168194/974795
--><li><a href="/settings">settings</a></li><!--
--><li><a data-method="post" href="/logout">log out</a></li>
</ul>

</div>
</div>
</body>
</html>
22 changes: 22 additions & 0 deletions resources/public/password-resets/edit.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Change password — noir-auth-app</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="../css/reset.css" rel="stylesheet" type="text/css">
<link href="../css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="content">
<form action="/password-resets/:reset-code" method="POST">
<p class="error-message">Sample error message.</p>
<input name="_method" type="hidden" value="PUT">
<p><input name="password" type="password"
placeholder="password" data-i18n-placeholder="password" ></p>
<p><input type="submit" value="Save" data-i18n-value="save"></p>
</form>
</div>
</div>
</body>
</html>
22 changes: 22 additions & 0 deletions resources/public/password-resets/new.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Signup — noir-auth-app</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="../css/reset.css" rel="stylesheet" type="text/css">
<link href="../css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="content">
<form action="/password-resets" method="POST">
<p class="error-message">Sample error message.</p>
<p><input id="email" name="email" type="text"
placeholder="Email" data-i18n-placeholder="email"></p>
<input type="submit" value="Reset password"
data-i18n-value="reset-password">
</form>
</div>
</div>
</body>
</html>
50 changes: 50 additions & 0 deletions resources/public/settings.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>Settings — noir-auth-app</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="content">
<form action="/username-changes" method="POST" class="username-form">
<p class="error-message">Sample error message.</p>
<p><input name="username" type="text"
placeholder="Username" data-i18n-placeholder="username"></p>
<p><input type="submit" value="change username"
data-i18n-value="change-username"></p>
</form>
<p class="email-notice">
<span data-i18n="email-change-confirmation-sent">Email sent to
xavi@example.com with a link to confirm the address change.
</span><br>
<a data-method="post" href="/email-changes/resend-confirmation"
data-i18n="resend-confirmation">resend confirmation</a> ·
<a data-method="post" href="/email-changes/cancel"
data-i18n="cancel-change">cancel change</a>
</p>
<form action="/email-changes" method="POST" class="email-form">
<p class="error-message">Sample error message.</p>
<p><input name="email" type="text"
placeholder="Email" data-i18n-placeholder="email"></p>
<p><input type="submit" value="change email"
data-i18n-value="change-email"></p>
</form>
<p class="password-notice">Sample notice message.</p>
<form action="/password-changes" method="POST" class="password-form">
<p class="error-message">Sample error message.</p>
<p><input name="password" type="password"
placeholder="Password" data-i18n-placeholder="password"></p>
<p><input type="submit" value="change password"
data-i18n-value="change-password"></p>
</form>
<p><a data-action="delete-account"
data-callback="delete-account-callback"
data-confirm="Are you sure?"
data-i18n="delete-account" href="#">delete account</a></p>
</div>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions resources/public/signup.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Signup — noir-auth-app</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div class="content">
<form action="/signup" method="POST">
<p class="error-message">Sample error message.</p>
<p><input id="username" name="username" type="text"
placeholder="Username" data-i18n-placeholder="username" /></p>
<p><input id="email" name="email" type="text"
placeholder="Email" data-i18n-placeholder="email" /></p>
<p><input id="password" name="password" type="password"
placeholder="Password" data-i18n-placeholder="password" /></p>
<input type="submit" value="Sign up" data-i18n-value="sign-up">
</form>
</div>
</div>
</body>
</html>
20 changes: 20 additions & 0 deletions src/noir_auth_app/client/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,26 @@
; Handles links that require user confirmation and trigger calls to remote
; functions on the server (AJAX).
;
; data-confirm inspired by how Rails 3 handles JavaScript confirmation
; messages
; http://railscasts.com/episodes/205-unobtrusive-javascript?view=asciicast
; https://github.com/rails/jquery-ujs/wiki/ajax
; data-action inspired by Chris Granger's Overtone controller. In Rails the
; action would typically be specified in href, but in Rails the action is
; specified with an HTTP method and a URL, while Granger's fetch library
; provides a higher level interface by which the action is simply specified
; with a remote function name, so it doesn't seem appropriate to put a
; function name where a URL is expected (actually, it might be ok if the
; function name were prefixed with something like "cljs:", similar to how
; the "javascript:" pseudo protocol prefix is used to put JavaScript code
; directly into an href, but then parsing that action value would be a little
; more complicated). Another reason to not put the function name in href is
; that if JavaScript is disabled, when clicking on the link the browser would
; try to open that, which would cause an error.
; http://www.chris-granger.com/2012/02/20/overtone-and-clojurescript/
; The idea is to handle all confirmation messages like this with the same
; ClojureScript code, in the same way that Rails does.
;
; bind
; https://github.com/ibdknox/jayq/blob/master/src/jayq/core.cljs
(jq/bind
Expand Down
Loading

0 comments on commit f04292c

Please sign in to comment.