www/manager6/form/TFASelector.js

   1 Ext.define('PVE.form.TFASelector', {
   2     extend: 'Ext.container.Container',
   3     xtype: 'pveTFASelector',
   4
   5     viewModel: {
   6         data: {
   7             type: '__default__',
   8             step: null,
   9             digits: null,
  10             id: null,
  11             key: null,
  12             url: null,
  13         },
  14
  15         formulas: {
  16             isOath: (get) => get('type') === 'oath',
  17             isYubico: (get) => get('type') === 'yubico',
  18             tfavalue: {
  19                 get: function(get) {
  20                     let val = {
  21                         type: get('type'),
  22                     };
  23                     if (get('isOath')) {
  24                         let step = get('step');
  25                         let digits = get('digits');
  26                         if (step) {
  27                             val.step = step;
  28                         }
  29                         if (digits) {
  30                             val.digits = digits;
  31                         }
  32                     } else if (get('isYubico')) {
  33                         let id = get('id');
  34                         let key = get('key');
  35                         let url = get('url');
  36                         val.id = id;
  37                         val.key = key;
  38                         if (url) {
  39                             val.url = url;
  40                         }
  41                     } else if (val.type === '__default__') {
  42                         return "";
  43                     }
  44
  45                     return PVE.Parser.printPropertyString(val);
  46                 },
  47                 set: function(value) {
  48                     let val = PVE.Parser.parseTfaConfig(value);
  49                     this.set(val);
  50                     this.notify();
  51                     // we need to reset the original values, so that
  52                     // we can reliably track the state of the form
  53                     let form = this.getView().up('form');
  54                     if (form.trackResetOnLoad) {
  55                         let fields = this.getView().query('field[name!="tfa"]');
  56                         fields.forEach((field) => field.resetOriginalValue());
  57                     }
  58                 },
  59             },
  60         },
  61     },
  62
  63     items: [
  64         {
  65             xtype: 'proxmoxtextfield',
  66             name: 'tfa',
  67             hidden: true,
  68             submitValue: true,
  69             deleteEmpty: true,
  70             bind: {
  71                 value: "{tfavalue}",
  72             },
  73         },
  74         {
  75             xtype: 'proxmoxKVComboBox',
  76             value: '__default__',
  77             deleteEmpty: false,
  78             submitValue: false,
  79             fieldLabel: gettext('TFA'),
  80             comboItems: [['__default__', Proxmox.Utils.noneText], ['oath', 'OATH'], ['yubico', 'Yubico']],
  81             bind: {
  82                 value: "{type}",
  83             },
  84         },
  85         {
  86             xtype: 'proxmoxintegerfield',
  87             hidden: true,
  88             minValue: 10,
  89             submitValue: false,
  90             emptyText: Proxmox.Utils.defaultText + ' (30)',
  91             fieldLabel: 'OATH time step',
  92             bind: {
  93                 value: "{step}",
  94                 hidden: "{!isOath}",
  95                 disabled: "{!isOath}",
  96             },
  97         },
  98         {
  99             xtype: 'proxmoxintegerfield',
 100             hidden: true,
 101             submitValue: false,
 102             fieldLabel: 'OATH password length',
 103             minValue: 6,
 104             maxValue: 8,
 105             emptyText: Proxmox.Utils.defaultText + ' (6)',
 106             bind: {
 107                 value: "{digits}",
 108                 hidden: "{!isOath}",
 109                 disabled: "{!isOath}",
 110             },
 111         },
 112         {
 113             xtype: 'textfield',
 114             hidden: true,
 115             submitValue: false,
 116             allowBlank: false,
 117             fieldLabel: 'Yubico API Id',
 118             bind: {
 119                 value: "{id}",
 120                 hidden: "{!isYubico}",
 121                 disabled: "{!isYubico}",
 122             },
 123         },
 124         {
 125             xtype: 'textfield',
 126             hidden: true,
 127             submitValue: false,
 128             allowBlank: false,
 129             fieldLabel: 'Yubico API Key',
 130             bind: {
 131                 value: "{key}",
 132                 hidden: "{!isYubico}",
 133                 disabled: "{!isYubico}",
 134             },
 135         },
 136         {
 137             xtype: 'textfield',
 138             hidden: true,
 139             submitValue: false,
 140             fieldLabel: 'Yubico URL',
 141             bind: {
 142                 value: "{url}",
 143                 hidden: "{!isYubico}",
 144                 disabled: "{!isYubico}",
 145             },
 146         },
 147     ],
 148 });