This commit is contained in:
James Burke 2010-09-06 15:48:46 -07:00
Родитель 5d76f8d939 a6cf298fd7
Коммит 5528bc60da
10 изменённых файлов: 314 добавлений и 181 удалений

86
examples/auth/index.html Normal file
Просмотреть файл

@ -0,0 +1,86 @@
<!-- ***** BEGIN LICENSE BLOCK *****
- Version: MPL 1.1
-
- The contents of this file are subject to the Mozilla Public License Version
- 1.1 (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
- http://www.mozilla.org/MPL/
-
- Software distributed under the License is distributed on an "AS IS" basis,
- WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- for the specific language governing rights and limitations under the
- License.
-
- The Original Code is Raindrop.
-
- The Initial Developer of the Original Code is
- Mozilla Messaging, Inc..
- Portions created by the Initial Developer are Copyright (C) 2009
- the Initial Developer. All Rights Reserved.
-
- Contributor(s):
- -->
<!DOCTYPE html>
<html>
<head>
<title>Links keep dropping on my head</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="../../scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
<script>require(["index.js"]);</script>
<style>
.hidden {
display: none;
}
.invisible {
visibility: hidden;
}
.socialicons { list-style-type:none; display:inline;}
.socialicons li {float:left; padding:4px}
</style>
</head>
<body class="settings">
<div class="authorize">
<p>Click on a service you want to authorize with Linkdrop</p>
<form id="oauthForm" action="/api/account/authorize" method="POST">
<input type="hidden" name="end_point_success" value="/examples/auth/#oauth_success">
<input type="hidden" name="end_point_auth_failure" value="/examples/auth/#oauth_failure">
<div class="row">
<ul class="socialicons">
<li class="direct" title="Facebook" domain="facebook.com">
<input type="image" src="/examples/images/facebook_32.png" name="domain" width="32" height="32" value="facebook.com"></li>
<li class="direct" title="Twitter" domain="twitter.com">
<input type="image" src="/examples/images/twitter_32.png" name="domain" width="32" height="32" value="twitter.com"></li>
<li class="direct" title="Google" domain="twitter.com">
<input type="image" src="/examples/images/google_32.png" name="domain" width="32" height="32" value="google.com"></li>
</ul><div style="clear: both;"/>
</div>
</form>
</div>
<!-- oauth_success_twitter section -->
<div class="section oauth_success hidden">
<div class="row">
<div class="c1">
<h4 class="success">Success!</h4>
<p>Authorization configured</p>
</div>
</div>
</div>
<!-- oauth_failure_twitter section -->
<div class="section oauth_failure hidden">
<div class="row">
<div class="c1">
<h4 class="error">Error</h4>
<p>Authorization Failed</p>
</div>
</div>
</div>
</body>
</html>

Просмотреть файл

@ -49,11 +49,12 @@ function (require, $, fn, rdapi, placeholder, url) {
var validHashRegExp = /^\w+$/;
function onHashChange() {
var value = location.hash.split("#")[1],
start, end;
value = value || "welcome";
var value = location.hash.split("#")[1] || "authorize"
show(value);
}
function show(value) {
var start, end;
if (validHashRegExp.test(value)) {
$(".section").each(function (i, node) {
node = $(node);
@ -87,6 +88,7 @@ function (require, $, fn, rdapi, placeholder, url) {
$("#oauthForm")
.submit(function (evt) {
show("authorize");
//First clear old errors
$(".error").addClass("invisible");

Двоичные данные
examples/images/facebook_32.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.0 KiB

Двоичные данные
examples/images/google_32.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.3 KiB

Двоичные данные
examples/images/twitter_32.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.2 KiB

204
examples/send/index.html Normal file
Просмотреть файл

@ -0,0 +1,204 @@
<!-- ***** BEGIN LICENSE BLOCK *****
- Version: MPL 1.1
-
- The contents of this file are subject to the Mozilla Public License Version
- 1.1 (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
- http://www.mozilla.org/MPL/
-
- Software distributed under the License is distributed on an "AS IS" basis,
- WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- for the specific language governing rights and limitations under the
- License.
-
- The Original Code is Raindrop.
-
- The Initial Developer of the Original Code is
- Mozilla Messaging, Inc..
- Portions created by the Initial Developer are Copyright (C) 2009
- the Initial Developer. All Rights Reserved.
-
- Contributor(s):
- -->
<!-- A hacky sample to attempt a send and handle auth failure automatically
then attempt a resend
-->
<!DOCTYPE html>
<html>
<head>
<title>Send a message</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="../../scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
<script>require(["index.js"]);</script>
<style>
.hidden {
display: none;
}
.invisible {
visibility: hidden;
}
.twitter {
background: url("/examples/images/twitter_32.png") no-repeat;
}
.facebook {
background: url("/examples/images/facebook_32.png") no-repeat;
}
.google {
background: url("/examples/images/google_32.png") no-repeat;
}
#messageForm label {
width: 32px;
height: 32px;
display: block;
float: left;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
#messageForm label.r_on {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
#messageForm label input { position: absolute; left: -9999px; }
</style>
<script>
function setupLabel() {
if ($('.label_check input').length) {
$('.label_check').each(function(){
$(this).removeClass('c_on');
});
$('.label_check input:checked').each(function(){
$(this).parent('label').addClass('c_on');
});
};
if ($('.label_radio input').length) {
$('.label_radio').each(function(){
$(this).removeClass('r_on');
});
$('.label_radio input:checked').each(function(){
$(this).parent('label').addClass('r_on');
});
};
};
$(document).ready(function(){
$('body').addClass('has-js');
$('.label_check, .label_radio').click(function(){
setupLabel();
});
setupLabel();
});
</script>
</head>
<body class="settings">
<div class="row">
<div class="c4 logo">
</div>
</div>
<!-- send form -->
<div class="section send">
<p>Select the service you want to send a message to</p>
<form name="messageForm" id="messageForm" action="#">
<div class="row">
<div class="c1">
<label class="label_radio twitter"><input type="radio" name="domain" value="twitter.com" checked="checked" /></label>
<label class="label_radio facebook"><input type="radio" name="domain" value="facebook.com"></label>
<label class="label_radio google"><input type="radio" name="domain" value="google.com"></label>
<div style="clear:both;"/>
<input name="message">
<input type="hidden" name="end_point_success" value="/examples/send/#success">
<input type="hidden" name="end_point_failure" value="/examples/send/#failure">
<input type="hidden" name="end_point_auth_failure" value="/examples/send/#auth_failure">
<button>send</button>
</div>
<div class="c1">
<div class="usernameError error invisible">Please enter your Twitter name</div>
</div>
</div>
</form>
</div>
<!-- send success section -->
<div class="section success hidden">
<div class="row">
<div class="c1">
<h4 class="success">Success!</h4>
<p>Your message was sent</p>
</div>
</div>
</div>
<!-- auth failure section
This is the end_point for when the *send* request fails auth (but not
when the explicit auth request fails) - when this happens we do the
explicit auth.
-->
<div class="section auth_failure hidden">
<div class="row">
<div class="c1">
<p>Authorizing...</p>
<!-- the js code arranges to submit the auth form below... -->
</div>
</div>
</div>
<div class="section auth_form hidden"> <!-- this is never made visible -->
<form name="authForm" id="authForm" action="/api/account/authorize" method="POST">
<div class="row">
<input type="hidden" name="domain">
<input type="hidden" name="end_point_success" value="/examples/send/#auth_success">
<input type="hidden" name="end_point_auth_failure" value="/examples/send/#final_auth_failure">
</div>
</form>
</div>
<!-- final auth failure section
This is the end_point for when the explicit auth request fails - we have
given up here...
-->
<div class="section final_auth_failure hidden">
<div class="row">
<div class="c1">
<p>Failed to authorize...</p>
</div>
</div>
</div>
<!-- auth success section
This is the end_point for when the explicit auth request succeeds - we
then attempt to retry the send.
-->
<div class="section auth_success hidden">
<div class="row">
<div class="c1">
<p>Sending...</p>
<!-- the JS code re-submits the send form -->
</div>
</div>
</div>
<!-- general failure section - an error other than auth failure...-->
<div id="resultMsg" class="section failure hidden">
<div class="row">
<div class="c1">
<p id="resultReason">Sorry - we failed for obscure reasons...</p>
</div>
</div>
</div>
</body>
</html>

Просмотреть файл

@ -136,6 +136,7 @@ function (require, $, fn, rdapi, placeholder, url) {
}
}
sendMessage();
return false;
})
.each(function (i, node) {
placeholder(node);

16
index.html Normal file
Просмотреть файл

@ -0,0 +1,16 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Linkdrop</title>
</head>
<body>
<h3>Linkdrop Examples</h3>
<ul>
<li><a href="/examples/auth">Authorization</a></li>
<li><a href="/examples/send">Sending</a></li>
<li><a href="/examples/history">History</a></li>
<li><a href="/rdapi">Api Browser</a></li>
</ul>
</body>
</html>

Просмотреть файл

@ -1,6 +0,0 @@
This is a "scratch pad" folder - it is used for items to aid with development
before the "real" application has matured. As a result, they tend to be very
light in terms of styling and design elements - they are just bare-bones.
Items here should be short-lived and removed from here once they are replaced
with real UI.

Просмотреть файл

@ -1,170 +0,0 @@
<!-- ***** BEGIN LICENSE BLOCK *****
- Version: MPL 1.1
-
- The contents of this file are subject to the Mozilla Public License Version
- 1.1 (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
- http://www.mozilla.org/MPL/
-
- Software distributed under the License is distributed on an "AS IS" basis,
- WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- for the specific language governing rights and limitations under the
- License.
-
- The Original Code is Raindrop.
-
- The Initial Developer of the Original Code is
- Mozilla Messaging, Inc..
- Portions created by the Initial Developer are Copyright (C) 2009
- the Initial Developer. All Rights Reserved.
-
- Contributor(s):
- -->
<!DOCTYPE html>
<html>
<head>
<title>Links keep dropping on my head</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="../../scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
<script>require(["index.js"]);</script>
<style>
.hidden {
display: none;
}
.invisible {
visibility: hidden;
}
</style>
</head>
<body class="settings">
<div class="row">
<div class="c4 logo">
</div>
</div>
<!-- default section -->
<div class="section welcome hidden">
<div class="row">
<div class="c1">
<p>Welcome.</p>
<p><a href="#twitter">Create an account</a></p>
</div>
</div>
</div>
<!-- twitter section -->
<div class="section twitter hidden">
<form id="oauthForm" action="/api/account/authorize" method="POST">
<div class="row">
<div class="c1 twitterHeader">
<strong>step 4:</strong> Add twitter account *
</div>
<div class="c1">
<input type="hidden" name="domain" value="twitter.com">
<input type="hidden" name="end_point_success" value="/scratch/oauth/#oauth_success_twitter_com">
<input type="hidden" name="end_point_auth_failure" value="/scratch/oauth/#oauth_failure_twitter_com">
<div class="twitterActions">
<a class="skip" href="#facebook">skip this step</a>
<button>submit</button>
</div>
<div class="finePrint grey">
*You may delete your account at any time
</div>
</div>
</div>
<div class="c1">
<div class="usernameError error invisible">Please enter your Twitter name</div>
</div>
</div>
</form>
</div>
<!-- oauth_success_twitter section -->
<div class="section oauth_success_twitter_com hidden">
<div class="row">
<div class="c1">
<h4 class="success">Success!</h4>
<p>Twitter properly configured</p>
<button class="notification" onclick="location='#facebook'">continue</button>
</div>
</div>
</div>
<!-- oauth_failure_twitter section -->
<div class="section oauth_failure_twitter_com hidden">
<div class="row">
<div class="c1">
<h4 class="error">Error</h4>
<p>Twitter not properly configured</p>
<button class="notification" onclick="location='#twitter'">try again</button>
<button class="notification" onclick="location='#facebook'">continue</button>
</div>
</div>
</div>
<!-- facebook section -->
<div class="section facebook hidden">
<form id="oauthForm" action="/api/account/authorize" method="POST">
<div class="row">
<div class="c1 facebookHeader">
<strong>step 4:</strong> Add facebook account *
</div>
<div class="c1">
<input type="hidden" name="domain" value="facebook.com">
<input type="hidden" name="scope" value="email,offline_access,publish_stream">
<input type="hidden" name="end_point_success" value="/scratch/oauth/#oauth_success_facebook_com">
<input type="hidden" name="end_point_auth_failure" value="/scratch/oauth/#oauth_failure_facebook_com">
<div class="facebookActions">
<a class="skip" href="#done">skip this step</a>
<button>submit</button>
</div>
<div class="finePrint grey">
*You may delete your account at any time
</div>
</div>
</div>
</div>
</form>
</div>
<!-- oauth_success_facebook section -->
<div class="section oauth_success_facebook_com hidden">
<div class="row">
<div class="c1">
<h4 class="success">Success!</h4>
<p>Facebook properly configured</p>
<button class="notification" onclick="location='#done'">continue</button>
</div>
</div>
</div>
<!-- oauth_failure_facebook section -->
<div class="section oauth_failure_facebook_com hidden">
<div class="row">
<div class="c1">
<h4 class="error">Error</h4>
<p>Facebook not properly configured</p>
<button class="notification" onclick="location='#facebook'">try again</button>
<button class="notification" onclick="location='#done'">continue</button>
</div>
</div>
</div>
<!-- done section -->
<div class="section done hidden">
<div class="row">
<div class="c1">
<p>Thanks - we are done!</p>
</div>
</div>
</div>
</body>
</html>