Add ArcGIS oauth refresh page
This commit is contained in:
parent
35fc57e8d1
commit
a4a8bcdaa9
4 changed files with 159 additions and 4 deletions
|
|
@ -57,6 +57,7 @@ func Router() chi.Router {
|
|||
r.Method("GET", "/configuration/user/add", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/intelligence", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/operations", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/oauth/refresh/arcgis", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/planning", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/review", authenticatedHandler(getRoot))
|
||||
r.Method("GET", "/review/pool", authenticatedHandler(getRoot))
|
||||
|
|
@ -73,7 +74,6 @@ func Router() chi.Router {
|
|||
r.Method("GET", "/layout-test", authenticatedHandler(getLayoutTest))
|
||||
r.Method("GET", "/message", authenticatedHandler(getMessageList))
|
||||
r.Method("GET", "/notification", authenticatedHandler(getNotificationList))
|
||||
r.Method("GET", "/oauth/refresh", authenticatedHandler(getOAuthRefresh))
|
||||
r.Method("GET", "/parcel", authenticatedHandler(getParcel))
|
||||
r.Method("GET", "/pool", authenticatedHandler(getPoolList))
|
||||
r.Method("GET", "/pool/create", authenticatedHandler(getPoolCreate))
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import ConfigurationRoot from "./view/configuration/Root.vue";
|
|||
import ConfigurationUser from "./view/configuration/User.vue";
|
||||
import ConfigurationUserAdd from "./view/configuration/UserAdd.vue";
|
||||
import Intelligence from "./view/Intelligence.vue";
|
||||
import OAuthRefreshArcgis from "./view/OAuthRefreshArcgis.vue";
|
||||
import Operations from "./view/Operations.vue";
|
||||
import Planning from "./view/Planning.vue";
|
||||
import Review from "./view/Review.vue";
|
||||
|
|
@ -73,6 +74,11 @@ const routes: RouteRecordRaw[] = [
|
|||
name: "Intelligence",
|
||||
component: Intelligence,
|
||||
},
|
||||
{
|
||||
path: "/oauth/refresh/arcgis",
|
||||
name: "Arcgis OAuth Refresh",
|
||||
component: OAuthRefreshArcgis,
|
||||
},
|
||||
{
|
||||
path: "/operations",
|
||||
name: "Operations",
|
||||
|
|
|
|||
147
ts/view/OAuthRefreshArcgis.vue
Normal file
147
ts/view/OAuthRefreshArcgis.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div
|
||||
class="container min-vh-100 d-flex align-items-center justify-content-center py-5"
|
||||
>
|
||||
<div class="connect-container">
|
||||
<div class="connect-box">
|
||||
<div class="connect-header">
|
||||
<h1>Connect Your ArcGIS Account</h1>
|
||||
<p class="text-muted">Link your data to get started</p>
|
||||
</div>
|
||||
|
||||
<div class="connect-content">
|
||||
<p>
|
||||
To provide you with the best experience, we need to connect to your
|
||||
ArcGIS account. This allows us to securely access and visualize your
|
||||
spatial data within our platform.
|
||||
</p>
|
||||
|
||||
<div class="steps-container">
|
||||
<h4>What to expect:</h4>
|
||||
|
||||
<div v-for="step in steps" :key="step.number" class="step">
|
||||
<h5>{{ step.number }}. {{ step.title }}</h5>
|
||||
<p>{{ step.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<strong>Note:</strong> You'll need an active ArcGIS Online account
|
||||
or ArcGIS Enterprise account to proceed. If you don't have one, you
|
||||
can
|
||||
<a
|
||||
href="https://www.arcgis.com/home/signin.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
create an ArcGIS account here </a
|
||||
>.
|
||||
</div>
|
||||
|
||||
<p>By connecting your ArcGIS account, you'll be able to:</p>
|
||||
<ul>
|
||||
<li v-for="benefit in benefits" :key="benefit">
|
||||
{{ benefit }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-center connect-btn">
|
||||
<a :href="oauthUrl" class="btn btn-primary btn-lg">
|
||||
Connect to ArcGIS
|
||||
</a>
|
||||
<p class="mt-2 text-muted">
|
||||
<small
|
||||
>You can disconnect your account at any time in settings</small
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
interface Step {
|
||||
number: number;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// Define steps
|
||||
const steps = ref<Step[]>([
|
||||
{
|
||||
number: 1,
|
||||
title: "Secure Authentication",
|
||||
description:
|
||||
'When you click the "Connect to ArcGIS" button below, you\'ll be redirected to the official ArcGIS login page. This connection is secure and uses OAuth 2.0 protocol.',
|
||||
},
|
||||
{
|
||||
number: 2,
|
||||
title: "Grant Permissions",
|
||||
description:
|
||||
"After logging in with your ArcGIS credentials, you'll be asked to approve permissions for our application to access your data. We only request access to what's needed for the platform to function.",
|
||||
},
|
||||
{
|
||||
number: 3,
|
||||
title: "Return to Platform",
|
||||
description:
|
||||
"Once authentication is complete, you'll be automatically redirected back to our platform where your data will be available to work with.",
|
||||
},
|
||||
]);
|
||||
|
||||
// Define benefits
|
||||
const benefits = ref<string[]>([
|
||||
"Access and visualize your spatial data",
|
||||
"Perform advanced analysis using our integrated tools",
|
||||
"Share results with team members securely",
|
||||
"Keep your data synchronized across platforms",
|
||||
]);
|
||||
|
||||
// OAuth URL
|
||||
const oauthUrl = computed(() => "/arcgis/oauth/begin");
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ArcGISConnect",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.connect-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.connect-box {
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 40px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.connect-header {
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.steps-container {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.step {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
border-left: 3px solid #0d6efd;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -76,9 +76,11 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a class="btn btn-primary" :href="urls.oauthRefreshArcGIS">
|
||||
<i class="bi bi-arrow-repeat me-2"></i>Refresh OAuth Token
|
||||
</a>
|
||||
<RouterLink to="/oauth/refresh/arcgis">
|
||||
<button class="btn btn-primary">
|
||||
<i class="bi bi-arrow-repeat me-2"></i>Refresh OAuth Token
|
||||
</button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/configuration/integration/arcgis">
|
||||
<button class="btn btn-outline-danger">
|
||||
<i class="bi bi-gear me-2"></i>Configure
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue