nicer log in buttons on index

This commit is contained in:
codl 2017-08-23 15:14:24 +02:00
parent 47ef77d0e2
commit 687d2fe96e
No known key found for this signature in database
GPG Key ID: 6CD7C8891ED1233A
8 changed files with 203 additions and 9 deletions

BIN
assets/mastodon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

61
assets/mastodon.svg Normal file
View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 101.25 101.24999"
height="108"
width="108"
version="1.1"
id="svg4"
sodipodi:docname="mastodon.svg"
inkscape:version="0.92.1 r"
inkscape:export-filename="/home/codl/dev/forget/assets/mastodon.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1219"
inkscape:window-height="900"
id="namedview6"
showgrid="false"
inkscape:zoom="2.194861"
inkscape:cx="50.601219"
inkscape:cy="53.761946"
inkscape:window-x="0"
inkscape:window-y="31"
inkscape:window-maximized="0"
inkscape:current-layer="svg4"
units="px"
inkscape:pagecheckerboard="true" />
<path
d="m 76.184258,49.229421 c -3.9125,0 -7.085,-3.1825 -7.085,-7.095 0,-3.91125 3.1725,-7.09375 7.085,-7.09375 3.92125,0 7.09375,3.1825 7.09375,7.09375 0,3.9125 -3.1725,7.095 -7.09375,7.095 m -25.55875,0 c -3.9225,0 -7.095,-3.1825 -7.095,-7.095 0,-3.91125 3.1725,-7.09375 7.095,-7.09375 3.91125,0 7.09375,3.1825 7.09375,7.09375 0,3.9125 -3.1825,7.095 -7.09375,7.095 m -25.57,0 c -3.91125,0 -7.08375,-3.1825 -7.08375,-7.095 0,-3.91125 3.1725,-7.09375 7.08375,-7.09375 3.92125,0 7.09375,3.1825 7.09375,7.09375 0,3.9125 -3.1725,7.095 -7.09375,7.095 m 72.5775,-15.905 c 0,-21.86625 -14.32375,-28.2737494 -14.32375,-28.2737494 -7.23,-3.31875 -19.63,-4.71250004 -32.5175,-4.82750004 h -0.3125 c -12.88875,0.115 -25.28875,1.50875004 -32.5075,4.82750004 0,0 -14.3237495,6.4074994 -14.3237495,28.2737494 0,5.00375 -0.105,10.995 0.05125,17.34 0.52,21.38875 3.92125,42.46375 23.6974995,47.69625 9.1125,2.412499 16.945,2.912499 23.24875,2.568749 11.4225,-0.63375 17.84,-4.076249 17.84,-4.076249 l -0.37375,-8.3025 c 0,0 -8.16625,2.58 -17.34125,2.2675 -9.09125,-0.3125 -18.6825,-0.9775 -20.16,-12.13875 -0.135,-0.97875 -0.1975,-2.02875 -0.1975,-3.13125 0,0 8.915,2.185 20.2325,2.69375 6.9075,0.3225 13.39875,-0.39375 19.98375,-1.185 12.6275,-1.50875 23.62375,-9.29 25.0075,-16.405 2.17375,-11.1925 1.99625,-27.3275 1.99625,-27.3275"
id="path2"
style="fill:#ffffff"
inkscape:connector-curvature="0" />
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -190,3 +190,44 @@ form aside {
font-style: italic;
font-size: 0.8em;
}
a.btn {
color: white;
text-decoration: none;
background-color: #555;
border-radius: .3em;
overflow: hidden;
height: 2em;
display: inline-block;
}
a.btn:hover {
opacity: 0.9;
}
.btn > * {
display: inline-block;
vertical-align: middle;
}
.btn-header {
flex: 0 0;
width: 2em;
height: 2em;
padding-left: 0.1em;
background-image: linear-gradient(0deg,
rgba(255,255,255,0),
rgba(255,255,255,0.2)
);
text-align: center;
}
.btn-header img {
margin-top: 0.4em;
height: 1.1em;
}
.btn-content {
margin: 0 .5em 0 .1em;
}

BIN
assets/twitter.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

63
assets/twitter.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 400 400"
style="enable-background:new 0 0 400 400;"
xml:space="preserve"
id="svg12"
sodipodi:docname="twitter.svg"
inkscape:version="0.92.1 r"
inkscape:export-filename="/home/codl/dev/forget/assets/twitter.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"><metadata
id="metadata18"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs16" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1020"
id="namedview14"
showgrid="false"
inkscape:zoom="0.59"
inkscape:cx="-95.762712"
inkscape:cy="193.22034"
inkscape:window-x="0"
inkscape:window-y="31"
inkscape:window-maximized="1"
inkscape:current-layer="svg12"
inkscape:pagecheckerboard="true" /><style
type="text/css"
id="style2">
.st0{opacity:0.15;fill:#292F33;}
.st1{fill:#FFFFFF;}
</style><g
id="_x31_0_x2013_20_x25__Black_Tint" /><g
id="Logo__x2014__FIXED"
transform="matrix(1.5838783,0,0,1.5838783,-116.80485,-116.77566)"
style="stroke-width:0.63136166"><g
id="g9"
style="stroke-width:0.63136166"><path
class="st1"
d="m 153.6,301.6 c 94.3,0 145.9,-78.2 145.9,-145.9 0,-2.2 0,-4.4 -0.1,-6.6 10,-7.2 18.7,-16.3 25.6,-26.6 -9.2,4.1 -19.1,6.8 -29.5,8.1 10.6,-6.3 18.7,-16.4 22.6,-28.4 -9.9,5.9 -20.9,10.1 -32.6,12.4 -9.4,-10 -22.7,-16.2 -37.4,-16.2 -28.3,0 -51.3,23 -51.3,51.3 0,4 0.5,7.9 1.3,11.7 -42.6,-2.1 -80.4,-22.6 -105.7,-53.6 -4.4,7.6 -6.9,16.4 -6.9,25.8 0,17.8 9.1,33.5 22.8,42.7 -8.4,-0.3 -16.3,-2.6 -23.2,-6.4 0,0.2 0,0.4 0,0.7 0,24.8 17.7,45.6 41.1,50.3 -4.3,1.2 -8.8,1.8 -13.5,1.8 -3.3,0 -6.5,-0.3 -9.6,-0.9 6.5,20.4 25.5,35.2 47.9,35.6 -17.6,13.8 -39.7,22 -63.7,22 -4.1,0 -8.2,-0.2 -12.2,-0.7 22.6,14.4 49.6,22.9 78.5,22.9"
id="path7"
inkscape:connector-curvature="0"
style="fill:#ffffff;stroke-width:0.63136166" /></g></g></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -35,7 +35,7 @@ def task_gen_logo():
def task_copy_asset():
import shutil
assets = ('icon.png', 'logotype.png', 'settings.js')
assets = ('icon.png', 'logotype.png', 'settings.js', 'twitter.png', 'mastodon.png')
for asset in assets:
yield dict(
name=asset,

View File

@ -60,7 +60,9 @@ def index():
settings_error = 'settings_error' in request.args
)
else:
instances = MastodonInstance.query.filter(MastodonInstance.popularity > 1).order_by(db.desc(MastodonInstance.popularity)).limit(3)
return render_template('index.html',
mastodon_instances = instances,
twitter_login_error = 'twitter_login_error' in request.args)
@app.route('/login/twitter')
@ -216,16 +218,18 @@ def api_viewer_timers():
)
@app.route('/login/mastodon', methods=('GET', 'POST'))
def mastodon_login_step1():
def mastodon_login_step1(instance=None):
instances = MastodonInstance.query.filter(MastodonInstance.popularity > 1).order_by(db.desc(MastodonInstance.popularity)).limit(16)
if request.method == 'GET':
return render_template('mastodon_login.html', instances=instances, generic_error = 'error' in request.args)
instance_url = request.args.get('instance_url', None) or request.form.get('instance_url', None)
if not 'instance_url' in request.form or not request.form['instance_url']:
return render_template('mastodon_login.html', instances=instances, address_error=True)
if not instance_url:
return render_template('mastodon_login.html', instances=instances,
address_error = request.method == 'POST',
generic_error = 'error' in request.args
)
instance_url = request.form['instance_url'].split("@")[-1].lower()
instance_url = instance_url.split("@")[-1].lower()
callback = url_for('mastodon_login_step2', instance=instance_url, _external=True)

View File

@ -27,8 +27,33 @@
{% endif %}
<p>Sound good to you?</p>
<p><a href="/login/twitter">Log in with Twitter</a></p>
<p><a href="{{ url_for('mastodon_login_step1') }}">Log in with Mastodon</a></p>
<p>
<a style='background-color:#1da1f2' class='btn' href="/login/twitter">
<span class='btn-header'>
<img src='{{ st('twitter.png') }}'></span>
<span class='btn-content'>Log in with Twitter</span>
</a>
</p>
{% for instance in mastodon_instances %}
<p>
<a style='background-color:#282c37' class='btn' href="{{ url_for('mastodon_login_step1', instance_url=instance.instance) }}">
<span class='btn-header'>
<img src='{{ st('mastodon.png') }}'></span>
<span class='btn-content'>Log in with {{instance.instance}}</span>
</a>
</p>
{% endfor %}
<p>
<a style='background-color:#282c37' class='btn' href="{{ url_for('mastodon_login_step1') }}">
<span class='btn-header'>
<img src='{{ st('mastodon.png') }}'></span>
<span class='btn-content'>Log in with another Mastodon instance</span>
</a>
</p>
</section>
<section class='policy'>
<h2>Policy</h2>