edge_frame/
auth.rs

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
use yew::prelude::*;

use crate::field::Field;
use crate::loading::*;
use crate::util::if_true;

use crate::dto::Role;

#[derive(Properties, Clone, Default, Debug, PartialEq)]
pub struct AuthProps {
    #[prop_or_default]
    pub username: String,

    #[prop_or_default]
    pub password: String,

    #[prop_or_default]
    pub auth_failed: bool,

    #[prop_or_default]
    pub authenticating: bool,

    pub submit: Callback<(String, String)>,
}

#[function_component(Auth)]
pub fn auth(props: &AuthProps) -> Html {
    let username_state = use_state(|| None);
    let password_state = use_state(|| None);

    let username = Field::text(props.username.clone(), username_state, Ok);
    let password = Field::text(props.password.clone(), password_state, Ok);

    let disabled = props.authenticating;
    let hidden = if_true(
        !props.auth_failed || props.authenticating,
        "visibility: hidden;",
    );

    let onclick = {
        let username = username.clone();
        let password = password.clone();
        let submit = props.submit.clone();

        Callback::from(move |_| {
            submit.emit((
                username.value().unwrap_or_default(),
                password.value().unwrap_or_default(),
            ))
        })
    };

    html! {
        <div class="columns is-flex is-vcentered">
            <div class="column is-4">
                <div class="box has-text-centered">
                    <h3 class="title is-3">{"Login"}</h3>
                    <div class="field">
                        <label class="label">{"Username"}</label>
                        <div class="control">
                            <input
                                class="input"
                                type="text"
                                value={username.raw_value()}
                                oninput={username.change((|()| {}).into())}
                                {disabled}
                                />
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">{"Password"}</label>
                        <div class="control">
                            <input
                                class="input"
                                type="password"
                                value={password.raw_value()}
                                oninput={password.change((|()| {}).into())}
                                {disabled}
                                />
                        </div>
                    </div>
                    <p class="help is-danger" style={hidden}>{"Invalid username or password"}</p>
                    <button
                        class={classes!("button", "my-4", if_true(props.authenticating, "is-loading"))}
                        {disabled}
                        {onclick}
                    >
                        {"Login"}
                    </button>
                </div>
            </div>
        </div>
    }
}

#[derive(Properties, Clone, Default, Debug, PartialEq)]
pub struct AuthStateProps {
    pub role: Option<Role>,
    #[prop_or_default]
    pub login: Option<Callback<()>>,
}

#[function_component(AuthState)]
pub fn auth_state(props: &AuthStateProps) -> Html {
    match props.role {
        Some(Role::None) => {
            html! {
                <div class="columns is-flex is-vcentered">
                    <div class="column is-4">
                        <div class="box has-text-centered">
                            <h3 class="title is-3">{"You are logged out."}</h3>
                            {
                                if let Some(login) = &props.login {
                                    let login = login.clone();
                                    let onclick = Callback::from(move |_| login.emit(()));

                                    html! {
                                        <a href="javascript:void(0);" {onclick}>{"Login again"}</a>
                                    }
                                } else {
                                    html! {}
                                }
                            }
                        </div>
                    </div>
                </div>
            }
        }
        None => {
            html! {
                <Loading/>
            }
        }
        Some(role) => {
            html! {
                <div class="columns is-flex is-vcentered">
                    <div class="column is-4">
                        <div class="box has-text-centered">
                            <h3 class="title is-3">{format!("You are logged in as {role}.")}</h3>
                        </div>
                    </div>
                </div>
            }
        }
    }
}

#[function_component(NoPerm)]
pub fn no_perm() -> Html {
    html! {
        <div class="columns is-flex is-vcentered">
            <div class="column">
                <div class="box has-text-centered">
                    <h3 class="title is-3">{"You have no permissions to access this content"}</h3>
                </div>
            </div>
        </div>
    }
}