quad-image 0.2.0

An image host
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

import { Component, JSX } from 'preact';
import { GallerySecret, plausibleGallerySecret } from '../types';
import CheckCircleOutlineIcon from 'mdi-preact/CheckCircleOutlineIcon';
import CircleOutlineIcon from 'mdi-preact/CircleOutlineIcon';

interface GalleryInputProps {
  accept: (gallery: GallerySecret) => void;
  cancel: () => void;
  label: JSX.Element;
  submitName: string;

  // wip?
  enabled: boolean;
  placeholder?: string;
}
interface GalleryInputState {
  newGallery?: string;
}

export class GalleryInput extends Component<
  GalleryInputProps,
  GalleryInputState
> {
  render(
    props: Readonly<GalleryInputProps>,
    state: Readonly<GalleryInputState>,
  ) {
    const valid = plausibleGallerySecret(state.newGallery ?? '');

    const validations: [string, RegExp | ((s: string) => boolean)][] = [
      ['starts with an ascii letter', /^[a-z]/i],
      ['contains a !', /!/],
      ['tag is 4-10 ascii alphanumerics', /^[a-z0-9]{4,10}!/],
      ['secret is 4-99 characters', /!.{4,99}$/],
      ['matches the mystery regex', plausibleGallerySecret],
    ];

    const checkAndAccept = () => {
      if (!plausibleGallerySecret(this.state.newGallery ?? '')) return;
      this.props.accept(this.state.newGallery!);
    };

    const galleryForm = (
      <>
        <label>
          {props.label}
          <input
            type={'text'}
            className={`form-control is-${valid ? 'valid' : 'invalid'}`}
            placeholder={props.placeholder ?? 'horse!battery staple'}
            onInput={(ev) => {
              this.setState({ newGallery: (ev.target as any)?.value });
            }}
            onKeyDown={(ev) => {
              switch (ev.key) {
                case 'Enter':
                  checkAndAccept();
                  break;
                case 'Escape':
                  props.cancel();
                  break;
              }
            }}
            value={state.newGallery ?? ''}
          />
        </label>
        <button
          className={'btn btn-primary'}
          disabled={!(valid && props.enabled)}
          onClick={checkAndAccept}
        >
          {props.submitName}
        </button>
        <button className={'btn btn-secondary'} onClick={props.cancel}>
          cancel
        </button>
      </>
    );
    const validationView = (
      <ul class={'home--sign_in-validation'}>
        {validations.map(([msg, re]) => {
          const cand = state.newGallery ?? '';
          const valid = 'test' in re ? re.test(cand) : re(cand);
          return (
            <li class={valid ? 'text-success' : 'text-danger'}>
              {valid ? <CheckCircleOutlineIcon /> : <CircleOutlineIcon />} {msg}
            </li>
          );
        })}
      </ul>
    );
    return (
      <>
        {galleryForm}
        {state.newGallery && validationView}
      </>
    );
  }
}