initial
This commit is contained in:
parent
a445533fd9
commit
01960b2822
35
src/App.vue
35
src/App.vue
@ -1,28 +1,39 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<HelloWorld @updated="logger" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import HelloWorld from "./components/HelloWorld.vue";
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
name: "App",
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
HelloWorld,
|
||||
},
|
||||
methods: {
|
||||
logger(val) {
|
||||
console.log(val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
/* font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
-moz-osx-font-smoothing: grayscale; */
|
||||
/* text-align: center; */
|
||||
color: azure;
|
||||
}
|
||||
|
||||
* {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,58 +1,230 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<div class="main">
|
||||
<HistoryList />
|
||||
<div class="top">
|
||||
<div class="header">
|
||||
DNS Lookup Tool
|
||||
<div class="flexRow">
|
||||
<button @click="getRecordsFromDomain(newDomain)" class="btn input">
|
||||
Lookup
|
||||
</button>
|
||||
<input
|
||||
id="domainEnter"
|
||||
type="text"
|
||||
v-model="newDomain"
|
||||
class="input text"
|
||||
@keyup.enter="getRecordsFromDomain(newDomain)"
|
||||
/>
|
||||
<label style="margin: 10px;" for="domainEnter">Domain: </label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<h2 class="title" v-if="!data">Please enter a domain</h2>
|
||||
<div v-if="data">
|
||||
<h2 class="title">
|
||||
Domain:
|
||||
<a :href="domain">{{ data[0]["dns"]["domain"] }}</a>
|
||||
</h2>
|
||||
<h3 class="title">Whois</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
<li v-for="reg in data[0]['whois']['registrar']" :key="reg.id">
|
||||
Registrar: {{ reg }}
|
||||
</li>
|
||||
<li v-for="stat in data[0]['whois']['status']" :key="stat.id">
|
||||
Status: {{ stat }}
|
||||
</li>
|
||||
<div v-if="data[0]['whois']['registrant']['registrantID'] != null">
|
||||
<li
|
||||
v-for="reg in data[0]['whois']['registrant']['registrantName']"
|
||||
:key="reg.id"
|
||||
>
|
||||
Registrant Name: {{ reg }}
|
||||
</li>
|
||||
<li
|
||||
v-for="reg in data[0]['whois']['registrant']['registrantID']"
|
||||
:key="reg.id"
|
||||
>
|
||||
Eligibility ID: {{ reg }}
|
||||
</li>
|
||||
<li
|
||||
v-for="reg in data[0]['whois']['registrant']['eligibilityType']"
|
||||
:key="reg.id"
|
||||
>
|
||||
Eligibility Type: {{ reg }}
|
||||
</li>
|
||||
</div>
|
||||
<li v-for="cd in data[0]['whois']['createDate']" :key="cd.id">
|
||||
Creation Date: {{ cd }}
|
||||
</li>
|
||||
<li v-for="ns in data[0]['whois']['nameservers']" :key="ns.id">
|
||||
Nameserver: {{ ns }}
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<h3 class="title">DNS Records</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
<li v-for="a in data[0]['dns']['a']" :key="a.id">A: {{ a }}</li>
|
||||
<li v-for="aaaa in data[0]['dns']['aaaa']" :key="aaaa.id">
|
||||
AAAA: {{ aaaa }}
|
||||
</li>
|
||||
<li v-for="mx in data[0]['dns']['mx']" :key="mx.id">
|
||||
MX: {{ mx[1] }} PRI: {{ mx[0] }}
|
||||
</li>
|
||||
<li v-for="txt in data[0]['dns']['txt']" :key="txt.id">
|
||||
TXT: {{ txt }}
|
||||
</li>
|
||||
<li v-for="ns in data[0]['dns']['ns']" :key="ns.id">NS: {{ ns }}</li>
|
||||
<li v-for="soa in data[0]['dns']['soa']" :key="soa.id">
|
||||
SOA: {{ soa }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getRecords from "@/services/doRequest";
|
||||
import HistoryList from "@/components/HistoryList.vue";
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
name: "HelloWorld",
|
||||
props: ["value"],
|
||||
components: {
|
||||
HistoryList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
domain: [],
|
||||
newDomain: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getRecordsFromDomain(id) {
|
||||
if (id.includes("http")) {
|
||||
id = id.split(/https?:\/\//)[1];
|
||||
}
|
||||
if (id.includes("/")) {
|
||||
id = id.split("/")[0];
|
||||
}
|
||||
id = id.trim();
|
||||
console.log(id);
|
||||
if (
|
||||
/^[a-zA-Z0-9][a-zA-Z0-9-.]{1,100}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$/.test(
|
||||
id
|
||||
)
|
||||
) {
|
||||
getRecords(id)
|
||||
.then((records) => {
|
||||
this.data = JSON.parse(records);
|
||||
this.domain = "http://" + this.data[0]["dns"]["domain"];
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
console.log(this.newDomain + " is not a domain aparently");
|
||||
this.newDomain = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
created: function() {
|
||||
this.data = this.getRecordsFromDomain("blank");
|
||||
},
|
||||
computed: {
|
||||
inputValue: {
|
||||
set(text) {
|
||||
this.$emit("updated", text);
|
||||
},
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
a {
|
||||
background: rgb(66, 66, 66);
|
||||
}
|
||||
a:link,
|
||||
a:visited {
|
||||
color: azure;
|
||||
}
|
||||
* {
|
||||
background: rgb(66, 66, 66);
|
||||
color: azure;
|
||||
}
|
||||
h3,
|
||||
h2 {
|
||||
background: rgb(66, 66, 66);
|
||||
margin-left: 2%;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
background: rgb(66, 66, 66);
|
||||
margin-left: 5%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
background: rgb(66, 66, 66);
|
||||
padding: 5px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
list-style: none;
|
||||
font-size: medium;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
.top {
|
||||
position: absolute;
|
||||
border: 1px lightgrey;
|
||||
border-style: solid;
|
||||
border-radius: 15px;
|
||||
left: 20%;
|
||||
top: 10px;
|
||||
width: 70%;
|
||||
background: rgb(66, 66, 66);
|
||||
}
|
||||
.center {
|
||||
position: absolute;
|
||||
border: 1px lightgrey;
|
||||
border-radius: 15px;
|
||||
border-style: solid;
|
||||
left: 20%;
|
||||
top: 107px;
|
||||
width: 70%;
|
||||
background: rgb(66, 66, 66);
|
||||
min-height: 100px;
|
||||
}
|
||||
.input {
|
||||
color: azure;
|
||||
background: rgb(66, 66, 66);
|
||||
padding-left: 10px;
|
||||
}
|
||||
.title {
|
||||
font-family: "Arial", bold;
|
||||
}
|
||||
.header {
|
||||
margin: 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.btn {
|
||||
min-width: 100px;
|
||||
min-height: 35px;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-content: flex-end;
|
||||
margin-left: 2em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.text {
|
||||
width: 400px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.flexRow {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
42
src/components/HistoryList.vue
Normal file
42
src/components/HistoryList.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="side">
|
||||
<ul>
|
||||
<li>Lookup 1</li>
|
||||
<li>Lookup 2</li>
|
||||
<li>Lookup 3</li>
|
||||
<li>Lookup 4</li>
|
||||
<li>Lookup 5</li>
|
||||
<li>Lookup 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.side {
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
border: 1px lightgrey;
|
||||
border-radius: 15px;
|
||||
border-style: solid;
|
||||
width: 15%;
|
||||
height: 80vh;
|
||||
margin-top: 100px;
|
||||
background: rgb(66, 66, 66);
|
||||
}
|
||||
ul {
|
||||
background: rgb(66, 66, 66);
|
||||
margin-left: 5%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
li {
|
||||
background: rgb(66, 66, 66);
|
||||
padding: 5px;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
list-style: none;
|
||||
font-size: medium;
|
||||
}
|
||||
</style>
|
||||
25
src/services/doRequest.js
Normal file
25
src/services/doRequest.js
Normal file
@ -0,0 +1,25 @@
|
||||
function getRecords(id) {
|
||||
let URL = "http://10.6.9.42:5000/lookup/";
|
||||
// id = "mmorison.com";
|
||||
|
||||
let domain = URL + id;
|
||||
let request = new XMLHttpRequest();
|
||||
|
||||
return new Promise(function(resolve, reject) {
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState !== 4) return;
|
||||
if (request.status >= 200 && request.status <= 300) {
|
||||
resolve(request.responseText);
|
||||
} else {
|
||||
reject({
|
||||
status: request.status,
|
||||
statusText: request.statusText,
|
||||
});
|
||||
}
|
||||
};
|
||||
request.open("GET", domain, true);
|
||||
request.send();
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = getRecords;
|
||||
Loading…
x
Reference in New Issue
Block a user