Page MenuHomeMusing Studio
Files F10588135

No OneTemporary
Actions

View Options

diff --git a/less/login.less b/less/login.less
index b756a6a..fefeb12 100644
--- a/less/login.less
+++ b/less/login.less
@@ -1,45 +1,91 @@
/*
* Copyright © 2020 A Bunch Tell LLC.
*
* This file is part of WriteFreely.
*
* WriteFreely is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License, included
* in the LICENSE file in this source code package.
*/
.row.signinbtns {
- justify-content: space-evenly;
+ justify-content: center;
font-size: 1em;
margin-top: 2em;
margin-bottom: 1em;
+ flex-wrap: wrap;
.loginbtn {
height: 40px;
+ margin: 0.5em;
- &.btn.cta {
+ &.btn {
box-sizing: border-box;
font-size: 17px;
+ white-space: nowrap;
+
+ img {
+ height: 1.5em;
+ vertical-align: middle;
+ }
+ }
+
+ &#writeas-login, &#slack-login {
+ img {
+ margin-top: -0.2em;
+ }
+ }
+
+ &#gitlab-login {
+ background-color: #fc6d26;
+ border-color: #fc6d26;
+ &:hover {
+ background-color: darken(#fc6d26, 5%);
+ border-color: darken(#fc6d26, 5%);
+ }
+ }
+
+ &#gitea-login {
+ background-color: #2ecc71;
+ border-color: #2ecc71;
+ &:hover {
+ background-color: #2cc26b;
+ border-color: #2cc26b;
+ }
+ }
+
+ &#slack-login, &#gitlab-login, &#gitea-login, &#generic-oauth-login {
+ font-size: 0.86em;
+ font-family: @sansFont;
+ }
+
+ &#slack-login, &#generic-oauth-login {
+ color: @lightTextColor;
+ background-color: @lightNavBG;
+ border-color: @lightNavBorder;
+ &:hover {
+ background-color: @lightNavHoverBG;
+ }
}
}
}
.or {
text-align: center;
margin-bottom: 3.5em;
p {
display: inline-block;
background-color: white;
padding: 0 1em;
}
hr {
margin-top: -1.6em;
margin-bottom: 0;
}
hr.short {
max-width: 30rem;
}
}
\ No newline at end of file
diff --git a/static/img/mark/writeas-white.png b/static/img/mark/writeas-white.png
new file mode 100644
index 0000000..6c9b2cd
Binary files /dev/null and b/static/img/mark/writeas-white.png differ
diff --git a/templates/include/oauth.tmpl b/templates/include/oauth.tmpl
index 6617fd0..9a8d05e 100644
--- a/templates/include/oauth.tmpl
+++ b/templates/include/oauth.tmpl
@@ -1,28 +1,37 @@
{{define "oauth-buttons"}}
{{ if or .SlackEnabled .WriteAsEnabled .GitLabEnabled .GiteaEnabled .GenericEnabled }}
<div class="row content-container signinbtns">
{{ if .SlackEnabled }}
<a class="loginbtn" href="/oauth/slack"><img alt="Sign in with Slack" height="40" width="172" src="/img/sign_in_with_slack.png" srcset="/img/sign_in_with_slack.png 1x, /img/sign_in_with_slack@2x.png 2x" /></a>
{{ end }}
{{ if .WriteAsEnabled }}
- <a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as">Sign in with <strong>Write.as</strong></a>
+ <a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as">
+ <img src="/img/mark/writeas-white.png" />
+ Sign in with <strong>Write.as</strong>
+ </a>
{{ end }}
{{ if .GitLabEnabled }}
- <a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab">Sign in with <strong>{{.GitLabDisplayName}}</strong></a>
+ <a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab">
+ <img src="/img/mark/gitlab.png" />
+ Sign in with <strong>{{.GitLabDisplayName}}</strong>
+ </a>
{{ end }}
{{ if .GiteaEnabled }}
- <a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea">Sign in with <strong>{{.GiteaDisplayName}}</strong></a>
+ <a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea">
+ <img src="/img/mark/gitea.png" />
+ Sign in with <strong>{{.GiteaDisplayName}}</strong>
+ </a>
{{ end }}
{{ if .GenericEnabled }}
<a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic">Sign in with <strong>{{.GenericDisplayName}}</strong></a>
{{ end }}
</div>
{{if not .DisablePasswordAuth}}
<div class="or">
<p>or</p>
<hr class="short" />
</div>
{{end}}
{{ end }}
{{end}}
\ No newline at end of file
diff --git a/templates/user/settings.tmpl b/templates/user/settings.tmpl
index 95c57c4..22de3d8 100644
--- a/templates/user/settings.tmpl
+++ b/templates/user/settings.tmpl
@@ -1,171 +1,171 @@
{{define "settings"}}
{{template "header" .}}
<style type="text/css">
.option { margin: 2em 0em; }
h3 { font-weight: normal; }
.section p, .section label {
font-size: 0.86em;
}
.oauth-provider img {
max-height: 2.75em;
vertical-align: middle;
}
</style>
<div class="content-container snug">
{{if .Silenced}}
{{template "user-silenced"}}
{{end}}
<h1>{{if .IsLogOut}}Before you go...{{else}}Account Settings {{if .IsAdmin}}<a href="/admin">admin settings</a>{{end}}{{end}}</h1>
{{if .Flashes}}<ul class="errors">
{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
</ul>{{end}}
{{ if .IsLogOut }}
<div class="alert info">
<p class="introduction">Please add an <strong>email address</strong> and/or <strong>passphrase</strong> so you can log in again later.</p>
</div>
{{ else }}
<div>
<p>Change your account settings here.</p>
</div>
<form method="post" action="/api/me/self" autocomplete="false">
<div class="option">
<h3>Username</h3>
<div class="section">
<input type="text" name="username" value="{{.Username}}" tabindex="1" />
<input type="submit" value="Update" style="margin-left: 1em;" />
</div>
</div>
</form>
{{ end }}
{{if not .DisablePasswordAuth}}
<form method="post" action="/api/me/self" autocomplete="false">
<input type="hidden" name="logout" value="{{.IsLogOut}}" />
<div class="option">
<h3>Passphrase</h3>
<div class="section">
{{if and (not .HasPass) (not .IsLogOut)}}<div class="alert info"><p>Add a passphrase to easily log in to your account.</p></div>{{end}}
{{if .HasPass}}<p>Current passphrase</p>
<input type="password" name="current-pass" placeholder="Current passphrase" tabindex="1" /> <input class="show" type="checkbox" id="show-cur-pass" /><label for="show-cur-pass"> Show</label>
<p>New passphrase</p>
{{end}}
{{if .IsLogOut}}<input type="text" value="{{.Username}}" style="display:none" />{{end}}
<input type="password" name="new-pass" autocomplete="new-password" placeholder="New passphrase" tabindex="{{if .IsLogOut}}1{{else}}2{{end}}" /> <input class="show" type="checkbox" id="show-new-pass" /><label for="show-new-pass"> Show</label>
</div>
</div>
<div class="option">
<h3>Email</h3>
<div class="section">
{{if and (not .Email) (not .IsLogOut)}}<div class="alert info"><p>Add your email to get:</p>
<ul>
<li>No-passphrase login</li>
<li>Account recovery if you forget your passphrase</li>
</ul></div>{{end}}
<input type="email" name="email" style="letter-spacing: 1px" placeholder="Email address" value="{{.Email}}" size="40" tabindex="{{if .IsLogOut}}2{{else}}3{{end}}" />
</div>
</div>
<div class="option" style="text-align: center;">
<input type="submit" value="Save changes" tabindex="4" />
</div>
</form>
{{end}}
{{ if .OauthSection }}
<hr />
{{ if .OauthAccounts }}
<div class="option">
<h2>Linked Accounts</h2>
<p>These are your linked external accounts.</p>
{{ range $oauth_account := .OauthAccounts }}
<form method="post" action="/api/me/oauth/remove" autocomplete="false">
<input type="hidden" name="provider" value="{{ $oauth_account.Provider }}" />
<input type="hidden" name="client_id" value="{{ $oauth_account.ClientID }}" />
<input type="hidden" name="remote_user_id" value="{{ $oauth_account.RemoteUserID }}" />
<div class="section oauth-provider">
{{ if $oauth_account.DisplayName}}
{{ if $oauth_account.AllowDisconnect}}
<input type="submit" value="Remove {{.DisplayName}}" />
{{else}}
<a class="btn cta"><strong>{{.DisplayName}}</strong></a>
{{end}}
{{else}}
<img src="/img/mark/{{$oauth_account.Provider}}.png" alt="{{ $oauth_account.Provider | title }}" />
<input type="submit" value="Remove {{ $oauth_account.Provider | title }}" />
{{end}}
</div>
</form>
{{ end }}
</div>
{{ end }}
{{ if or .OauthSlack .OauthWriteAs .OauthGitLab .OauthGeneric .OauthGitea }}
<div class="option">
<h2>Link External Accounts</h2>
<p>Connect additional accounts to enable logging in with those providers, instead of using your username and password.</p>
- <div class="row">
+ <div class="row signinbtns">
{{ if .OauthWriteAs }}
<div class="section oauth-provider">
- <img src="/img/mark/writeas.png" alt="Write.as" />
<a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as?attach=t">
+ <img src="/img/mark/writeas-white.png" alt="Write.as" />
Link <strong>Write.as</strong>
</a>
</div>
{{ end }}
{{ if .OauthSlack }}
<div class="section oauth-provider">
- <img src="/img/mark/slack.png" alt="Slack" />
- <a class="btn cta loginbtn" href="/oauth/slack?attach=t">
+ <a class="btn cta loginbtn" id="slack-login" href="/oauth/slack?attach=t">
+ <img src="/img/mark/slack.png" alt="Slack" />
Link <strong>Slack</strong>
</a>
</div>
{{ end }}
{{ if .OauthGitLab }}
<div class="section oauth-provider">
- <img src="/img/mark/gitlab.png" alt="GitLab" />
<a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab?attach=t">
+ <img src="/img/mark/gitlab.png" alt="GitLab" />
Link <strong>{{.GitLabDisplayName}}</strong>
</a>
</div>
{{ end }}
{{ if .OauthGitea }}
<div class="section oauth-provider">
- <img src="/img/mark/gitea.png" alt="Gitea" />
<a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea?attach=t">
+ <img src="/img/mark/gitea.png" alt="Gitea" />
Link <strong>{{.GiteaDisplayName}}</strong>
</a>
</div>
{{ end }}
- </div>
{{ if .OauthGeneric }}
- <div class="row">
- <div class="section oauth-provider">
- <p><a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic?attach=t">Link <strong>{{ .OauthGenericDisplayName }}</strong></a></p>
- </div>
+ <div class="section oauth-provider">
+ <a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic?attach=t">
+ Link <strong>{{ .OauthGenericDisplayName }}</strong>
+ </a>
</div>
{{ end }}
+ </div>
</div>
{{ end }}
{{ end }}
</div>
<script>
var showChecks = document.querySelectorAll('input.show');
for (var i=0; i<showChecks.length; i++) {
showChecks[i].addEventListener('click', function() {
var prevEl = this.previousElementSibling;
if (prevEl.type == "password") {
prevEl.type = "text";
} else {
prevEl.type = "password";
}
});
}
</script>
{{template "footer" .}}
{{end}}

File Metadata

Mime Type
text/x-diff
Expires
Fri, Apr 25, 3:14 AM (1 d, 6 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
3207858

Event Timeline

musing studio · developers