Advertisement
borsha06

login.vue

May 14th, 2018
146
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <v-ons-page modifier="signin_background"  on-device-backbutton="doSomething()">
  3.  
  4.             <div class="signin_div">
  5.  
  6.                 <div class="text_signin">
  7.                     <h2 class="app_title">BCS 360</h2>
  8.                     <h3 class="app_title_two">Objective or a simple description of the app will go here </h3>
  9.  
  10.  
  11.                 </div>
  12.  
  13.  
  14.  
  15.                 <div class="signin_form">
  16.                     <form align="center" v-on:submit.prevent="sign_in">
  17.  
  18.                         <div class="form_item">
  19.                             <div class="form_icon">
  20.                             <i class="fa fa-phone icons form_icon_i form_icon_mobile" aria-hidden="true"></i></div>
  21.                            <div class="input_text"> <v-ons-input id="input_width" float type="text" modifier="material" placeholder="Mobile"
  22.                                          v-model = "mobile" required></v-ons-input> </div>
  23.                         </div>
  24.                         <div class="form_item">
  25.                             <div class="form_icon"><i class="zmdi zmdi-lock-outline icons form_icon_i "></i></div>
  26.                             <div><v-ons-input float type="password"  id="input_width"  modifier="material" placeholder="Password"
  27.                                     v-model="pass"      required></v-ons-input></div>
  28.                         </div>
  29.                         <div class="signin_button">
  30.                         <button type="submit">Sign In</button>
  31.                         </div>
  32.  
  33.                     </form>
  34.                 </div>
  35.                 <div class="signin_menu">
  36.                     <div class="signUp_option" >
  37.                         <p @click="signup_page">CREATE NEW ACCOUNT</p>
  38.                     </div>
  39.                     <div class="forgot_password">
  40.                         <u>FORGOT PASSWORD</u>
  41.                     </div>
  42.  
  43.                 <div class="l360_logo">
  44.                     <svg version="1.1" viewBox="0 0 895.24 233.33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs><clipPath id="b"><path d="m0 175h671.43v-175h-671.43z"/></clipPath><clipPath id="a"><path d="m0 175h671.43v-175h-671.43z"/></clipPath></defs><g transform="matrix(1.3333 0 0 -1.3333 0 233.33)"><g clip-path="url(#b)"><g transform="translate(37.436 64.39)"><path d="m0 0c-0.572 0.571-0.858 1.238-0.858 2.001v74.316c0 0.838 0.286 1.525 0.858 2.058 0.571 0.532 1.238 0.801 2.001 0.801h16.006c0.838 0 1.524-0.269 2.058-0.801 0.533-0.533 0.8-1.22 0.8-2.058v-59.224h34.301c0.837 0 1.543-0.285 2.115-0.858 0.572-0.572 0.857-1.277 0.857-2.115v-12.119c0-0.84-0.285-1.525-0.857-2.059s-1.278-0.799-2.115-0.799h-53.165c-0.763 0-1.43 0.286-2.001 0.857" fill="#2c6ca5"/></g><g transform="translate(106.03 64.39)"><path d="m0 0c-0.571 0.571-0.857 1.238-0.857 2.001v74.202c0 0.838 0.266 1.544 0.8 2.115 0.533 0.572 1.219 0.858 2.058 0.858h53.966c0.838 0 1.543-0.286 2.115-0.858 0.57-0.571 0.857-1.277 0.857-2.115v-11.319c0-0.84-0.287-1.526-0.857-2.058-0.572-0.534-1.277-0.801-2.115-0.801h-36.13v-14.519h33.614c0.838 0 1.543-0.286 2.115-0.859 0.573-0.571 0.858-1.277 0.858-2.115v-10.404c0-0.84-0.285-1.543-0.858-2.115-0.572-0.572-1.277-0.857-2.115-0.857h-33.614v-14.863h37.044c0.838 0 1.543-0.286 2.115-0.858s0.858-1.278 0.858-2.116v-11.318c0-0.84-0.286-1.525-0.858-2.059s-1.277-0.799-2.115-0.799h-54.88c-0.763 0-1.429 0.286-2.001 0.857" fill="#2c6ca5"/></g><g transform="translate(295.5 108.24)"><path d="m0 0c3.275 0 5.773 0.818 7.489 2.458 1.714 1.638 2.573 3.905 2.573 6.804 0 2.895-0.859 5.218-2.573 6.973-1.716 1.752-4.214 2.63-7.489 2.63h-12.691v-18.865zm-33.328-43.847c-0.572 0.572-0.859 1.239-0.859 2.001v74.202c0 0.838 0.267 1.544 0.801 2.116 0.532 0.571 1.219 0.857 2.058 0.857h31.442c10.062 0 17.931-2.287 23.61-6.86 5.677-4.573 8.518-11.015 8.518-19.323 0-5.335-1.24-9.872-3.716-13.605-2.478-3.735-5.888-6.631-10.233-8.689l15.435-27.898c0.229-0.457 0.343-0.877 0.343-1.257 0-0.611-0.228-1.164-0.686-1.659-0.457-0.495-1.029-0.742-1.715-0.742h-16.121c-2.211 0-3.773 1.028-4.688 3.087l-12.577 24.81h-10.975v-25.039c0-0.84-0.287-1.525-0.858-2.058-0.571-0.534-1.277-0.8-2.115-0.8h-15.664c-0.762 0-1.429 0.286-2 0.857" fill="#2c6ca5"/></g><g transform="translate(341.63 64.39)"><path d="m0 0c-0.572 0.571-0.858 1.238-0.858 2.001v74.202c0 0.838 0.267 1.544 0.8 2.115 0.533 0.572 1.219 0.858 2.059 0.858h12.919c1.753 0 3.048-0.726 3.887-2.173l26.983-42.647v41.847c0 0.838 0.266 1.544 0.8 2.115 0.533 0.572 1.219 0.858 2.058 0.858h14.521c0.838 0 1.523-0.286 2.059-0.858 0.532-0.571 0.799-1.277 0.799-2.115v-74.088c0-0.841-0.267-1.544-0.799-2.115-0.536-0.571-1.221-0.857-2.059-0.857h-12.92c-1.754 0-3.05 0.723-3.888 2.171l-26.868 40.931v-40.244c0-0.84-0.286-1.525-0.856-2.059-0.573-0.534-1.279-0.799-2.116-0.799h-14.52c-0.764 0-1.43 0.286-2.001 0.857" fill="#2c6ca5"/></g><g transform="translate(434.01 65.876)"><path d="m0 0c-5.069 2.324-8.804 5.202-11.205 8.632-2.4 3.43-3.678 6.86-3.83 10.291 0 0.685 0.246 1.257 0.743 1.714 0.495 0.458 1.087 0.686 1.772 0.686h15.779c0.915 0 1.638-0.172 2.172-0.515 0.532-0.342 1.029-0.896 1.486-1.658 1.447-3.735 5.449-5.602 12.005-5.602 3.734 0 6.632 0.876 8.69 2.63 2.058 1.753 3.087 4.116 3.087 7.089 0 5.716-3.813 8.575-11.434 8.575h-12.805c-0.84 0-1.544 0.285-2.115 0.857-0.572 0.572-0.858 1.276-0.858 2.115v6.746c0 1.753 0.647 3.047 1.944 3.888l18.408 15.091h-31.557c-0.761 0-1.429 0.286-2 0.858-0.572 0.572-0.858 1.238-0.858 2v11.32c0 0.838 0.266 1.544 0.801 2.115 0.532 0.571 1.218 0.857 2.057 0.857h53.28c0.837 0 1.524-0.286 2.057-0.857s0.801-1.277 0.801-2.115v-10.176c0-1.601-0.61-2.858-1.829-3.772l-16.921-15.436 0.8-0.229c6.859-0.991 12.308-3.355 16.349-7.088 4.04-3.736 6.06-9.109 6.06-16.121 0-5.108-1.469-9.586-4.401-13.435-2.936-3.85-6.975-6.803-12.12-8.86-5.144-2.058-10.996-3.087-17.55-3.087-7.472 0-13.74 1.161-18.808 3.487" fill="#2c6ca5"/></g><g transform="translate(537.88 82.683)"><path d="m0 0c2.362 2.096 3.545 4.935 3.545 8.518 0 3.659-1.163 6.517-3.487 8.575-2.327 2.058-5.203 3.087-8.633 3.087s-6.308-1.029-8.632-3.087c-2.326-2.058-3.486-4.916-3.486-8.575s1.16-6.517 3.486-8.576c2.324-2.057 5.202-3.087 8.632-3.087 3.353 0 6.212 1.048 8.575 3.145m-26.297-16.692c-5.183 2.401-9.223 5.773-12.119 10.119-2.897 4.344-4.345 9.335-4.345 14.976 0 6.555 3.24 14.368 9.719 23.44l20.008 26.753c1.066 1.524 2.439 2.287 4.116 2.287h16.007c0.685 0 1.275-0.248 1.771-0.743 0.496-0.497 0.744-1.086 0.744-1.772 0-0.383-0.191-0.878-0.571-1.487l-15.321-20.809c0.914 0.23 1.981 0.343 3.201 0.343 4.649-0.228 9.165-1.525 13.548-3.887 4.384-2.363 7.965-5.585 10.748-9.662 2.781-4.078 4.174-8.746 4.174-14.005 0-5.337-1.412-10.233-4.232-14.692s-6.785-7.984-11.89-10.576c-5.107-2.592-10.976-3.887-17.607-3.887-6.785 0-12.768 1.2-17.951 3.602" fill="#2c6ca5"/></g><g transform="translate(613.34 83.14)"><path d="m0 0c1.752 2.325 2.704 5.621 2.858 9.891 0.152 2.21 0.229 5.791 0.229 10.747 0 4.954-0.077 8.461-0.229 10.518-0.154 4.116-1.106 7.375-2.858 9.776-1.755 2.401-4.422 3.602-8.004 3.602-6.859 0-10.481-4.46-10.861-13.378-0.077-2.057-0.114-5.564-0.114-10.518 0-4.956 0.037-8.537 0.114-10.747 0.38-8.919 4.002-13.377 10.861-13.377 3.582 0 6.249 1.161 8.004 3.486m-32.014-12.405c-5.487 5.488-8.5 12.729-9.032 21.724-0.153 4.116-0.228 7.812-0.228 11.09 0 3.353 0.075 7.164 0.228 11.434 0.303 5.717 1.733 10.804 4.287 15.263 2.554 4.458 6.249 7.984 11.091 10.576 4.839 2.59 10.728 3.887 17.664 3.887s12.843-1.297 17.722-3.887c4.877-2.592 8.593-6.118 11.147-10.576 2.553-4.459 3.983-9.546 4.287-15.263 0.153-2.135 0.23-5.946 0.23-11.434 0-5.337-0.077-9.032-0.23-11.09-0.533-8.995-3.544-16.236-9.031-21.724-5.488-5.489-13.531-8.27-24.125-8.346-10.518 0.076-18.521 2.857-24.01 8.346" fill="#2c6ca5"/></g></g><g clip-path="url(#a)"><g transform="translate(199.28 91.743)"><path d="m0 0c-1.919-4.454-3.795-9.023-5.77-13.339-7.382-16.126-15.181-31-24.017-42.674-1.121-1.482-2.299-2.744-3.484-3.936-0.278-0.281-0.809-0.179-1.01 0.27-2.83 7.355-1.453 3.468-4.483 12.626 0.69 0.977 16.247 24.661 27.551 52.093 9.076 21.115 14.873 44.439 16.595 50.068 0.456 1.494 0.288 2.177 3.265 2.133 2.978-0.045 5.053-0.019 9.615-0.107 0.411-8e-3 0.968-0.52 1.211-1.247 5.539-16.628 9.418-33.848 16.098-47.914 6.702-14.115 13.729-27.42 21.509-39.11-1.059-2.933-1.826-6.592-2.261-7.704-0.432-1.113-0.813-3.246-2.001-5.678-0.499-1.016-0.89-0.96-1.437-0.04-7.586 12.685-14.73 26.59-21.469 41.641-0.67 1.498-1.343 2.992-2.086 4.31 6.627-18.536 13.882-35.528 22.6-49.501-0.899-0.88-1.616-1.745-2.377-2.252-0.293-0.197-0.74 0.233-1.024 0.692-4.998 8.137-9.638 17.278-14.007 27.172-6.272 14.191-11.849 29.695-16.327 47.262-0.097 0.382-0.222 0.725-0.412 0.969 3.248-15.428 7.155-29.859 11.906-43.041 4.775-13.247 10.456-24.139 16.463-34.444-1.275-1.742-2.314-1.893-3.539 0.035-4.086 6.421-7.605 14.275-10.861 22.795-7.453 19.498-13.398 41.135-17.002 66.033-0.401 2.78-0.715 5.626-1.079 8.436-0.128 0.989-0.284 1.958-0.642 2.931-0.17-2.009-0.326-4.025-0.508-6.026-1.41-15.416-4.347-29.268-8.03-42.325-6.329-22.445-14.281-41.464-23.002-58.821-1.843-3.667-3.758-7.153-5.676-10.608-0.3-0.539-0.85-0.831-1.207-0.597-1.217 0.796-2.401 1.879-3.865 3.072 12.278 17.991 23.349 37.817 30.763 66.826" fill="#ff4700" fill-rule="evenodd"/></g></g></g></svg>
  45.                 </div>
  46.                 </div>
  47.             </div>
  48.  
  49.  
  50.     </v-ons-page>
  51. </template>
  52.  
  53. <script>
  54.  
  55.     import signUp from './SignUp';
  56.     import VueSession from 'vue-session';
  57.     import timers from './timers';
  58.     import Vue from 'vue';
  59.     import dashboard from './dashboard';
  60.     import swal from 'sweetalert';
  61.  
  62.  
  63.     Vue.use(VueSession);
  64.  
  65.     export default {
  66.         data: function(){
  67.             return {
  68.                 mobile:'',
  69.                 pass:'',
  70.  
  71.  
  72.             }
  73.         },
  74.         updated(){
  75.           //  this.score_func();
  76.  
  77.         },
  78.         mounted(){
  79.           this.backup_but();
  80.         },
  81.  
  82.  
  83.         methods: {
  84.             sign_in(){
  85.                 if(navigator.connection.rtt == 0){
  86.                     swal({
  87.                         title: "Oops!",
  88.                         text: "Network problem",
  89.                         icon: "error",
  90.                     });
  91.  
  92.  
  93.             }
  94.             else {
  95.  
  96.                     this.$http({
  97.                         method: 'post',
  98.                         url: this.base_url + '/connect_user/connect-user-login-by-mobile/' + this.mobile + '/',
  99.                         auth: {
  100.                             username: 'l360_mobile_app',
  101.                             password: 'itsd321#'
  102.                         },
  103.                         data: {
  104.                             password: this.pass
  105.                         }
  106.                     }).then(res => {
  107.  
  108.                         console.log(res);
  109.                         if (res.status == '200') {
  110.  
  111.                             var user = {
  112.                                 id: res.data.id,
  113.                                 name: res.data.name,
  114.                                 birthday: res.data.birthday,
  115.                                 email: res.data.email,
  116.                                 fb_id: res.data.fb_id,
  117.                                 gender: res.data.gender,
  118.                                 mobile: res.data.mobile,
  119.                                 status: res.data.status
  120.                             }
  121.                             console.log(this.mobile);
  122.                             this.mobile = "";
  123.                             this.pass = "";
  124.                             console.log(user);
  125.                             this.$store.commit('setUser', user);
  126.                             console.log(this.$store.state.user);
  127.                             this.$http({
  128.                                 method: 'get',
  129.                                 url: this.base_url + '/exam/api/' + 'score/' + this.$store.state.user.id + '/',
  130.  
  131.                                 auth: {
  132.                                     username: 'l360_mobile_app',
  133.                                     password: 'itsd321#'
  134.                                 },
  135.                             }).then(res => {
  136.  
  137.                                 console.log(res);
  138.                                 if (res.status == '200') {
  139.                                     console.log(res.data);
  140.                                     this.score = res.data;
  141.                                     for (let v  in  this.score) {
  142.                                         this.value.push(this.score[v]);
  143.                                     }
  144.                                     for (let key  in  this.score) {
  145.                                         this.keys.push(key);
  146.                                     }
  147.                                     var response = {
  148.                                         keys : this.keys,
  149.                                         value : this.value
  150.                                     }
  151.  
  152.                                     this.$store.commit('SubjectResponse', response);
  153.                                     console.log(this.keys);
  154.                                     console.log(this.value);
  155.                                 }
  156.                             });
  157.                            
  158.  
  159.                             if (this.$store.state.user.status === false) {
  160.  
  161.  
  162.                                 this.pageStack.push(dashboard);
  163.                             }
  164.                             /*else{
  165.                             this.pageStack.push(timers);
  166.                              }
  167.                             */
  168.  
  169.                         }
  170.                     }).catch(err => {
  171.                         console.log(err.response);
  172.  
  173.  
  174.                         console.log(err.response.status);
  175.                         if (err.response.status == 404) {
  176.                             swal({
  177.                                 title: "Oops!",
  178.                                 text: "User not found",
  179.                                 icon: "error",
  180.                             });
  181.                         } else if (err.response.status == 401) {
  182.                             swal({
  183.                                 title: "Oops!",
  184.                                 text: "Password did not match",
  185.                                 icon: "error",
  186.                             });
  187.                         }
  188.                     })
  189.                 }
  190.  
  191.             },
  192.  
  193.             signup_page() {
  194.                 this.pageStack.push(signUp);
  195.             },
  196.             doSomething(){
  197.                 alert("pressed");
  198.             }
  199.         },
  200.         computed:{
  201.             backup_but(){
  202.                 this.$ons.ready(() => {
  203.  
  204.                     this.$ons.disableDeviceBackButtonHandler();
  205.  
  206.                     document.addEventListener("backbutton", e => {
  207.                         e.preventDefault();
  208.                         e.stopPropagation();
  209.                     }, false);
  210.                     //alert("hello");
  211.  
  212.                 });
  213.  
  214.             },
  215.         },
  216.         props: ['pageStack'],
  217.  
  218.     }
  219. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement