From 820ea063681fcd4fa771fc129292442ba7f76886 Mon Sep 17 00:00:00 2001
From: DanielRamirezGe <daniel.adrian.ramirez.george@gmail.com>
Date: Sun, 2 Aug 2020 21:57:53 -0500
Subject: [PATCH] Loggin Panel terminado

---
 package-lock.json             |  19 +++
 package.json                  |   1 +
 public/index.html             |  19 ++-
 src/App.vue                   |  28 +++--
 src/components/HelloWorld.vue | 114 ------------------
 src/components/login.vue      | 213 ++++++++++++++++++++++++++++++++++
 src/components/usuario.vue    |  27 +++++
 src/config/config.js          |   4 +-
 src/main.js                   |   2 +
 src/routes.js                 |  24 +---
 src/view/headerAdmin.vue      |  66 +++++++++++
 11 files changed, 362 insertions(+), 155 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/login.vue
 create mode 100644 src/components/usuario.vue
 create mode 100644 src/view/headerAdmin.vue

diff --git a/package-lock.json b/package-lock.json
index 545c85e..2003379 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4480,6 +4480,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "escalade": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.1.tgz",
@@ -8570,6 +8575,11 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -9971,6 +9981,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "requires": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
     "sweetalert2": {
       "version": "9.15.2",
       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.15.2.tgz",
diff --git a/package.json b/package.json
index 00f6c89..e542772 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.15.0",
     "core-js": "^3.6.5",
+    "sweetalert": "^2.1.2",
     "sweetalert2": "^9.15.2",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
diff --git a/public/index.html b/public/index.html
index 74d7e67..3575dec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,22 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
 	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
-	<!--[if lte IE 8]>
-   	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
-	<![endif]-->
-	<!--[if gt IE 8]><!-->
+
    	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
-	<!--<![endif]-->
+ 
+
+    <!--Importar Iconos  -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
+
 	<link rel="stylesheet" type="text/css" href="style.css" media="screen">
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 	<title>HACKATHON REGISTRO</title>
     <link rel="shortcut icon" href="img/icono.png">
-    
-
-
-
-
-    
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
diff --git a/src/App.vue b/src/App.vue
index 8db0a38..5eb343d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,37 @@
 <template>
+
   <div id="app">
-    <Header />
     <router-view></router-view>
-    <Footer />
   </div>
+
 </template>
 
 <script>
 //import HelloWorld from "./components/HelloWorld.vue";
 
-import Header from "./view/header.vue";
-import Footer from "./view/footer.vue";
 import Vue from "vue";
 import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
 
 Vue.use(BootstrapVue);
-// Optionally install the BootstrapVue icon components plugin
 Vue.use(IconsPlugin);
 
 export default {
   name: "App",
-  components: {
-    //HelloWorld
-    Header,
-    Footer
-  }
+  
 };
 </script>
+
+<style>
+
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+   padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index e8f3285..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<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>
-    <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>
-    </ul>
-    <h3>Essential Links</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>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/login.vue b/src/components/login.vue
new file mode 100644
index 0000000..2e7d8fb
--- /dev/null
+++ b/src/components/login.vue
@@ -0,0 +1,213 @@
+<template>
+<section class="admin-login">
+    <!--Importar componente de header para login -->
+    <Header />
+    <div>
+        <h1>Hackaton UNAM-AWS</h1>
+        
+        <div class="conteiner ">
+            
+        <div class="admin-campos">
+        
+            
+            <i class="fa fa-user" ></i>
+            <input type="email" placeholder="Usuario" v-model="usuario" @keyup.enter="entrar()">
+        </div>
+            
+        <div class="admin-campos">
+            <i class="fa fa-lock"></i>
+            <input type="password" placeholder="Contraseña" v-model="password" @keyup.enter="entrar()">
+        </div>
+        
+            <div class="entrar">
+                
+                <button class="button" id="boton_entrar" v-if="validar_ambos()" @click="entrar()">Entrar</button>
+                <p class="botton_falso" v-else>Entrar</p>
+            </div>
+        </div>
+        <!--Importar componente de footer para login en esta ocacion yo no lo ocuper por eso esta comentado -->
+        <!-- <Footer /> -->
+      
+    </div>
+   
+
+</section>
+</template>
+
+<script>
+    import axios from 'axios';
+    import config from '../config/config.js'
+    import swal from 'sweetalert';
+    import Header from "./../view/headerAdmin.vue";
+    
+export default {
+    components: {
+    //HelloWorld
+        Header 
+    },   
+    data(){
+        return {
+            usuario: '',
+            password: '',
+            error: false,
+            mal: null,
+            resp: null
+        }
+    },   
+    methods:
+    {
+        malo(){
+            return this.error;
+        },
+        validar_ambos()
+        {
+            if(this.usuario!='' && this.password!='')
+                 return true;
+            else
+                return false;
+        },
+        entrar(){
+            
+            const data={
+                usuario: this.usuario,
+                password: this.password,
+            }
+            
+             axios.post(`${config.api}/login`,data).then(async respose=>{
+                
+                this.resp=respose.data;
+                if(respose.data.err==false)
+                {
+                    await swal(`Bienvenido ${this.usuario}`,"","success"); 
+                     
+                    window.localStorage.setItem('id_usuario', respose.data.id_usuario);
+                    this.$router.push('/');
+                }
+                else{ 
+                   this.error=true;
+                   await swal(" Usuario o Contraseña incorrecta.","","error");
+                }
+              }).catch(err=>{
+                swal(" Usuario o Contraseña incorrecta.","","error");
+                this.resp=err;
+                this.error=true;
+              
+              
+            })
+        } 
+    }
+    ,beforeCreate () {
+        localStorage.clear();
+    }
+}
+</script>
+
+
+<style  scoped>
+.button {
+    background-color: #1B3D70; /* Green */
+    border: none;
+    color: white;
+    padding: 1rem 7rem;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    
+    cursor: pointer;
+    font-size: 1.5rem;
+    border-radius: 1rem;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+}
+
+.botton_falso{
+    background-color: #CCC; /* Green */
+    border: none;
+    color: white;
+    padding: 1rem 7rem;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+    font-size: 1.5rem;
+    border-radius: 1rem;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+}
+
+.button:hover {
+  background-color: #bb8800; /* Green */
+  color: white;
+}
+h1{
+    margin-top: 2.5rem;
+    margin-bottom: 3.5rem;
+    font-size: 1.5rem;
+   
+}
+
+.admin-campos {
+    width: 20rem;
+    margin: 0 auto 1rem auto;
+    position: relative;
+}
+
+.admin-campos input[type="email"], .admin-campos input[type="password"] {
+    border-bottom: black .2rem solid;
+    border-left: white;
+    border-right:white;
+    border-top: white;  
+    display: block;
+    font-size: 1rem;
+    margin: 0 auto 2rem auto;
+    padding: 1rem 0 1rem 2rem;
+    width: 85%;
+}
+
+.admin-campos input::placeholder, .admin-campos input::placeholder {
+    color: rgb(75, 71, 71);
+}
+
+.admin-campos i {
+    color: black;
+    font-size: 1.5rem;
+    left: 1.75rem;
+    position: absolute;
+    top: .75rem;
+}
+
+.entrar {
+    display: flex;
+    justify-content: center;
+    margin-top: 5rem;
+}
+
+@media screen and (min-width: 1024px) {
+    h1{
+        margin-top: 3rem;
+        margin-bottom: 4rem;
+        font-size: 2.5rem;
+    }
+    .admin-login img {
+        height: 25rem;
+    }
+
+    .admin-campos {
+        width: 40rem;
+    }
+
+    .admin-campos input[type="email"], .admin-campos input[type="password"] {
+        font-size: 1.5rem;
+        padding: 1rem 0 1rem 4rem;
+    }
+
+    .admin-campos i {
+        font-size: 2rem;
+        left: 3.5rem;
+    }
+}
+</style>
diff --git a/src/components/usuario.vue b/src/components/usuario.vue
new file mode 100644
index 0000000..f13ca6a
--- /dev/null
+++ b/src/components/usuario.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <Header />
+    <Form />
+    <Footer />
+  </div>
+</template>
+
+<script>
+import Header from "./../view/header.vue";
+import Form from "./form.vue";
+import Footer from "./../view/footer.vue";
+
+export default {
+   components: {
+    //HelloWorld
+    Header,
+    Form,
+    Footer
+}
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>
diff --git a/src/config/config.js b/src/config/config.js
index 2f1720d..11eae73 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -1,5 +1,5 @@
 const config = {
-  //api: "http://localhost:3000"
-  api: "https://venus.acatlan.unam.mx/hackaton"
+  api: "http://localhost:3000"
+  //api: "https://venus.acatlan.unam.mx/hackaton"
 };
 module.exports = config;
diff --git a/src/main.js b/src/main.js
index 8147c2d..19702c9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 import Vue from "vue";
 import App from "./App.vue";
+
 import BootstrapVue from "bootstrap-vue";
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
+
 import VueRouter from "vue-router";
 
 import { routes } from "./routes";
diff --git a/src/routes.js b/src/routes.js
index d0a0d8e..919333e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,19 +1,7 @@
-import Form from "./components/form.vue";
-export const routes = [{ path: "/", component: Form, name: "form" }];
+import Form from "./components/usuario.vue";
+import Login from "./components/login.vue";
+export const routes = [
+    { path: "/", component: Form, name: "form" },
+    { path: "/panelAdmin", component: Login, name: "Login" },
 
-// const isAuthenticated = function() {
-//     if (window.localStorage.pcpumaT) {
-//         return true
-//     }
-//     return false
-// }
-
-// router.beforeEach((to, from, next) => {
-//     if (!isAuthenticated() && to.path !== '/login') {
-//         return next('/login')
-//     }
-//     if (isAuthenticated() && to.path === '/login') {
-//         return next('/')
-//     }
-//     next()
-// })
+];
diff --git a/src/view/headerAdmin.vue b/src/view/headerAdmin.vue
new file mode 100644
index 0000000..d995cd6
--- /dev/null
+++ b/src/view/headerAdmin.vue
@@ -0,0 +1,66 @@
+<template>
+  <div >
+    <div class="pure-g header">
+      <div class="pure-u-1 pure-u-sm-1 pure-u-md-1 pure-u-lg-1 pure-u-xl-1">
+        <div class="logo_unam">
+          <a href="https://www.unam.mx/" target="_blank">
+            <img src="https://www.c3.unam.mx/image/logoUnam.png" />
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- div banner -->
+   
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+
+
+.header {
+  width: 100%;
+  max-height: 260px;
+  background-color: #000000;
+}
+
+.logo_unam {
+  padding: 2% 3%;
+}
+
+.logo_unam img {
+  display: block;
+  margin: 0 auto;
+  width: 90px;
+}
+
+@media screen and (max-width: 768px) {
+  .logo_unam img {
+    width: 50px;
+    margin-right: auto;
+    margin-left: 0px;
+    display: block;
+  }
+}
+
+.logo_der {
+  display: block;
+  margin-left: auto;
+}
+
+
+@media screen and (max-width: 767px) {
+  .footer img {
+    width: 40px !important;
+    height: 40px !important;
+  }
+  .texto_footer {
+    font-size: 12px !important;
+  }
+}
+
+</style>
-- 
2.43.0