OKyJIucT

Untitled

Apr 20th, 2021
541
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div>
  3.  
  4.         <h3 class="mb-3">User informations</h3>
  5.  
  6.         <v-form>
  7.             <v-layout row wrap>
  8.  
  9.                 <v-flex md6 pa-2>
  10.                     <v-text-field
  11.                             v-model="login"
  12.                             label="Login"
  13.                             disabled
  14.                             :prepend-icon="'input'"
  15.  
  16.                     ></v-text-field>
  17.                 </v-flex>
  18.  
  19.                 <v-flex pa-2 md6>
  20.                     <v-text-field
  21.                             v-model="email"
  22.                             label="Email"
  23.                             :prepend-icon="'alternate_email'"
  24.                             disabled
  25.                     ></v-text-field>
  26.                 </v-flex>
  27.  
  28.                 <v-flex pa-2 md6>
  29.                     <v-text-field
  30.                             v-model="name"
  31.                             label="Name"
  32.                             :prepend-icon="'account_box'"
  33.                     ></v-text-field>
  34.                 </v-flex>
  35.  
  36.                 <v-flex pa-2 md6>
  37.  
  38.                     <v-text-field
  39.                             v-model="password"
  40.                             label="Password"
  41.                             :prepend-icon="'lock'"
  42.                             v-on:keyup.enter="submit"
  43.                             :append-outer-icon="'cached'"
  44.                             @click:append-outer="generatePassword()"
  45.                     ></v-text-field>
  46.  
  47.                 </v-flex>
  48.  
  49.                 <v-flex pa-2 md6 >
  50.                     <v-text-field
  51.                             v-model="telegram"
  52.                             label="Telegram (ex. username)"
  53.                             prepend-icon="perm_phone_msg"
  54.                             :error-messages="telegramErrors"
  55.                             disabled
  56.                             @input="$v.telegram.$touch()"
  57.                             @blur="$v.telegram.$touch()"
  58.                     ></v-text-field>
  59.                 </v-flex>
  60.  
  61.                 <v-flex pa-2 md5>
  62.  
  63.                     <v-switch
  64.                             v-if="this.telegram_user_id"
  65.                             label="Telegram notifications"
  66.                             color="primary"
  67.                             v-model="telegram_notification"
  68.                             :disabled="!this.telegram_user_id"
  69.                     ></v-switch>
  70.  
  71.                     <v-btn
  72.                         v-if="!this.telegram_user_id"
  73.                         color="primary"
  74.                         href="https://t.me/solo_crm_bot"
  75.                         target="_blank">Add Telegram</v-btn>
  76.  
  77.                 </v-flex>
  78.  
  79.             </v-layout>
  80.  
  81.         </v-form>
  82.  
  83.         <h3 class="mb-3">My accounts</h3>
  84.  
  85.         <v-layout wrap>
  86.             <v-flex md12>
  87.  
  88.                 <v-alert
  89.                         :value="true"
  90.                         type="warning"
  91.                 >
  92.  
  93.                     <p class="text-item">
  94.                         <strong> Добавляя имя пользователя в этот список, вы разрешаете ему входить в вашу учетную запись без имени пользователя и пароля и выполнять ВСЕ доступные вам действия</strong>
  95.                     </p>
  96.  
  97.                     <p class="text-item">
  98.                         <strong>By adding a login to this list, you allow him to enter your account without a username and password and perform ALL actions available to you</strong>
  99.                     </p>
  100.  
  101.                 </v-alert>
  102.  
  103.                 <v-layout align-center>
  104.  
  105.                     <v-flex md4 mr-3>
  106.  
  107.                         <v-form
  108.                                 ref="form"
  109.                         >
  110.                             <v-text-field
  111.                                     v-model="related_account"
  112.                                     prepend-icon="input"
  113.                                     label="Login or Email"
  114.                             ></v-text-field>
  115.                         </v-form>
  116.  
  117.                     </v-flex>
  118.  
  119.                     <v-flex md6>
  120.  
  121.                         <v-btn
  122.                                 class="ml-0"
  123.                                 color="primary"
  124.                                 :disabled="!related_account"
  125.                                 @click="addAccount()"
  126.                         >
  127.                             Add account
  128.                             <v-icon right>add</v-icon>
  129.                         </v-btn>
  130.  
  131.                     </v-flex>
  132.  
  133.                 </v-layout>
  134.  
  135.                 <v-data-table
  136.                         v-if="allow_auth_users.length"
  137.                         :headers="headers"
  138.                         :items="allow_auth_users"
  139.                         class="elevation-1 mb-2"
  140.                         hide-actions
  141.                 >
  142.                     <template v-slot:items="props">
  143.  
  144.                         <!-- id-->
  145.                         <td class="text-xs-left">
  146.                             {{ props.item.id }}
  147.                         </td>
  148.  
  149.                         <!--Email-->
  150.                         <td class="text-xs-left ">
  151.                             {{ props.item.email }}
  152.                         </td>
  153.  
  154.                         <!--login-->
  155.                         <td class="text-xs-left ">
  156.                             {{ props.item.login }}
  157.                         </td>
  158.  
  159.                         <!-- action-->
  160.                         <td class="text-xs-center">
  161.                             <v-btn
  162.                                     icon
  163.                                     small
  164.                                     flat
  165.                                     title="Delete user"
  166.                                     @click="deleteAllowUser(props.item.login)"
  167.                             >
  168.  
  169.                                 <v-icon>delete_outline</v-icon>
  170.  
  171.                             </v-btn>
  172.                         </td>
  173.  
  174.                     </template>
  175.  
  176.                 </v-data-table>
  177.  
  178.             </v-flex>
  179.  
  180.         </v-layout>
  181.  
  182.         <v-btn
  183.                 class="ml-0 mt-4"
  184.                 color="success"
  185.                 depressed
  186.                 @click="submit">
  187.             Save
  188.             <v-icon right>save</v-icon>
  189.         </v-btn>
  190.  
  191.     </div>
  192. </template>
  193.  
  194. <script>
  195.     import * as ACTIONS from '../../../../store/actions';
  196.  
  197.     import {validationMixin} from 'vuelidate';
  198.     import {required, minLength} from 'vuelidate/lib/validators';
  199.  
  200.     export default {
  201.         name: "userForm",
  202.  
  203.         mixins: [validationMixin],
  204.  
  205.         validations: {
  206.             name: {required},
  207.             telegram: {
  208.                 required,
  209.                 minLength: minLength(5),
  210.                 isValid(value) {
  211.                     return /^\w+$/.test(value);
  212.                 },},
  213.             password: {minLength: minLength(8)},
  214.         },
  215.  
  216.         data: () => {
  217.             return {
  218.                 headers: [
  219.                     {
  220.                         text: 'Id',
  221.                         align: 'left',
  222.                         sortable: false,
  223.                     },
  224.  
  225.                     {
  226.                         text: 'Email',
  227.                         align: 'left',
  228.                         sortable: false,
  229.                     },
  230.  
  231.                     {
  232.                         text: 'Login',
  233.                         align: 'left',
  234.                         sortable: false,
  235.                     },
  236.  
  237.                     {
  238.                         text: 'Action',
  239.                         align: 'center',
  240.                         sortable: false,
  241.                     },
  242.  
  243.                 ],
  244.                 related_account: null,
  245.                 modal: false,
  246.                 valid: true,
  247.                 loading: false,
  248.                 name: null,
  249.                 login: null,
  250.                 email: null,
  251.                 telegram: null,
  252.                 telegram_user_id: null,
  253.                 telegram_notification: false,
  254.                 password: null,
  255.                 sizePassword: 10,
  256.                 characters: 'a-z,A-Z,0-9,#',
  257.                 result_access: false,
  258.                 allow_auth_users: []
  259.             }
  260.         },
  261.         methods: {
  262.             getUserInfo() {
  263.                 this.$store.dispatch(ACTIONS.GET_PROFILE)
  264.                     .then(res => {
  265.                         this.name = res.name;
  266.                         this.login = res.login;
  267.                         this.email = res.email;
  268.                         this.telegram = res.telegram;
  269.                         this.telegram_user_id = res.telegram_user_id;
  270.                         this.telegram_notification = res.telegram_notification;
  271.                         this.allow_auth_users = res.allow_auth_users
  272.                     });
  273.             },
  274.  
  275.             submit() {
  276.  
  277.                 this.$v.$touch();
  278.  
  279.                 if (!this.$v.$invalid) {
  280.                     this.$store.dispatch(ACTIONS.PROFILE_EDIT, {
  281.                         name: this.name,
  282.                         telegram: this.telegram,
  283.                         telegram_user_id: this.telegram_user_id,
  284.                         telegram_notification: this.telegram_notification,
  285.                         password: this.password,
  286.                     }).then(() => {
  287.                         this.$notifySuccess({text: 'Profile updated'});
  288.                         this.$router.push('/profile');
  289.  
  290.                         this.getUserInfo();
  291.                     });
  292.                 }
  293.             },
  294.             generatePassword: function () {
  295.                 let charactersArray = this.characters.split(',');
  296.                 let CharacterSet = '';
  297.                 let password = '';
  298.  
  299.                 if (charactersArray.indexOf('a-z') >= 0) {
  300.                     CharacterSet += 'abcdefghijklmnopqrstuvwxyz';
  301.                 }
  302.                 if (charactersArray.indexOf('ACTIONS-Z') >= 0) {
  303.                     CharacterSet += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  304.                 }
  305.                 if (charactersArray.indexOf('0-9') >= 0) {
  306.                     CharacterSet += '0123456789';
  307.                 }
  308.                 if (charactersArray.indexOf('#') >= 0) {
  309.                     CharacterSet += '![]{}()%&*$#^<>~@|';
  310.                 }
  311.  
  312.                 for (let i = 0; i < this.sizePassword; i++) {
  313.                     password += CharacterSet.charAt(Math.floor(Math.random() * CharacterSet.length));
  314.                 }
  315.                 this.password = password;
  316.             },
  317.             clearForm() {
  318.                 this.related_account = null;
  319.             },
  320.             addAccount() {
  321.                 this.$store.dispatch(ACTIONS.ADD_RELATED_ACCOUNT, {
  322.                     login: this.related_account,
  323.                 }).then(() => {
  324.                     this.$notifySuccess({text: 'Added related account'});
  325.  
  326.                     this.clearForm();
  327.                     this.getUserInfo();
  328.                 });
  329.             },
  330.             deleteAllowUser(login){
  331.                 this.$confirm('Are you sure you?').then(res => {
  332.                     if (res) {
  333.  
  334.                         this.$store.dispatch(ACTIONS.DELETE_RELATED_ACCOUNT, {
  335.                             login: login,
  336.                         }).then(() => {
  337.                             this.$notifySuccess({text: 'Deleted related account'});
  338.                             this.getUserInfo();
  339.                         });
  340.                     }
  341.                 })
  342.  
  343.             },
  344.         },
  345.         mounted: function () {
  346.             this.$v.$touch();
  347.             this.getUserInfo();
  348.  
  349.         },
  350.  
  351.         computed: {
  352.             nameErrors() {
  353.                 const errors = [];
  354.                 if (!this.$v.name.$dirty) return errors;
  355.                 !this.$v.name.required && errors.push('Name is required');
  356.                 return errors
  357.             },
  358.             telegramErrors() {
  359.                 const errors = [];
  360.                 if (!this.$v.telegram.$dirty) return errors;
  361.                 !this.$v.telegram.required && errors.push('Telegram is required');
  362.                 return errors;
  363.             },
  364.             passwordErrors() {
  365.                 const errors = [];
  366.                 if (!this.$v.password.$dirty) return errors;
  367.                 !this.$v.password.minLength && errors.push('Password must contain at least 8 characters');
  368.                 return errors;
  369.             },
  370.         },
  371.     }
  372. </script>
  373.  
  374. <style scoped lang="sass">
  375.  
  376.     .text-item
  377.         color: #000
  378.         margin-bottom: 5px
  379.  
  380. </style>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×