oauth, UX

pull/490/head
hunterlong 2020-04-07 07:56:49 -07:00
parent d7190719e0
commit fa035fdbc7
10 changed files with 216 additions and 54 deletions

View File

@ -31,8 +31,10 @@
"querystring": "^0.2.0",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.2",
"vue-clipboard2": "^0.3.1",
"vue-codemirror": "^4.0.6",
"vue-flatpickr-component": "^8.1.5",
"vue-github-button": "^1.1.2",
"vue-moment": "^4.1.0",
"vue-observe-visibility": "^0.4.6",
"vue-router": "~3.0",

View File

@ -33,23 +33,6 @@
<button @click.prevent="saveSettings" id="save_core" type="submit" class="btn btn-primary btn-block">Save Settings</button>
<div class="form-group row mt-5">
<label class="col-sm-3 col-form-label">API Key</label>
<div class="col-sm-9">
<input v-model="core.api_key" @focus="$event.target.select()" type="text" class="form-control select-input" id="api_key" readonly>
<small class="form-text text-muted">API Key can be used for read only routes</small>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">API Secret</label>
<div class="col-sm-9">
<input v-model="core.api_secret" @focus="$event.target.select()" type="text" class="form-control select-input" id="api_secret" readonly>
<small class="form-text text-muted">API Secret is used for read, create, update and delete routes</small>
<small class="form-text text-muted">You can <a href="#" @click="renewApiKeys">Regenerate API Keys</a> if you need to.</small>
</div>
</div>
</form>
</template>
@ -58,10 +41,15 @@
export default {
name: 'CoreSettings',
props: {
core: {
type: Object,
required: true,
props: {
in_core: {
type: Object,
required: true,
}
},
data() {
return {
core: this.in_core
}
},
methods: {
@ -72,15 +60,6 @@
this.$store.commit('setCore', core)
this.core = core
},
async renewApiKeys() {
let r = confirm("Are you sure you want to reset the API keys?");
if (r === true) {
await Api.renewApiKeys()
const core = await Api.core()
this.$store.commit('setCore', core)
this.core = core
}
},
selectAll() {
this.$refs.input.select();
}

View File

@ -24,7 +24,8 @@
</div>
<a v-if="oauth.oauth_providers.split(',').includes('github')" class="btn btn-block btn-outline-dark" :href="`https://github.com/login/oauth/authorize?scope=user:email&client_id=${oauth.gh_client_id}`">Login with Github</a>
<a v-if="oauth.oauth_providers.split(',').includes('google')" class="btn btn-block btn-outline-secondary" :href="`https://oauth-redirect.googleusercontent.com/r/${oauth.google_client_id}`">Login with Google</a>
<a v-if="oauth.oauth_providers.split(',').includes('google')" class="btn btn-block btn-outline-secondary" :href="`https://accounts.google.com/signin/oauth?client_id=${oauth.google_client_id}&response_type=code&scope=${google_scope}&redirect_uri=${$store.getters.core.domain}/oauth/google`">Login with Google</a>
<a v-if="oauth.oauth_providers.split(',').includes('slack')" class="btn btn-block btn-outline-secondary" :href="`https://slack.com/oauth/v2/authorize?client_id=${oauth.slack_client_id}&team=${oauth.slack_team}&user_scope=${slack_scope}&redirect_uri=${$store.getters.core.domain}/oauth/slack`">Login with Slack</a>
</form>
</template>
@ -46,7 +47,9 @@
auth: {},
loading: false,
error: false,
disabled: true
disabled: true,
google_scope: "https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email",
slack_scope: "identity.email,identity.basic"
}
},
mounted() {

View File

@ -46,9 +46,11 @@
</span>
</div>
</div>
<div class="form-group">
<small class="form-text text-muted">Authorized Callback URL</small>
<input v-bind:value="`${$store.getters.core.domain}/oauth/github`" type="text" class="form-control" readonly>
<div class="form-group row">
<label for="gh_callback" class="col-sm-4 col-form-label">Callback URL</label>
<div class="col-sm-8">
<input v-bind:value="`${$store.getters.core.domain}/oauth/github`" type="text" class="form-control" id="gh_callback" readonly>
</div>
</div>
</div>
</div>
@ -78,12 +80,57 @@
</span>
</div>
</div>
<div class="form-group">
<small class="form-text text-muted">Authorized Redirect URI</small>
<input v-bind:value="`${$store.getters.core.domain}/oauth/google`" type="text" class="form-control" readonly>
<div class="form-group row">
<label for="callback" class="col-sm-4 col-form-label">Callback URL</label>
<div class="col-sm-8">
<input v-bind:value="`${$store.getters.core.domain}/oauth/google`" type="text" class="form-control" id="callback" readonly>
</div>
</div>
</div>
</div>
<div class="card text-black-50 bg-white mb-3">
<div class="card-header">Slack Settings</div>
<div class="card-body">
<span>Go to <a href="https://console.cloud.google.com/apis/credentials">OAuth Consent Screen</a> on Google Console to create a new OAuth application.</span>
<div class="form-group row mt-3">
<label for="slack_client" class="col-sm-4 col-form-label">Slack Client ID</label>
<div class="col-sm-8">
<input v-model="oauth.slack_client_id" type="text" class="form-control" id="slack_client" required>
</div>
</div>
<div class="form-group row">
<label for="slack_secret" class="col-sm-4 col-form-label">Slack Client Secret</label>
<div class="col-sm-8">
<input v-model="oauth.slack_client_secret" type="text" class="form-control" id="slack_secret" required>
</div>
</div>
<div class="form-group row">
<label for="slack_secret" class="col-sm-4 col-form-label">Slack Team ID</label>
<div class="col-sm-8">
<input v-model="oauth.slack_team" type="text" class="form-control" id="slack_team">
<small>Optional</small>
</div>
</div>
<div class="form-group row">
<label for="switch-slack-oauth" class="col-sm-4 col-form-label">Enable Slack Login</label>
<div class="col-md-8 col-xs-12 mt-1">
<span @click="slack_enabled = !!slack_enabled" class="switch float-left">
<input v-model="slack_enabled" type="checkbox" class="switch" id="switch-slack-oauth" :checked="google_enabled">
<label for="switch-slack-oauth"> </label>
</span>
</div>
</div>
<div class="form-group row">
<label for="slack_callback" class="col-sm-4 col-form-label">Callback URL</label>
<div class="col-sm-8">
<input v-bind:value="`${$store.getters.core.domain}/oauth/slack`" type="text" class="form-control" id="slack_callback" readonly>
</div>
</div>
</div>
</div>
{{providers()}}
<button class="btn btn-primary btn-block" @click.prevent="saveOAuth" type="submit">
Save OAuth Settings
@ -106,7 +153,8 @@
return {
internal_enabled: this.$store.getters.core.oauth.oauth_providers.split(",").includes('local'),
google_enabled: this.$store.getters.core.oauth.oauth_providers.split(",").includes('google'),
github_enabled: this.$store.getters.core.oauth.oauth_providers.split(",").includes('github')
github_enabled: this.$store.getters.core.oauth.oauth_providers.split(",").includes('github'),
slack_enabled: this.$store.getters.core.oauth.oauth_providers.split(",").includes('slack')
}
},
beforeCreate() {
@ -123,6 +171,12 @@
if (this.internal_enabled) {
providers.push("local")
}
if (this.google_enabled) {
providers.push("google")
}
if (this.slack_enabled) {
providers.push("slack")
}
return providers.join(",")
},
async saveOAuth() {

View File

@ -2,6 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import VueApexCharts from 'vue-apexcharts'
import VueObserveVisibility from 'vue-observe-visibility'
import VueClipboard from 'vue-clipboard2'
import App from '@/App.vue'
import store from './store'
@ -14,6 +15,7 @@ import "./icons"
Vue.component('apexchart', VueApexCharts)
Vue.use(VueClipboard);
Vue.use(VueRouter);
Vue.use(VueObserveVisibility);

View File

@ -63,6 +63,12 @@ export default Vue.mixin({
day() {
return 3600 * 24
},
copy(txt) {
this.$copyText(txt).then(function (e) {
alert('Copied: \n'+txt)
console.log(e)
});
},
serviceLink(service) {
if (!service) {
return ""

View File

@ -57,31 +57,51 @@
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade" v-bind:class="{active: liClass('v-pills-home-tab'), show: liClass('v-pills-home-tab')}" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="card text-black-50 bg-white mb-5">
<div class="card text-black-50 bg-white">
<div class="card-header">Statping Settings</div>
<div class="card-body">
<CoreSettings :core="core"/>
<CoreSettings :in_core="core"/>
</div>
</div>
<div class="card text-black-50 bg-white mb-3">
<div class="card-header">Statping Settings</div>
<div class="card text-black-50 bg-white mt-3">
<div class="card-header">API Settings</div>
<div class="card-body">
<h2 class="mt-5">Additional Settings</h2>
<div v-if="core.domain !== ''" class="row">
<div class="col-12">
<div class="row align-content-center">
<img class="rounded text-center" width="300" height="300" :src="qrcode">
<div class="form-group row">
<label class="col-sm-3 col-form-label">API Key</label>
<div class="col-sm-9">
<div class="input-group">
<input v-model="core.api_key" type="text" class="form-control" id="api_key" readonly>
<div class="input-group-append">
<button @click.prevent="copy(core.api_key)" class="btn btn-outline-secondary" type="button">Copy</button>
</div>
</div>
<small class="form-text text-muted">API Key can be used for read only routes</small>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">API Secret</label>
<div class="col-sm-9">
<div class="input-group">
<input v-model="core.api_secret" @focus="$event.target.select()" type="text" class="form-control select-input" id="api_secret" readonly>
<div class="input-group-append">
<button @click="copy(core.api_secret)" class="btn btn-outline-secondary" type="button">Copy</button>
</div>
</div>
<small class="form-text text-muted">API Secret is used for read, create, update and delete routes</small>
<small class="form-text text-muted">You can <a href="#" @click="renewApiKeys">Regenerate API Keys</a> if you need to.</small>
</div>
</div>
<a class="btn btn-sm btn-primary" :href="qrurl">Open in Statping App</a>
<a href="settings/export" class="btn btn-sm btn-secondary">Export Settings</a>
</div>
</div>
<div v-else>
Insert a domain to view QR code for the mobile app.
</div>
<div class="card text-black-50 bg-white mt-3">
<div class="card-header">QR Code for Mobile App</div>
<div class="card-body">
<img class="rounded" width="300" height="300" :src="qrcode">
</div>
</div>
@ -167,7 +187,16 @@
},
liClass(id) {
return this.tab === id
},
async renewApiKeys() {
let r = confirm("Are you sure you want to reset the API keys?");
if (r === true) {
await Api.renewApiKeys()
const core = await Api.core()
this.$store.commit('setCore', core)
this.core = core
}
},
}
}
</script>

View File

@ -3299,6 +3299,15 @@ cli-width@^2.0.0:
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
clipboard@^2.0.0:
version "2.0.6"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"
clipboardy@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.2.0.tgz#681e2af495924bcaeed159db3287ef5a5f4d2ee1"
@ -4263,6 +4272,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@ -5599,6 +5613,11 @@ getpass@^0.1.1:
dependencies:
assert-plus "^1.0.0"
github-buttons@^2.3.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.7.0.tgz#ce481388a39a8ed91a8073b6d3f1802f0068d52d"
integrity sha512-NGW6U6ZgLVTat6E6ZobWa9lwHsrthRo8NJ8GxlOAcrfeURg0k9qTrs1gG6Vzjjxt8jg/Wd2Or7RSGjKOrT5mFA==
glob-parent@5.1.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
@ -5775,6 +5794,13 @@ gonzales-pe@^4.2.4:
dependencies:
minimist "1.1.x"
good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
dependencies:
delegate "^3.1.2"
graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@ -10176,6 +10202,11 @@ select-hose@^2.0.0:
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
selfsigned@^1.10.7, selfsigned@^1.9.1:
version "1.10.7"
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
@ -11223,6 +11254,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-emitter@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
tmp@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
@ -11787,6 +11823,13 @@ vue-apexcharts@^1.5.2:
resolved "https://registry.yarnpkg.com/vue-apexcharts/-/vue-apexcharts-1.5.2.tgz#d1f55b889718aa9e1c753e267c8cb59055ff89f3"
integrity sha512-m7IIyql4yU6cLTu5RODx3DcdxCekmNRzUh7lEoybq2MXcgabmBPhUn8qgXNx1HucWiMNOdXfwq/L6TfCbKnfMw==
vue-clipboard2@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894"
integrity sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==
dependencies:
clipboard "^2.0.0"
vue-codemirror@^4.0.6:
version "4.0.6"
resolved "https://registry.yarnpkg.com/vue-codemirror/-/vue-codemirror-4.0.6.tgz#b786bb80d8d762a93aab8e46f79a81006f0437c4"
@ -11819,6 +11862,13 @@ vue-functional-data-merge@^3.1.0:
resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
integrity sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==
vue-github-button@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vue-github-button/-/vue-github-button-1.1.2.tgz#318518c3a31d0fbd278ebcc80fbc5f88d68836e6"
integrity sha512-VukmgRy1wU0Ec8L8Qti4OOojQSfLRunf/In8bMqEJMXCZAz9BEgF4P+loAMBDoUqLYfyak4VJ2O7NTsZH2GLvQ==
dependencies:
github-buttons "^2.3.0"
vue-hot-reload-api@^2.3.0:
version "2.3.4"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"

View File

@ -3,12 +3,15 @@ package handlers
import (
"fmt"
"github.com/gorilla/mux"
"github.com/kataras/iris/v12/sessions"
"github.com/statping/statping/types/core"
"github.com/statping/statping/types/null"
"github.com/statping/statping/types/users"
"github.com/statping/statping/utils"
"golang.org/x/oauth2"
"golang.org/x/oauth2/github"
"golang.org/x/oauth2/google"
"golang.org/x/oauth2/slack"
"net/http"
)
@ -96,3 +99,34 @@ func googleOAuth(r *http.Request) (error, *oAuth) {
Valid: gg.Valid(),
}
}
func slackOAuth(r *http.Request) (error, *oAuth) {
c := *core.App
code := r.URL.Query().Get("code")
config := &oauth2.Config{
ClientID: c.OAuth.GithubClientID,
ClientSecret: c.OAuth.GithubClientSecret,
Endpoint: slack.Endpoint,
}
gg, err := config.Exchange(r.Context(), code)
if err != nil {
return err, nil
}
return nil, &oAuth{
Token: gg.AccessToken,
RefreshToken: gg.RefreshToken,
Valid: gg.Valid(),
}
}
func secureToken(w http.ResponseWriter, r *http.Request) {
tk := utils.NewSHA256Hash()
cookie := &http.Cookie{
Name: "statping_oauth",
Value: tk,
}
sessions.AddCookie(r.Context(), cookie, false)
}

View File

@ -51,6 +51,9 @@ type OAuth struct {
GithubClientSecret string `gorm:"column:gh_client_secret" json:"gh_client_secret,omitempty" scope:"admin"`
GoogleClientID string `gorm:"column:google_client_id" json:"google_client_id,omitempty" scope:"admin"`
GoogleClientSecret string `gorm:"column:google_client_secret" json:"google_client_secret,omitempty" scope:"admin"`
SlackClientID string `gorm:"column:slack_client_id" json:"slack_client_id,omitempty" scope:"admin"`
SlackClientSecret string `gorm:"column:slack_client_secret" json:"slack_client_secret,omitempty" scope:"admin"`
SlackTeam string `gorm:"column:slack_team" json:"slack_team,omitempty" scope:"admin"`
}
// AllNotifiers contains all the Notifiers loaded